In this post we are going to create a on demand Modal box or Pop Over, using the standard library provided by salesforce.

Modal boxes are used to display messages which requires user’s attention and is therefore displayed in foreground interrupting user’s workflow and seeking attention.

For the Modal we use a single tag provided to us by salesforce i.e. <lightning:overlayLibrary aura:id=”overlayLib”/> , we need to make sure that we use this tag only in lightning experience, lightning Communities and salesforce app only.

This single tag is used wherever we want to display the Message or popover view. There are some more custom components required for this tag to work properly which we are going to create as shown below.

What the content of this Modal box contains, for this we create a lightning component with name modalContent and will have two attributes for now i.e. a icon and the content to display. For this example, I have written static text, as shown below.

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >

<lightning:icon size=”medium” iconName=”action:approval” alternativeText=”Approved” />

Your application has been approved.

</aura:component>

Now in the main component we call this modalComponent and the parent component will display the modal content. Below is the code of the parent component.

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >

<lightning:overlayLibrary aura:id=”overlayLib”/>

<lightning:button name=”modal” label=”Show Modal” onclick=”{!c.handleShowModal}”/>

</aura:component>

You see here we do not directly place the modalContent in the component but we create the modalContent on click of the button in the controller of the Parent component as shown below.

({

handleShowModal: function(component, evt, helper) {

var modalBody;

debugger;

$A.createComponent(“c:modalContent”, {},

function(content, status) {

if (status === “SUCCESS”) {

modalBody = content;

component.find(‘overlayLib’).showCustomModal({

header: “Application Confirmation”,

body: modalBody,

showCloseButton: true,

cssClass: “mymodal”,

closeCallback: function() {

alert(‘You closed the alert!’);

}

})

}

});

}

})

Now we can put this component anywhere in the lightning experience and it will work immediately without writing the SLDS for the Modal box.

Let’s discuss the methods provided by the salesforce in this example, first we used the method $A.createComponents(), this method is used to create the lightning component on the go i.e. dynamically. Then in this method we call our custom component modalContent as ‘c:modalContent’. Next in the callback function we find our tag using the aura:id and method component.find(). After this we call method showCustomModal() which is a callback method and this method take couple of attributes such as header, body, showclosebutton, cssClass and closeCallback. This is how it looks as shown below.

Open Modal Button

Modal Box

Alert after closing Modal Box

As soon as we click on the lightning button, handleshowModal method is called from the client-side controller. And this how you use the lightning:overlayLibrary for Modal box.

Happy Coding.

Also, Have a look at the below resources:

1. Best Salesforce Interview Questions book with Apex and Visualforce concept explained

Also, Have a look at the below learning resources:

1. SOQL (Salesforce Object Query Language)

2. Apex Trigger Best Practices and the Trigger Framework

3. Salesforce Interview Question and Answers Part 2

4. Salesforce Interview Questions on Test Class

5. Salesforce-lightning-interview-questions-2018

     6. Salesforce Interview Questions Batch Clas

The post How to create a Modal box in Lightning Component? appeared first on Salesforce Next Gen.

Passing value to and fro from the Lightning component is one of the task which is done on day to day basis, this post deals with the concern that how to pass values from the client side Javascript controller to the AuraEnabled Apex Controller at server side.

Passing values from client side needs the following requirement as mentioned below :

1. An attribute in the component mark up to hold the value which is sent.
2. An AuraEnabled Server side controller method that accepts the value.
3. A JavaScript controller on client side to send the value from client side to server side.

Below is an example of a simple component which contains a string attribute and its javascript controller sends this attribute to the server side controller, where this controller perform some basic task on it.

Component’s mark-up is below

<aura:component controller=”serverSideCntrllr”>

  <aura:handler name=”init” value=”{!this}” action=”{!c.callingServer}”/>

  <aura:attribute name=”myAttribute” type=”String” default=”Hello World”/>

</aura:component>

JavaScript controller Code is given below

({

                callingServer : function(component, event, helper) {

          var myAttribute = component.get(“v.myAttribute”);

          var action = component.get(“c.setAttribute”);

          action.setParams({ “myString” : myAttribute });

          action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === “SUCCESS”) {

              // Do stuff

            }

            else {

              console.log(state);

            }

          });

          $A.enqueueAction(action);

                }

})

