Turn on Lightning Part 8 – Variable Binding

Turn on Lightning Part 8 – Variable Binding

In this blog, we will see 2 different ways of binding variables in lightning components.

If we remembered, in the earlier blogs we passed the attributes between the components using the {!} notation. But now in Spring 17, Salesforce introduced a new {#} notation.

What is this new {#} notation?? but before jumping on the new notation we will try to understand what is existing {!} notation.

What is {!} notation?

Its a bi-directional data-bind expression which means if we passed the attribute value from outer to inner component, and any modification performed at inner component level, will automatically changes the value of outer component.

What is {#} notation?

Continue reading “Turn on Lightning Part 8 – Variable Binding”

Turn on – Lightning Part 7 (Pagination – Client-Side)

Turn on – Lightning Part 7 (Pagination – Client-Side)

In this blog, we will build a Pagination component which also retains the checkboxes which are checked during the next and previous screens.

Requirement: Display the list of Opportunity records with pagination and the checkbox values are retained.

Solution: We will use the “APPLICATION” type event in order to communicate when ‘next’ and ‘previous’ buttons are clicked.

You can see the output in action here:

Step 1: Create an Event – PaginatorEvent.evt


<aura:event type="APPLICATION" description="Event template to communicate on Pagination">
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" />
<aura:attribute name="endPosn" type="Integer"/>
</aura:event>

Continue reading “Turn on – Lightning Part 7 (Pagination – Client-Side)”

Turn on – Lightning Part 6 (Component Wizard – SPA)

Turn on – Lightning Part 6 (Component Wizard – SPA)

In this blog, we will build a wizard where user can navigate between the components before actually submitting the record.

Requirement: Create Account, Contact and Review Screen where the user can switch between screens using ‘back’ and ‘next’ buttons on the wizard.

Solution:

You can view this in action here:

In Winter 17, Salesforce is providing the “force:navigateToComponent” event which enables us to navigate to another component within Salesforce1 and Lightning experience but this event is currently in a beta version which its own limitation.

There are multiple ways of implementing the wizard, we will see one of them by using “$A.CreateComponent” method and by attributes.

Below is the high level diagram – how the communication/flow is happening between the components.

Continue reading “Turn on – Lightning Part 6 (Component Wizard – SPA)”

Turn On – Lightning Part 4 (Building Picklist Values Dynamically)

Turn On – Lightning Part 4 (Building Picklist Values Dynamically)

In this blog, we will see a generic way for displaying the picklist values for the given objects.

You can view this in action here:

Step 1: Apex class to fetch the picklist values for the given set of objects:

public class CollectionsInLightningCls {
@AuraEnabled
public static Map<String, Map<String, List<String>>> getPicklistValues(String objpicklistFieldsMap){
Map<String, List<String>> objPickmap = (Map<String, List<String>>)JSON.deserialize(objpicklistFieldsMap, Map<String, List<String>>.class);
system.debug('objpickmap ' + objPickmap);

Map<String, Map<String, List<String>>> objFieldPicklistMap = new Map<String, Map<String, List<String>>>();
List<String> sobjectslist = new List<String>(objPickmap.keySet());
Schema.DescribeSobjectResult[] results = Schema.describeSObjects(sobjectslist);
Map<String, List<String>> fieldOptionsMap;
for(Schema.DescribeSObjectResult result : results){
fieldOptionsMap = new Map<String, List<String>>();

Schema.sObjectType objType = result.getSObjectType();

Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
map<String, Schema.SObjectField> fieldMap = objDescribe.fields.getMap();
List<String> objFieldlist = objPickmap.get(result.getName());
system.debug('objname ' + result.getName());
system.debug('list of fields ' + objFieldlist);
for(String fld : objFieldlist){
system.debug('fields ' + fld);
List<String > allOpts = new list<String>();
list<Schema.PicklistEntry> values =
fieldMap.get(fld).getDescribe().getPickListValues();

for (Schema.PicklistEntry a : values){
allOpts.add(a.getValue());
}
fieldOptionsMap.put(fld, allOpts);
}
objFieldPicklistMap.put(result.getName(), fieldOptionsMap);
}
return objFieldPicklistMap;
}
}

Continue reading “Turn On – Lightning Part 4 (Building Picklist Values Dynamically)”

Turn On – Lightning Part 3 (Multi-Select Picklist)

Turn On – Lightning Part 3 (Multi-Select Picklist)

ui:inputSelect component can be used both for Single Selection and Multiple Selection values by setting the attribute “multipe=true” for the multi-selection, by default it is single list selection.

Here, we will replicate how the standard multi-picklist field looks like in the lightning component.

You can view this in action here:

Step 1: Identify the object and multi-select picklist field which need to be shown in component.

Eg: Hobbies__c on the Contact object

Step 2: Create a Class which will fetch the picklist values for the given field of the object. Don’t forget to mark the method as @AuraEnabled


public class MultiSelectPicklistCls {
@AuraEnabled
public static List<String> getPicklistvalues(sObject objName, String field_apiname){
List<String> optionlist = new List<String>();

Schema.sObjectType sobject_type = objName.getSObjectType();
Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();

List<Schema.PicklistEntry> pick_list_values = field_map.get(field_apiname).getDescribe().getPickListValues();
for (Schema.PicklistEntry a : pick_list_values) {
optionlist.add(a.getValue());
}
return optionlist;
}
}

Continue reading “Turn On – Lightning Part 3 (Multi-Select Picklist)”

Turn On – Lightning Part 2 (Dynamic Creating Component)

Turn On – Lightning Part 2 (Dynamic Creating Component)

Display the list of components and create a dynamic component based on the button click.

Scenario: Display the list of lightning components as buttons and display the component in action on respective button click.

Step 1: Creating individual lightning components as required and storing the component names in an object.

Step 2:Create a Apex Controller Class “DisplayMyLtngComponentsController” which does the query from the object where we are storing the list of lightning component names

public class DisplayMyLtngComponentsController {
@AuraEnabled
public static List<Lightning_Component__c> getLightningComponents(){
return [Select id, name, Component_Name__c from Lightning_Component__c Order By CreatedDate];
}
}

Step 3: Create a Component called “DisplayComponents” as below:

Continue reading “Turn On – Lightning Part 2 (Dynamic Creating Component)”

SSO Integration between Salesforce Orgs

SSO Integration between Salesforce Orgs

There is very good blog which explains steps-by-step about how Salesforce will be acting as both Identity Provider (IdP) and Service Provider (SP).

Requirement: Lets implement integration between IdP and SP. So, that whenever the User is Active/In-Active in IdP, the same thing should be reflected in the SP.

Solution: We will implement a batch job in IdP which makes a REST based callout to SP in order to create or update the users.

Step 1: Create connected App in Destination (in our case it is SP)

connectedAppforSSO

Step 2: Configure Client Secret, Consumer Key and the URL instance from Destination Org (SP) in Source Org (IdP)

Client Secret, Consumer Key should be configured in Custom Setting but in this example I will be directing using this in code. And the URL instance must be configured in Remote Site Settings.

Continue reading “SSO Integration between Salesforce Orgs”