Monday, January 22, 2018

Salesforce 1 Events in Lightning Experience and Salesforce 1 app

Salesforce provide predefined events by which lightning components interact with Salesforce 1.You can utilize these events in Salesforce 1 app or in in lightning container(lightning experience).

I will be covering few important events along with sample code. So lets start:
  • force:showToast
This can be used to display some message on UI. For example, you are loading records from server side on your components, then you can display message saying "Records are loaded successfully" when operation completed. 

Yo can also control the duration for which this message will be displayed on screen. This can also be used to display error, warning or info message. You can control the appearance of toast message by using type attribute.

var toast= $A.get("event.force:showToast");
////checking if SF1 event exist or not. 
//these events exist in lightning experience and Salesforce 1 
if(toast){
toast.setParams({
"title":"Success",
"type":"warning",
"message" : "Retrieved Records Successfully.."
}
)};
toast.fire();

  • force:navigateToSObject
This event can be used to redirect user to record detail page by specifying the recordId.

var sObectEvent = $A.get("e.force:navigateToSObject");
sObectEvent.setParams({
"recordId": component.get("v.recordId")
});
sObectEvent.fire();

  • force:navigateToRelatedList
This will open related list of record( specify the parent record id for related list).

var relListEvent = $A.get("e.force:navigateToRelatedList");
//relatedListId- The API name of the related list to display, 
//such as “Contacts” or “Opportunities”
relListEvent.setParams({
"relatedListId": "Cases",
"parentRecordId": component.get("v.recordId")
});
relListEvent.fire();

  • force:editRecord
This will navigate to record edit page specified by recordId.

var sObectEditRecEvent = $A.get("e.force:force:editRecord");
sObectEditRecEvent.setParams({
"recordId": component.get("v.recordId") 
});
sObectEditRecEvent.fire();

  • force:refreshView
This event will refresh the complete UI. So if you perform any operation and then want reload the component, then you can utilize this event.

$A.get('e.force:refreshView').fire();

For further reference on other events and their usage please refer SF1 Events



Below is sample code utilizing SF1 events. This component displays list of account records and allow user to navigate to record detail page and edit page by using SF1 events.

Hope this will Help!!!


1 comment: