Aura:if vs slds-show/hide : Which one to use for rendering html components in Lightning components

As we know that sometimes we have show content in Lightning components based on different conditions. There are 2 different options to achieve this:

• By using <Aura:if > tag.

For example :

<aura:if isTrue="{!v.displayedSection == 'section1'}">

<!-- code to display information on UI -->

</aura:if>

• By using slds-show or slds-hide class on div.

For example :

<div class="{!if(v.displayedSection == 'section1','slds-show','slds-hide')}">

<!-- code to display information on UI -->

</div>

Considerations while using <Aura:if> tag

• Only the code present inside Aura:if for which condition returns true will be rendered as HTML.
• If you try to refer HTML component in controller.js present inside Aura:if which is not visible on UI because condition specified doesn't match, then you will get undefined value.

I have created a Lightning component to show Aura:if behavior along with snapshot from inspect element and console log statements to justify above 2 statements.

Image snapshot showing behavior using inspect element:

Considerations while using slds-show or slds-hide class

• All code present inside the div will be rendered as HTML irrespective of div class. Only the div for which class is slds-hide will not be visible on UI.
• All HTML components can be referred in controller.js irrespective of class specified on div.

I have created a lightning component to display slds-show or slds-hide behavior along with snapshot from inspect element to justify above statements.

Image snapshot showing component behaviour using inspect element:

Hope this will help!!!

Looking forward for everyone's comments and suggestion.

More Blogs>>: 

INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

Salesforce Communities

Initially Salesforce introduces many types of portals like partner portal, customer portal etc. Now these features are not available for new customers and Salesforce suggest to migrate to communities from existing portals because it is easy to implement and having more features.

Also all data access can be configured by Admin and even you can create different communities for your organization as per requirement as we normally do with WhatsApp groups or Facebook groups.

I have created presentation on Salesforce Communities and presented it in one of the Salesforce Meet up held in Pune, India.

Salesforce Communities from Sunil Kumar

Hope this will help in basic understanding of Salesforce Communities!!

More Blogs>>: 

INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

Lightning Component to Display SetUp Audit Trail Data

As we know, SetUp Audit Trail allow us to track all the metadata changes happened to our org. Previously we have to download the SetUp Audit Trail history data from Salesforce UI in excel file.

SetUp audit trail data was not exposed in apex or through API in past but now salesforce has provided an option to query that data in apex or through API by introduction new object called "SetUpAuditTrail". This help us to find historical metadata changes specific to any action or any metadata changes done by any particular user.

I have created a lightning component which will display the SetUpAuditTrail data based on fileters provided by user. As of now, there is limited capability of sorting and filtering SetUpAuditTrail object records, I have used jquery datatable which will help us to sort records on all columns and also to filter records easily.

I have added the component to VF page by adding it to lightning app and exposed VF page through custom tab.

SetUpAuditTrail tracking VF page snapshot:

You can download complete code from below URL:
Lightning Component For SetUpAuditTrail Tracking

This is basic code for basic functionality. You can extend it as per your requirement.

Hope this will help!!!

Looking forward for everyone comments and suggestion!!

More Blogs>>: 

INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

Creating Apex Rest Services and Testing it with POSTMAN

In this post, I am going to explain how to validate Apex Rest Service created in SFDC using POSTMAN (google chrome plugin).

First we will create a very basic Apex Rest Service.


After creating this class, now we can access this API by using below endpoint URL:

https://xxxx.salesforce.com/services/apexrest/RestAPIDemo
where xxxx is your domain URL or say instance URL like na15, cs30 etc.

Here we have created Rest API which accepts GET & POST request.Whenever we will perform GET request, API will return Account records based on search string passed as parameter in endpoint URL.

Now I will explain how to test this API Service by using POSTMAN.

In order to invoke Apex REST API, we need to have access token. So first we will use Oauth 2.0 to get access token from SFDC in order to perform API calls.

Steps to get access token from SFDC:

• Create a connected App in SFDC.

• Perform POST request from POSTMAN to below mentioned endPoint URL:

https://login.salesforce.com/services/oauth2/token?grant_type=password&client_id=CLIENTID&client_secret=CLIENTSECRET&