Server side AuraEnabled Code is given below

public class serverSideCntrllr {

    @AuraEnabled

    public static void setAttribute(String myString) {

      System.debug(myString);

    }

}

In the example above, we can see that the type of the attribute sent is basic string type, therefore when this value is passed to the server side controller than it works fine, but this is not the case for each data type. You have to perform few tweaks before you can send the value and sometime you have to perform some actions after the value is received at the server side. We will see these tweaks in below examples.

Passing Integer as a value from client side server.

Integer

Interger is value which is a basic type and easily passed from the client side without making any changes, but at the server side we need to first convert this value into integer and then we can perform the numerical task related to the integer, as shown below in the example.

First define an integer type attribute in the component as shown below.

<aura:component controller=”serverSideCntrllr”>

  <aura:handler name=”init” value=”{!this}” action=”{!c.callingServer}”/>

  <aura:attribute name=”myAttribute” type=”String” default=”Hello World”/>

  <aura:attribute name=”IntegerVar” type=”Integer” default=”1″/>

</aura:component>

Then make the change in the JavaScript Controller as shown below.

({

            callingServer : function(component, event, helper) {

          var IntegerVar = component.get(“v.IntegerVar”);

          var action = component.get(“c.setInteger”);

          action.setParams({ “myInteger” : IntegerVar });

          action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === “SUCCESS”) {

              // Do stuff

            }

            else {

              console.log(state);

            }

          });

          $A.enqueueAction(action);

            }

})

Then the AuraEnabled method as shown below.

@AuraEnabled

    public static void setInteger(String myInteger) {

      System.debug(myInteger);

    }

This code runs fine when we execute the system.debug statement but, when we try to perform a numerical operation, this method will start producing the following error : FATAL_ERROR Internal Salesforce.com Error.

myInteger++;

We are facing this error because, it is due to the improper casting of the integer variable by the framework. Therefore before we could use this variable as an integer, we need to first cast it into the correct type as shown below.

myInteger = Integer.valueOf(myInteger);
myInteger++;

This is a good work around till the framework does not address this issue.

sObject

sObjects are easy to send and receive between server side and client side controller everything is handled perfectly by the framework and we do not need to worry about any casting related issue with sObject.

The only issue is that the relationships are not available in the apex method and with the new lightning data service, we might not even have to query the record anymore.

Date

You will not be able to send Date variable as a value in the client side controller, in this case we have to tweak this data type at client side and then pass it to server side controller and then again cast it to date at the server side controller.

Create the Date attribute at the component as shown below.

<aura:attribute name=”myDate” type=”Date” default=”1981–08–26″/>

Javascript controller as shown below.

({

            callingServer : function(component, event, helper) {

          var myDate = component.get(“v.myDate”);

          var action = component.get(“c.setInteger”);

          action.setParams({ “myInteger” : JSON.stringify(myDate ) });

          action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === “SUCCESS”) {

              // Do stuff

            }

            else {

              console.log(state);

            }

          });

          $A.enqueueAction(action);

            }

})

Server side controller as shown below.

@AuraEnabled
public static void setDate(String myDate) {
Date myNewDate = Date.valueOf(myDate);
}

Apex Classes

The next encounter with error would be when you are going to send a wrapper class as an argument from client side to server side, in this scenario we have to make tweak in the value passed both at the client side and as well as at the server side.

To test this we first create a wrapper class as shown below

public class NewTestWrapperClass {
@AuraEnabled
public String label {get; set;}
}

Then we first create a component attribute as an apex class.

<aura:attribute name=”myClass” type=” NewTestWrapperClass” />

Normal javascript Controller would be

({

            callServer : function(component, event, helper) {

      var myClass = component.get(“v.myClass”);

      var action = component.get(“c.setClass”);

      action.setParams({ “myClass” : myClass });

      action.setCallback(this, function(response) {

        // Do stuff

      });

      $A.enqueueAction(action);

    }

})

And Apex Controller method would be

@AuraEnabled

    public Static void setClass(NewTestWrapperClass myClass) {

      System.debug(myClass);

    }

But this would lead to the fatal error and we would not be able to find the desired output. The best work around to this situation is to convert the argument into the relative JSON string and then Deserialise this string in the Apex Controller at the server. We convert the wrapper class object into the JSON string by using the Javascript method JSON.stringyfy as shown below

({

            callServer : function(component, event, helper) {

      var myClass = component.get(“v.myClass”);

      var action = component.get(“c.setClass”);

      action.setParams({ “myClass” : JSON.stringify(myClass) });

      action.setCallback(this, function(response) {

        // Do stuff

      });

      $A.enqueueAction(action);

    }

})

And the tweak performed at the server side would be something like this.

@AuraEnabled

    public Static void setClass(NewTestWrapperClass myClass) {

      NewTestWrapperClass nwc = (NewTestWrapperClass)JSON.deserialize(myClass, NewTestWrapperClass.class);

    }

So if you faced a problem similar to the one mentioned above then you have workaround till the framework fixes the issues.

Happy Coding.

Also, Have a look at the below resources:

1. Best Salesforce Interview Questions book with Apex and Visualforce concept explained

Also, Have a look at the below learning resources:

1. SOQL (Salesforce Object Query Language)

2. Apex Trigger Best Practices and the Trigger Framework

3. Salesforce Interview Question and Answers Part 2

4. Salesforce Interview Questions on Test Class

5. Salesforce-lightning-interview-questions-2018

     6. Salesforce Interview Questions Batch Class 

The post How to send parameters in AuraEnabled methods in Salesforce Lightning Components? appeared first on Salesforce Next Gen.

In this post we are going to create a lightning accordion component with static text and then we are going to fetch list of contacts and display their detail in the accordion section.

To begin this quest we are first going to create an apex class which we will use to fetch the contact records and information related to each contact record.

Below is the code of the apex controller class fetchContactDetails:

public class fetchContactDetails {   

    @AuraEnabled

    public static list<Contact> fetchContactList(){

        return [select Id, name, Account.name, Email from contact limit 10];             

    }

}

This class contains an Aura Enabled method which returns a list of 10 contacts with their record Id, Name, Account Name and Email. We use this information and display for each contact record as accordion section later in this example.

Now we are going to create a lightning component which will represent each contact records as the body of each accordion section. I am naming this component as eachContactCard, its code is written below.

<aura:component implements=”flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes” access=”global” >

    <aura:dependency resource=”markup://force:navigateToSObject” type=”EVENT”/>

    <aura:attribute name=”objContact” type=”Contact” />

    <aura:attribute name=”showButton” type=”Boolean”/>

  <div class=”demo-only” style=”width: 30rem;”>

    <article class=”slds-tile”>

        <h3 class=”slds-tile__title slds-truncate” title=”Contacts UX”><a href=”javascript:void(0);”>Contacts UX</a></h3>

        <div class=”slds-tile__detail”>

            <aura:if isTrue=”{!v.showButton }”>

                <lightning:button label=”Full Details” onclick=”{!c.onFullDetails}”/>               

            </aura:if>         

            <dl class=”slds-list_horizontal slds-wrap”>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”First Label”>Contact Name:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for first label”>{!v.objContact.Name}</dd>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”Second Label”>Account Name:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for second label”>{!v.objContact.Account.Name}</dd>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”Third Label”>Email:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for Third label”>{!v.objContact.Email}</dd>           

                </dl>

    </div>

    </article>

  </div>

</aura:component>

This component takes contact object as an attribute which provides us with the required information to display, this value would be provided by the parent component of this component and I will discuss about that, when we define it. In this component we created a lightning button as well which onclick will navigate to the detail page of the sObject. OnClick of this button a method from the JS controller of the component is called i.e. ‘onFullDetails’. The definition of this method is written in the controller and its code is below:

({

                 onFullDetails : function(component, event, helper) {

        debugger;

        var currentRecordId = component.get(“v.objContact.Id”) ;

        alert(currentRecordId);

                                var navEvt = $A.get(“e.force:navigateToSObject”);

        navEvt.setParams({

          “recordId”: component.get(“v.objContact.Id”),

          “slideDevName”: “detail”

        });

        navEvt.fire();

                },

    doInIt : function(component, event, helper){

                                var navEvt = $A.get(“e.force:navigateToSObject”);

        if(navEvt){

            component.set(“v.showButton”, true);

        }else{

            component.set(“v.showButton”, false);

        }

    }

})

onFullDetails method fetch’s the event forece:NavogateToSobject and sets it params with the record id of the contact and navigates to the detail of the respective contact. There is one more method defined in the controller which is checking whether this event is available or not, because the methods force:NavigateTOSObject works only in lightning pages and Salesforce1 App other than that we get an error message at run time .

So now we have created an Apex class which is return list of contacts and we have created a component which is going to display the information of each record now we are going to create the parent component which will receive the list of contacts will display them as an accordion and the details of the contact as the accordion section. But first will discuss how to create a accordion with static text.

<aura:component>

   <lightning:accordion activeSectionName=”B”>

     <lightning:accordionSection name=”A” label=”Accordion Title A”>This is the content area for section A</lightning:accordionSection>

     <lightning:accordionSection name=”B” label=”Accordion Title B”>This is the content area for section B</lightning:accordionSection>

     <lightning:accordionSection name=”C” label=”Accordion Title C”>This is the content area for section C</lightning:accordionSection>

   </lightning:accordion>

</aura:component>

This will be displayed as something like this:

Now to are going to make this component dynamic and to do so we first need to add an apex controller which provide it a list of contacts (fetchContactDetails), then we write its JS Controller to set the returned list from the Apex controller on the component as shown below

<aura:component controller=”fetchContactDetails” implements=”flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId” access=”global” >

    <aura:attribute name=”contactList” type=”contact[]” />

                <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />   

                 <lightning:accordion activeSectionName=”A    “>

         <aura:iteration items=”{!v.contactList}” var=”item”>

             <lightning:accordionSection label=”{! ‘Contact Name :’ + item.Name}” name=”{!item.Name}”>

                   <c:eachContactCard objContact=”{!item}” />               

         </lightning:accordionSection> 

    </aura:iteration>    

  </lightning:accordion>

</aura:component>

In this component we create an attribute to hold the list of contact at the runtime and we call doInIt method of JS controller to call the Apex class the set the returned list of contacts on the initialisation of the component. Then we create a lightning Accordion and since we are fetching each accordion section dynamically we use Aura:Iteration and bind it with contact list.

Inside Aura:Iteration, we create a lightning accordion section whose label which displayed whether the section is active or not and its text set dynamic based on the returned list of records. In this section we put our eachContactCard and provide it with the objContact Attribute.

This element will repeat till the end of the list of Contacts, in our case we fetched 10 contact records, therefore we have 10 accordion sections with details of each records.

Below is the code for JS Controller

({

                doInit : function(component, event, helper) {

                                var action = component.get(“c.fetchContactList”);       

        action.setCallback(this, function(data){

            component.set(“v.contactList”,data.getReturnValue());

        });       

        $A.enqueueAction(action);

                }  

})

We now add this component to the test app so that we can preview the created component.

<aura:application extends=”force:slds” >

    <c:accordianTest />

</aura:application>

Below is the screenshot of the desired output.

Also, Have a look at the below resources:

1. Best Salesforce Interview Questions book with Apex and Visualforce concept explained

Also, Have a look at the below learning resources:

1. SOQL (Salesforce Object Query Language)

2. Apex Trigger Best Practices and the Trigger Framework

3. Salesforce Interview Question and Answers Part 2

4. Salesforce Interview Questions on Test Class

5. Salesforce-lightning-interview-questions-2018

     6. Salesforce Interview Questions Batch Class 

The post How to use lightning accordion appeared first on Salesforce Next Gen.

In this post we are going to create a basic lightning application which will have two lightning components. Before you begin going through this post kindly make sure that you have understanding of lightning components and how they work.

A lightning component bundle is comprised of following resources.

1. A UI component which provides a user interface to interact with the system.
2. An Apex controller if you are making a server call from the UI component.
3. A client side controller and helper to interact with the component at client side.

To begin the code we need to log in to the Salesforce org in lightning experience mode and then click on the Gear icon on the right side top corner and click on developer console.

Once the developer console opens, we first need to create a Lightning Application. We name this as testApp. The sole purpose of this lightning application is to test the lightning component we are going to create. We create lightning application because this is the only component which has a preview in the right side bar.

To include the lightning design system CSS for this application we need to extend our application with force:slds, this one line code will include the required css for the whole application.

