Tuesday, 29 May 2018

Difference between Application Events and Component Events in Lightning #Salesforce

Component Events

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. The component that fires an event is known as the source component.



The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams().

Fire a component Event

In terms of firing an event you need to register that component event in your component and then you can fire the same. it looks something like below



A component can handle its own event by using the <aura:handler> tag in its markup. The name attributes in <aura:registerEvent> and <aura:handler> must match, since each event is defined by its name.



Application Events

Application event in simple words can be used in multiple components and component that has the handler for the event will be notified.



To create a custom application event, you need to use the <aura:event> tag in the event resource. You need to define type="Application" tag. To use you need to register application event same way as component event



To fire the application event you need to use event.setParam();



Events are of the most widely used in lightning component. so when you should use which one is also important.

thanks

Tuesday, 22 May 2018

Converting Curl Request into Apex HTTP Request #Salesforce

Recently in a project I was working with a requirement, where we need to integrated Salesforce with that system, when I started going through the API documentation of the another system, they have provided everything with the curl request and response was in JSON.




So many of you guys might have already explored curl and converting the request as per another system requirement, but for me this was the first time. So if any of you have better approach then the one I am going to explain, please let me know.

So What is Curl ?

"cURL is a command line tool for getting or sending files using URL syntax.
Since cURL uses libcurl, it supports a range of common Internet protocols, currently including HTTP, HTTPS, FTP, FTPS, SCP, SFTP, TFTP, LDAP, DAP, DICT, TELNET, FILE, IMAP, POP3, SMTP and RTSP.
cURL supports HTTPS and performs SSL certificate verification by default when a secure protocol is specified such as HTTPS. When cURL connects to a remote server via HTTPS".

Wiki Link

So here is of the curl request that I was dealing with, and I have taken a normal one which can be easily converted to apex.


So in above request the main thing to be taken care is to identify the parameter, header, body, method and endpoint. To identify these you need to look for -X -u -d -H

-x stands for request method
-u stands for authorization header
-d stands for body of the request
-H also stands for header

So by knowing the parameter defined in the curl request you can easily and quickly create a request in apex. So the request in apex format looks like below




So here is an small description of curl request formatting.
Thank you!

Thursday, 8 February 2018

Caching Data with Storable Actions #Lightning Component Salesforce

Caching data at the client side can significantly reduce the number of server round-trips and improve the performance of your Lightning components. Server actions support optional client-side caching, and the Lightning Data Service is built on top of a sophisticated client caching mechanism.

In Lightning terminology, a server action is an Apex method that you invoke remotely from your Lightning Component. A storable action is a server action whose response is stored in the client cache so that subsequent requests for the same server method with the same set of arguments can be accessed from that cache.



Storable actions are the only currently supported type of storage. Storable actions cache server action response values. The storage name must be actions. Caching is especially beneficial for high-performance, mostly connected applications operating over high latency connections, such as 3G networks When you initialize storage, you can configure the expiration time, which is the duration in seconds that an entry is retained in storage..

Using storable actions, the cache behavior is controlled by two parameters set internally in the framework :
  • Expiration age: This is the age of the cached response. Whenever the response is older then the existing one and same vice versa. Expiration age is currently set to 900 seconds in Salesforce lightning.
  • Refresh age: Refresh age is the age of the response, when it gets refreshed, if the response is newer then the existing one, it will override the response, but lightning also calls the server method and get the response, if it different then the existing then it will override it as well. Refresh age is 30 second in lightning experience.

what to cache ?

The caching of the data should be decided on what is the response of your action, there are two type of action, one which returns everytime same thing, and another one is which is doesn't return the same response or dynamic.

The method which returns the same response each time called should be cached and other not,The setStorable function takes an optional argument, which is a configuration map of key-value pairs representing the storage options and values to set.

Cache Miss

If the action is not a cache hit as it doesn’t match a storage entry:
  • The action is sent to the server-side controller.
  • If the response is SUCCESS, the response is added to storage.
  • The callback in the client-side controller is executed.

Cache Hit

If the action is a cache hit as it matches a storage entry:
  • The callback in the client-side controller is executed with the cached action response.
  • If the response has been cached for longer than the refresh time, the storage entry is refreshed. When an application enables storable actions, a refresh time is configured. The refresh time is the duration in seconds before an entry is refreshed in storage. The refresh time is automatically configured in Lightning Experience and the Salesforce mobile app.
  • The action is sent to the server-side controller.
  • If the response is SUCCESS, the response is added to storage.
  • If the refreshed response is different from the cached response, the callback in the client-side controller is executed for a second time..

How to enable Storage Actions ?

To configure client-side storage for your standalone app, use <auraStorage:init> in the auraPreInitBlock attribute of your application’s template. For example:. 


<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="auraPreInitBlock">
        <auraStorage:init
          name="actions"
          persistent="false"
          secure="true"
          maxSize="1024"
          defaultExpiration="900"
          defaultAutoRefreshInterval="30" />
    </aura:set>
</aura:component>


Thanks

Wednesday, 22 November 2017

Salesforce DX: Test Data migration using Salesforce DX

Here I am going to show case a small POC of Data migration using Salesforce DX, its really easy to use, and the process where you want to maintain the test data in different-different Sandbox, then Salesforce DX is for you.


So lets get started,
Before going further, if you have not installed Salesforce DX in your system and please go ahead and install it you system.

Here is the Trailhead link where you can find link to install and get to know more about SalesforcDX.



After installing open the git bash and check whether SalesforceDX got successfully installed or not.

So let me explain you a bit about this process using dx, here we will use two sandbox, one from where we will export the data and the other is the destination sandbox where we will import the data, now this is the first time process, where we are exporting the data from one sandbox, but if its recurring process then we will have the data in JSON format in our local machine, so we just need to export it to other sandboxes.

Please enter

$ sfdx force

If it show the cloud image made up of DX then its installed, now we will create a project first.

$ sfdx force:project:create -n web //create project, its not necessary you can skip this one also

//Add a new sandbox , on hitting this command it will ask you to login to you sandbox and authorize
$ sfdx force:auth:web:login --setalias my-sandbox --instanceurl https://salesforce.com

//after this do the same thing again and add another sandbox.
//Now if you want to check how many orgs you have added you can by below command
$ sfdx force:org:list

//you have to define an org as default to so that dx will fetch the data from that org. use below for the same
$ sfdx force:config:set defaultusername=abhi@sfdx.com.cloudy --global

//now export the data, here we are exporting only account data, but you can do allot more then this
$ sfdx force:data:soql:query --query "Select Id, Name From Account"

If you'll check that file that DX has created will have the content something like below


{
    "records": [
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef1"
            },
            "Name": "Sinclair Community College"
        },
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef2"
            },
            "Name": "The Institute of Electrical and Electronics Engineers, Inc."
        },
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef61"
            },
            "Name": "TestLastName"
        }
    ]
}


In the command prompt you'll be able to see the data count as well.

Now to import the data to another sandbox, you just have to hit another command, as its so easy so here are the things need to consider before hitting the command

1. Define the correct source path of the JSON file.
2. Provide the correct sanbox username.
3. Sandbox should be from the list of the sandbox added in the DX.

//to import data to sandbox
$ sfdx force:data:tree:import --targetusername abhi-tripathi@sfdx.com.cloudy--plan sfdx-out/export-demo-Account-plan.json

Your command prompt


















Woohoo!! you have just performed the data migration using SalesforceDX

Here are some links that will be helpfull

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_dev_model

https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_test_data_example.htm

https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_cli_usernames_orgs.htm

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_app_dev

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_travis_ci

https://www.youtube.com/watch?time_continue=1596&v=exZ3TICOzd8

Thanks you!!

Friday, 22 September 2017

Winter'18 - Basic Visualforce is now Ready for Lightning View #Salesforce

In this winter 18 release, Salesforce has upgraded what was required, now even if you are new to SLDS, no need to worry about as Salesforce have introduced "lightningStylesheets" tag just to make your life easy.
Designing in lightning sometime you need to search the class name and then add it your page to check whether its the same that you want.

So here is a simple demo of the old style visualforce page having all the things that we might use, and using the same visuaforce page in Lightning by changing nothing. Everything will taken care by salesforce just by using lightningStylesheets.
I have added almost all type of fields as well just to show how it looks without adding any further styling.

Take a look how it works





Here is the Visualforce page



Some good guy said


Thank you!

Monday, 11 September 2017