username=SFDCUSERNAME&password=SFDCPASSWORD_SECURITY_TOKEN

Where 

       CLIENTID = consumer key from created connected app

       CLIENTSECRET= consumer secret from created connected app

       SFDCUSERNAME = SFDC username

       SFDCPASSWORD_SECURITY_TOKEN = password + security_token

While performing POST request, specify header in which key will be "Content-Type" and value will be "application/x-www-form-urlencoded"

You will recieve JSON response in which access_token will be specified. Copy and save it.

Note:

If you have enabled my domain then you can use domain URL as base URL in endpoint URL. If you are not using domain, then in JSON response you will get instance_URL which you can use base URL whenever you call APEX REST API's.

How to perform GET request from POSTMAN to fetch data from SFDC

• First create Endpoint URL(GET request).

          https:// BASE_URL/services/apexrest/RestAPIDemo?searchString=test

          where 

          BASE_URL is instance URL returned in JSON while requesting Access token.

          RestAPIDemo is REST Resource we specify while creating class.

          searchString : parameter passed to REST API which will return matched accounts

• Specify Below headers

          [{"key":"Content-Type","value":"application/json"}]

          [{"key":"Authorization","value":"Authorization: Bearer Access_token"}]

• Perform Get Request from POSTMAN

How to perform POST request from POSTMAN to create new record

• Create a JSON through which you send account information.

       {

  "accName":"SKtest By POSTMAN",

   "aType":"New Customer",

   "aIndustry":"IT"

        }   

• Specify endpoint URL

       https://xxxx.salesforce.com/services/apexrest/RestAPIDemo

       where xxxx is domain of your org

• Specify headers

          [{"key":"Content-Type","value":"application/json"}]

          [{"key":"Authorization","value":"Authorization: Bearer Access_token"}]

• Send POST request through POSTMAN.

Note:

If your POST method contains parameter, then you have to pass JSON in different ways. For example POST method is:

@HttpPost   
    global static String createNewAccount(accountWrapper accDetails) {
        string returnString='';
        try{
            Account acc=new Account();
            acc.Name= accDetails.accName;
            acc.Type = accDetails.aType;
            acc.Industry =accDetails.aIndustry;
            insert acc;
            returnString = 'Account created successfully with record Id:'+acc.id; 
        }catch(exception ex){
            returnString = 'Request got failed: Error details-'+ex.getmessage();
        }
         return returnString;
    }

In this scenario, JSON which needs to sent should be in below format:

{
"accDetails":{
"accName":"SKtest By POSTMAN2",
"aType":"New Customer",
"aIndustry":"IT"
}
}

Hope this will help!!!!

More Blogs>>: 

USING DATABASE.UPSERT WITH EXTERNAL ID   
DYNAMIC APEX IN SALESFORCE   
SOQL INJECTION IN SOQL   
CUSTOM METADATA AND CUSTOM SETTINGS IMPLEMENTATION TRICKS   
SMART TABLE USING ANGULARJS IN VISUALFORCE PAGE   
REST API TUTORIAL FOR SALESFORCE   
VISUALFORCE COMPONENT FOR RECORD STATUS BAR   
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE   

Language Translation in VisualForce Page

Salesforce provide functionality through which you can create single VF page and that can be translated in different languages based on language or locale preference of current logged in user.

You need to upload the translation of all custom fields which you are going to use in VF page and can utilize custom labels to display warning, error information on VF page.

In order to render the VF page in particular language, use Language attribute on <apex:page> tag. You can also bind this values with controller variable so that you can render VF page in different language.

<apex:page controller="SK_LocalizationTestController" language="{!selectedLang}">

I have created a very simple VF page to illustrate this functionality by displaying account information. I have dropdown on VF page through which user will select language and VF page will re render to display page in selected language.

Note:

• If you are displaying page message using <apex:pageMessages>, then use custom label on apex class to display message. Upload all translation for custom label in salesforce.
• For custom fields also you need to upload language translation. Please refer Translation Workbench under Set Up.
• The language attribute does accept ISO country codes plus an optional locale like en,en_US,de,de_DE etc.
• For displaying header or pageblock section title, use custom labels.

More Blogs>>: 