Below is the code of our raw  application

Now to accomplish the task of displaying a list of contacts we need to first analyse that how we can decompose this request into small components. i.e. a list of record will have detail of a single record in each line. Therefore each line of record can be an individual component and can be repeated and iterated over till the end of records.

To begin with we need to understand that how many fields we are going to display for each record, for this example we are going to display contact name, account name of the contact and email address of the contact. So for this we are going to create a component which will have 3 aura attribute’s namely contactName, accountName and email.

We then use these attributes to display the contact as a tile for each record. We are naming the component as eachContactCard. Below is the code of the component.

<aura:component implements=”flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes” access=”global” >

    <aura:attribute name=”contactName” type=”String” />

    <aura:attribute name=”accountName” type=”String” />

    <aura:attribute name=”email” type=”String” />    

  <div class=”demo-only” style=”width: 30rem;”>

    <article class=”slds-tile”>

        <h3 class=”slds-tile__title slds-truncate” title=”Contacts UX”><a href=”javascript:void(0);”>Contacts UX</a></h3>

        <div class=”slds-tile__detail”>

            <dl class=”slds-list_horizontal slds-wrap”>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”First Label”>Contact Name:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for first label”>{!v.contactName}</dd>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”Second Label”>Account Name:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for second label”>{!v.accountName}</dd>

                <dt class=”slds-item_label slds-text-color_weak slds-truncate” title=”Third Label”>Email:</dt>

                <dd class=”slds-item_detail slds-truncate” title=”Description for Third label”>{!v.email}</dd>           

                </dl>

    </div>

    </article>

  </div>

</aura:component>

Since this component will receive value of its attribute from the parent component, therefore we do not require any client side controller or server side controller for this component. Now we are going to create the parent component to hold and display the list of the contacts.

We are going to name this component as listOfContacts, this component will have attribute to hold a list of contacts and as this component is going to fetch records from server side we are going to mention the apex controller in this component and we also want to display the component therefore we create a client side controller and write an aura handler method which would run to initialise the component as shown below. We also create an aura iteration component which is going to iterate over the list of the contacts and will use the eachContactCard component to display each record. As shown below:

<aura:component controller=”fetchContactDetails” implements=”flexipage:availableForAllPageTypes” access=”global” >

    <aura:attribute name=”contactList” type=”contact[]” />

                <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />   

     <aura:iteration items=”{!v.contactList}” var=”item”>

         <c:eachContactCard contactName=”{!item.Name}” accountName=”{!item.Account.Name}” email=”{!item.Email}”  />

         <br/>

    </aura:iteration>

</aura:component>

Apex Controller of this component is fetchContactDetails and its method fetchContactList returns the list of contacts, this method as it is going to be called in lightning component we have to declare this with annotation @AuraEnabled and any method which has @AuraEnabled attribute has to be declared as public static,  as shown below

public class fetchContactDetails {   

    @AuraEnabled

    public static list<Contact> fetchContactList(){

        return [select Id, name, Account.name, Email from contact limit 10];             

    }

}

The client side controller which displays the list of contact, in this controller we have declared a method doInit. This method calls the method declared in Apex controller and sets the view tiem value of the contactList attribute at the run time as shown below.

({

                doInit : function(component, event, helper) {

                                var action = component.get(“c.fetchContactList”);       

        action.setCallback(this, function(data){

            component.set(“v.contactList”,data.getReturnValue());

        });       

        $A.enqueueAction(action);

                }

})

Once you have created all the components then change the lightning application code as shown below

<aura:application extends=”force:slds” >

    <c:listOfContacts />

</aura:application>

Then click on the preview button to display the list of contacts.

Happy Coding……

Also, Have a look at the below resources:

1. Best Salesforce Interview Questions book with Apex and Visualforce concept explained

Also, Have a look at the below learning resources:

1. SOQL (Salesforce Object Query Language)

2. Apex Trigger Best Practices and the Trigger Framework

3. Salesforce Interview Question and Answers Part 2

4. Salesforce Interview Questions on Test Class

5. Salesforce-lightning-interview-questions-2018

     6. Salesforce Interview Questions Batch Class 

The post How to fetch and display list of records in Lightning Component appeared first on Salesforce Next Gen.