Using lightning:tree to display Account Hierarchy #Salesforce Lightning Component #Winter'18

 Winter'18 Salesforce have added a new lightning component called lightning:tree, using this we can display the hierarchy of Salesforce.

In this component is going to be great help to all the devs, when they want achieve the accordion looking hierarchy displaying component. This component support only version 41.0 and above



Here is the working demo



So in this post we have a small component which displays the account hierarchy upto 3 levels, I am not further on achieving the hierarchy of Account using Apex, so I did what I can using just a single SOQL.

Here is the component code

 <aura:component controller="LightningTreeApexController" implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId"> >  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />  
   <aura:attribute name="items" type="Object"/>  
   <aura:attribute name="recordId" type="String"/>  
   <lightning:tree items="{! v.items }" header="Account Hierarchy" onselect="{!c.handleSelect}"/>  
 </aura:component>  

Here Lightning component Controller code

 ({  
   doInit: function (cmp, event, helper) {  
     helper.apexMethod(cmp);  
   },  
   handleSelect: function (cmp, event, helper) {  
     //return name of selected tree item  
     var myName = event.getParam('name');  
     alert("You selected: " + myName);  
   }  
 })  


Here is the helper code

 ({  
   apexMethod : function(cmp) {  
     var action = cmp.get("c.getAccountHierarchy");  
     action.setParams({ accountId : cmp.get("v.recordId") });  
     action.setCallback(this, function(response) {  
       var state = response.getState();  
       if (state === "SUCCESS") {  
         cmp.set( "v.items", response.getReturnValue());  
       }  
     });  
     $A.enqueueAction(action);  
   }  
 })  


Here is Apex Controller


 public class LightningTreeApexController {  
     
   @AuraEnabled  
   public static List<items> getAccountHierarchy(Id accountId) {  
       
     //Wrapper instance  
     List<items> finalWrp = new List<items>();  
       
     //Going upto 2 level only as per SOQL limit  
     for(Account acc : [ Select Id, Name, Type, ParentId, Parent.Name, Parent.Type, Parent.ParentId, Parent.Parent.Name, Parent.Parent.Type From Account Where Id =: accountId]) {  
         
       //populating wrapper  
       List<items> trP1 = new List<items>{new items(acc.Type, acc.Name, false, null)};  
       List<items> trP2 = new List<items>{new items(acc.Parent.Type, acc.Parent.Name, false, trP1)};  
       finalWrp.add(new items(acc.Parent.Parent.Type, acc.Parent.Parent.Name, false, trP2));  
     }             
        
     System.debug('finalWrp:::' + finalWrp);  
     // return wrapper  
     return finalWrp;    
   }  
 }  


Here is wrapper class used in Apex controller

 public class items {  
     
   @AuraEnabled  
   public string label { get; set; }  
     
   @AuraEnabled  
   public string name { get; set; }  
     
   @AuraEnabled  
   public Boolean expanded { get; set; }  
     
   @AuraEnabled  
   public List<items> items { get; set; }  
     
   public items( String name, String label, Boolean expanded, List<items> items) {  
     this.label = label;  
     this.name = name;  
     this.expanded = expanded;  
     this.items = items;   
   }  
 }  


Some important links to learn more about Winter'18 Release


Salesforce Documentation


Lightning Design System : Lightning Tree


Salesforce Release Notes Winter'18



Thanks you

Sunday, 20 August 2017

Lightning Data Service - Salesforce Lightning Remote Objects

Lightning Data Service is in Beta, we can use lightning data service to create, upload, delete and edit salesforce object, without using apex controller, that is it is kind of Remote object that we have for salesforce visualforce page.

As it is beta, so many upgrades will be coming in future, Data access with Lightning Data Service is simpler than the equivalent using a server-side Apex controller. Read-only access can be entirely declarative in your component’s markup. It’s built on highly efficient local storage that’s shared across all components that use it. Records loaded in Lightning Data Service are cached and shared across components. Components accessing the same record see significant performance improvements, because a record is loaded only once, no matter how many components are using it.

here is a small and simple exam of lighting data component for creation of Contact record.





Here is the component code
 <aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">  
   <aura:attribute name="account" type="Object"/>  
   <aura:attribute name="simpleAccount" type="Object"/>  
   <aura:attribute name="accountError" type="String"/>  
   <force:recordData aura:id="accountRecordLoader"  
     recordId="{!v.recordId}" fields="Name,BillingCity,BillingState" targetRecord="{!v.account}"  
     targetFields="{!v.simpleAccount}" targetError="{!v.accountError}"/>  
   <aura:attribute name="newContact" type="Object" access="private"/>  
   <aura:attribute name="simpleNewContact" type="Object" access="private"/>  
   <aura:attribute name="newContactError" type="String" access="private"/>  
   <force:recordData aura:id="contactRecordCreator"  
     layoutType="FULL" targetRecord="{!v.newContact}"  
     targetFields="{!v.simpleNewContact}" targetError="{!v.newContactError}" />  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <!-- Display a header with details about the account -->  
   <div class="slds-page-header" role="banner">  
     <p class="slds-text-heading--label">{!v.simpleAccount.Name}</p>  
     <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-left">Create New Contact</h1>  
   </div>  
   <!-- Display Lightning Data Service errors, if any -->  
   <aura:if isTrue="{!not(empty(v.accountError))}">  
     <div class="recordError">  
       <ui:message title="Error" severity="error" closable="true">  
         {!v.accountError}  
       </ui:message>  
     </div>  
   </aura:if>  
   <aura:if isTrue="{!not(empty(v.newContactError))}">  
     <div class="recordError">  
       <ui:message title="Error" severity="error" closable="true">  
         {!v.newContactError}  
       </ui:message>  
     </div>  
   </aura:if>  
   <!-- Display the new contact form -->  
   <lightning:input aura:id="contactField" name="firstName" label="First Name" value="{!v.simpleNewContact.FirstName}" required="true"/>  
   <lightning:input aura:id="contactField" name="lastname" label="Last Name" value="{!v.simpleNewContact.LastName}" required="true"/>  
   <lightning:input aura:id="contactField" name="title" label="Title" value="{!v.simpleNewContact.Title}" />  
   <lightning:input aura:id="contactField" type="phone" name="phone" label="Phone Number"   
            pattern="^(1?(-?\d{3})-?)?(\d{3})(-?\d{4})$"  
            messageWhenPatternMismatch="The phone number must contain 7, 10, or 11 digits. Hyphens are optional."  
           value="{!v.simpleNewContact.Phone}" required="true"/>  
   <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="{!v.simpleNewContact.Email}" />  
   <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />  
   <lightning:button label="Save Contact" onclick="{!c.handleSaveContact}" variant="brand" class="slds-m-top--medium"/>  
 </aura:component>  

Controller code

 ({  
   doInit: function(component, event, helper) {  
     component.find("contactRecordCreator").getNewRecord(  
       "Contact", null, false,   
       $A.getCallback(function() {  
         var rec = component.get("v.newContact");  
         var error = component.get("v.newContactError");  
       })  
     );  
   },  
   handleSaveContact: function(component, event, helper) {  
     if(helper.validateContactForm(component)) {  
       component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));  
       component.find("contactRecordCreator").saveRecord(function(saveResult) {  
         if (saveResult.state === "SUCCESS") {  
           var resultsToast = $A.get("e.force:showToast");  
           resultsToast.setParams({  
             "title": "Contact Saved",  
             "message": "The new contact was created."  
           });  
           $A.get("e.force:closeQuickAction").fire();  
           resultsToast.fire();  
           $A.get("e.force:refreshView").fire();  
         }  
       });  
     }  
   },  
   handleCancel: function(component, event, helper) {  
     $A.get("e.force:closeQuickAction").fire();  
   },  
 })  

Helper code

 ({  
   validateContactForm: function(component) {  
     var validContact = true;  
           var allValid = component.find('contactField').reduce(function (validFields, inputCmp) {  
       inputCmp.showHelpMessageIfInvalid();  
       return validFields && inputCmp.get('v.validity').valid;  
     }, true);  
     if (allValid) {  
       var account = component.get("v.account");  
          return(validContact);   
     }   
      }  
 })  

This component you can use in Account Object detail page layout, and then try creating a contact record.
There are few things to keep in mind before thinking to use to Data service,


  • Can't be use for multiple records or mass DML's
  • Only available in Lightning & Salesforce1
  • Not all objects are supported by Lightning Data Service, listed in the link
Thanks