Turn on – Lightning (Working with Field Sets)

Turn on – Lightning (Working with Field Sets)

In this blog, we will build a lightning component which works on Field Sets for any given object.

Currently, we cannot directly use fieldset in lightning component unlike what we used to do it in Visualforce. May be in future, Salesforce might provide OOB component for this.

Requirement: Display the list of sObject records where the columns should be dynamic/configurable (similar to field set) in lightning

Solution:

We will use the same field set which we use for VF pages to display data.

Configuring the field set at the object level and by using the wrapper class.

You can view this in action here:

Continue reading “Turn on – Lightning (Working with Field Sets)”

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 5 (Iteration over Map)

Turn on – Lightning Part 5 (Iteration over Map)

Currently as per Aura documents, it only supports list but whereas the Map collection type can be used very well in javascript controller.

Scenario: Customer wants to display the list of Open Opportunities by grouping them on Stage.

You can view this in action here:

Step 1: Apex Controller Class to fetch the list of open opportunities

public class DisplayOpptys {
@AuraEnabled
public static Map<String, List<Opportunity>> fetchOpptyRecords(){
List<Opportunity> opptylist;
Map<String, List<Opportunity>> opptylistStageMap = new Map<String, List<Opportunity>>();

for(Opportunity oppty : [SELECT Id, Name, StageName, Amount FROM Opportunity
where isClosed =: false]){
if(opptylistStageMap.containsKey(oppty.StageName)){
opptylist = opptylistStageMap.get(oppty.StageName);
opptylist.add(oppty);
} else {
opptylist = new List<Opportunity>();
opptylist.add(oppty);
}
opptylistStageMap.put(oppty.StageName, opptylist);
}
return opptylistStageMap;
}
}
  • Here fetchOpptyRecords() method will return the List of opportunities for the given Opportunity Stage.

Continue reading “Turn on – Lightning Part 5 (Iteration over Map)”

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)”