USING DATABASE.UPSERT WITH EXTERNAL ID   
DYNAMIC APEX IN SALESFORCE   
SOQL INJECTION IN SOQL   
CUSTOM METADATA AND CUSTOM SETTINGS IMPLEMENTATION TRICKS   
SMART TABLE USING ANGULARJS IN VISUALFORCE PAGE   
REST API TUTORIAL FOR SALESFORCE   
VISUALFORCE COMPONENT FOR RECORD STATUS BAR   
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE   

Changes to Lightning Data Services (LDS) in Summer'17 Release

Lightning Data Service is used to load, create, edit, or delete a record in Lightning component, without using server side Apex code. Lightning Data Service takes care of sharing rules and field-level security.

Below are changes to LDS in Summer'17 Release

• force:recordPreview has been deprecated. Now use force:recordData instead of force:recordPreview. 
• targetFields attribute is added to force:recordData, which is populated with a simplified view of the record’s fields. targetFields is automatically updated a record changes.
• The targetRecord attribute of force:recordData,  has been updated to return records in a new format. 

Old JSON format was :
{

    "AnnualRevenue": null,

    "BillingCity": "Toronto",

    "CreatedById": "005R0000000IXV3IAO",

"CreatedBy.Name": "Admin User",

"CreatedBy": {

        "Id": "005R0000000IXV3IAO",

        "Name": "Admin User",

        "sobjectType": "User"

    }

}

New JSON Format is:
{
  "apiName": "Account",
  "fields": {
  "AnnualRevenue": {
  "displayValue": null,
  "value": null
  },
  "BillingCity": {
  "displayValue": null,
  "value": "Toronto"
  },
  "CreatedBy": {
  "displayValue": "Admin User",
  "value": {
  "apiName": "User",
  "fields": {
  "Id": {
  "displayValue": null,
  "value": "005R0000000IXV3IAO"
  },
  "Name": {
  "displayValue": null,
  "value": "Admin User"
  }
  },
  "id": "005R0000000IXV3IAO",
  "recordTypeInfo": null
  }
  },
  "CreatedById": {
  "displayValue": null,
  "value": "005R0000000IXV3IAO"
  }
  }
 }

The following example shows the targetFields attribute within the force:recordData component.

<force:recordData aura:id="skss"  recordId="{!v.recordId}"  layoutType="{!v.layout}"
  fields="{!v.fieldsToQuery}"  mode="VIEW"   targetRecord="{!v.record}"
  targetFields="{!v.simpleRecord}"   targetError="{!v.error}" />

For complete understanding of LDS along with code, refer Lightning Data Services : Way to perform operation on records without using server-side Apex class  blog

More Blogs>>: 

LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

Inheritance in Lightning Components

Lightning framework also support component inheritance in same way as it is supported in Apex.
You can mark any component as extensible means component can be inherited by any component. Inheritance allows us use attributes and javaScript functions of extensible component in all inherited components.

Consider a scenario in which you have many components which call server side apex controller method from their helper function. So instead of writing callToServer method in all components helper function, you can create a component and mark it as extensible component and write callToServer function in helper function. Now in all your components, extends this component and on any action just call callToServer function.

I have created component "SK_CallToServerUtility" which contain javascript function in helper which performs call to server side apex methods.

In order to mark any component as extensible, just specify extensible="true" in component attribute.

<aura:component extensible="true">
    <!-- below attribute value will be set by components which will inherit it-->
    <aura:attribute name="msg" type="String" default=""/>
{!v.body}
</aura:component>

If you want to inherit any extensible component, then specify component name in extends attribute in component like extends="c:SK_CallToServerUtility".

Please refer below code to have better understanding about inheritance in lightning components.

Code Explaination:

I have created SK_AccountList component which will initially display latest 100 account records by calling callToServer function in doInit function.

When user enter some search string and click search account, then table will display account records with name matching with search string again by calling callToServer function present in SK_CallToServerUtility component  which is inherited by SK_AccountList component.

Also in SK_AccountList component, we are setting the attribute value("msg") of SK_CallToServer component.

Hope this will help in basic understanding of how to use inheritance in Lightning Components!!

Looking forward for everyone's comments and feeback.

More Blogs>>: 

PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE