Tag Archives: Lightning

Application Events in Salesforce Lightning Framework

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

The communication between components are handled by events. There are two types of custom events in the Lightning Framework:

  • Component Events
  • Application Events

Application Events are handled by any component have handler defined for event.These events are essentially a traditional publish-subscribe model.

Application Event Example:
In below example by using Application event, I’m passing the values from a child component to a parent component via event.

Sample Application Event:
Create a sample application type event. Use type=”APPLICATION” in the aura:event tag for an application event. The attribute type is the one that will differentiate Application event from Component event.

<!--SampleApplicationEvent.evt-->
<aura:event type="Application" description="Sample Application Event">
    <aura:attribute name="message" type="String" />
</aura:event>

Child Component:

<!--Child.cmp-->
<aura:component>
    <lightning:button label="Click to fire the event" variant="brand" onclick="{!c.childComponentEvent}"/>
</aura:component>

Child Component JS Controller:
Use $A.get(“e.myNamespace:myAppEvent”) in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace.
To set the attribute values of event, call event.setParam() or event.setParams().

({
    childComponentEvent : function(cmp, event,helper) { 
        //Get the event using event name. 
        var appEvent = $A.get("e.c:SampleApplicationEvent"); 
        //Set event attribute value
        appEvent.setParams({"message" : "Welcome "}); 
        appEvent.fire(); 
    }
})

Parent Component:
The application event handled by the Parent Component that fired using aura:handler in the markup.
The action attribute of aura:handler sets the client-side controller action to handle the event.

<!--Parent.cmp-->
<aura:component>
    <aura:attribute name="eventMessage" type="String"/> 
    <aura:handler event="c:SampleApplicationEvent" action="{!c.parentComponentEvent}"/>
    <div class="slds-m-around_xx-large">
        <c:Child /> 
        <p>{!v.eventMessage}</p> 
    </div>
</aura:component>

Parent Component JS Controller:

({
    parentComponentEvent : function(cmp, event) { 
        //Get the event message attribute
        var message = event.getParam("message"); 
        //Set the handler attributes based on event data 
        cmp.set("v.eventMessage", message + 'Biswajeet');         
    }
})

Output:

Component Events in Salesforce Lightning Framework

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

The communication between components are handled by events. There are two types of custom events in the Lightning Framework:

  • Component Events
  • Application Events

Component Events can be handled by same component or a component that instantiates or contains the component. The component events can only be registered in child component and handled by parent component.

Component Event Example:
In below example by using component event, I’m passing the values from a child component to a parent component via event.

Sample Component Event:
Create a sample component type event. Use type=”COMPONENT” in the aura:event tag for an component event. The attribute type is the one that will differentiate Component event from Application event.

<!--SampleComponentEvent.evt-->
<aura:event type="COMPONENT" description="Sample Component Event">
    <aura:attribute name="message" type="String" default="Hello World!!" />
</aura:event>

Child Component:
The event is registered in this component by using aura:registerEvent in its markup.

<!--Child.cmp-->
<aura:component >
    <aura:registerEvent name="sampleCmpEvent" type="c:SampleComponentEvent" />
    <lightning:button label="Click to fire the event" variant="brand" onclick="{!c.childComponentEvent}"/>
</aura:component>

Child Component JS Controller:
To set the attribute values of event, call event.setParam() or event.setParams().

({
    childComponentEvent : function(cmp, event,helper) { 
        //Get the event using registerEvent name. 
        var cmpEvent = cmp.getEvent("sampleCmpEvent"); 
        //Set event attribute value
        cmpEvent.setParams({"message" : "Welcome "}); 
        cmpEvent.fire(); 
    }
})

Parent Component:
The component event handled by the Parent Component that fired using aura:handler in the markup.
The name attribute in aura:handler must match the name attribute in the aura:registerEvent tag in the Child Component that fires the event.
The action attribute of aura:handler sets the client-side controller action to handle the event.

<!--Parent.cmp-->
<aura:component >
    <aura:attribute name="eventMessage" type="String"/> 
    <aura:handler name="sampleCmpEvent" event="c:SampleComponentEvent" action="{!c.parentComponentEvent}"/>
    <div class="slds-m-around_xx-large">
        <c:Child /> 
        <p>{!v.eventMessage}</p> 
    </div>
</aura:component>

Parent Component JS Controller:

({
    parentComponentEvent : function(cmp, event) { 
        //Get the event message attribute
        var message = event.getParam("message"); 
        //Set the handler attributes based on event data 
        cmp.set("v.eventMessage", message + 'Biswajeet');         
    } 
})

Output:

System Events in Lightning Framework

System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.

We can handle these events in the Lightning apps or components, and within the Salesforce mobile app. Here are few examples of system events.

Event Name Description
aura:doneRendering Indicates that the initial rendering of the root application has completed.
aura:doneWaiting Indicates that the app is done waiting for a response to a server request.
aura:locationChange Indicates that the hash part of the URL has
changed.
aura:noAccess Indicates that a requested resource is not accessible due to
security constraints on that resource.
aura:systemError Indicates that an error has occurred.
aura:valueChange Indicates that an attribute value has
changed.
aura:valueDestroy Indicates that a component has been
destroyed.
aura:valueInit Indicates that an app or component has been
initialized.
aura:valueRender Indicates that an app or component has been rendered or
rerendered.
aura:waiting Indicates that the app is waiting for a response to a server request.

Salesforce Lightning Progress Bar

lightning:progressBar component displays the progress of an operation from left to right, like a file download or upload.

Here is an example loads the progress bar on load of the component, and in the JS controller that changes the value of the progress bar.

Lightning Component:

<!--ProgressBar.cmp-->
<aura:component>
     <!--declare handler for render the JS method for Progress bar-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <!--declare attributes for progress bar value-->
    <aura:attribute name="progress" type="Integer" default="0"/>
    <div class="slds-m-around_xx-large">
        <!--Lightning Progress Bar-->
        <lightning:progressBar value="{!v.progress}"/>
    </div>  
</aura:component>

Lightning Component JS Controller:

({
    //Specifying progress === 100 ? clearInterval(interval) : progress + 20 increases
    //the progress value by 20% and stops the animation when the progress reaches 100%
    //The progress bar is updated every 1000 milliseconds.
    doInit:  function (component, event, helper) {
        var interval = setInterval($A.getCallback(function () {
            var progress = component.get('v.progress');
            component.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 20);
        }), 1000);
    }
})

Output:

Visualforce Pages with Lightning Experience Stylesheets

In Winter’18 release, Salesforce has introduced lightningStylesheets attribute. To style the Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, We can set lightningStylesheets="true" in the apex:page tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.

Here is a standard Visualforce page with the lightningStylesheets="true" attribute in Classic View and Lightning View.

Visualforce Page:

<apex:page standardController="Account" lightningStylesheets="true">
    <apex:form> 
        <apex:pageBlock>
            <apex:pageblockButtons location="bottom">
                <apex:commandButton action="{!Save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>
            </apex:pageblockButtons>
            <apex:pageBlockSection columns="2" title="Create Account">
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!Account.AccountNumber}"/>
                <apex:inputField value="{!Account.Phone}"/>
                <apex:inputField value="{!Account.Website}"/>
                <apex:inputField value="{!Account.Type}"/>
                <apex:inputField value="{!Account.Industry}"/>                
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Visualforce Page Classic View:

Visualforce Page Lightning View:

As of Winter’18 release, the following Visualforce components support the lightningStylesheets attribute or don’t require styling.

analytics:reportChart
apex:actionFunction
apex:actionPoller
apex:actionRegion
apex:actionStatus
apex:actionSupport
apex:areaSeries
apex:attribute
apex:axis
apex:barSeries
apex:canvasApp
apex:chart
apex:chartLabel
apex:chartTips
apex:column
apex:commandButton
apex:commandLink
apex:component
apex:componentBody
apex:composition
apex:dataList
apex:dataTable
apex:define
apex:detail
apex:dynamicComponent
apex:enhancedList
apex:facet
apex:flash
apex:form
apex:gaugeSeries
apex:iframe
apex:image
apex:include
apex:includeLightning
apex:includeScript
apex:inlineEditSupport
apex:input
apex:inputCheckbox
apex:inputField
apex:inputFile
apex:inputHidden
apex:inputSecret
apex:inputText
apex:inputTextArea
apex:insert
apex:legend
apex:lineSeries
apex:listViews
apex:map
apex:mapMarker
apex:message
apex:messages
apex:outputField
apex:outputLabel
apex:outputLink
apex:outputPanel
apex:outputText
apex:page
apex:pageBlock
apex:pageBlockButtons
apex:pageBlockSection
apex:pageBlockSectionItem
apex:pageBlockTable
apex:pageMessage
apex:pageMessages
apex:panelBar
apex:panelBarItem
apex:panelGrid
apex:panelGroup
apex:param
apex:pieSeries
apex:radarSeries
apex:relatedList
apex:remoteObjectField
apex:remoteObjectModel
apex:remoteObjects
apex:repeat
apex:scatterSeries
apex:scontrol
apex:sectionHeader
apex:selectCheckboxes
apex:selectList
apex:selectOption
apex:selectOptions
apex:selectRadio
apex:stylesheet
apex:tab
apex:tabPanel
apex:toolbar
apex:toolbarGroup
apex:variable
chatter:feed
chatter:feedWithFollowers
chatter:follow
chatter:newsFeed
flow:interview
site:googleAnalyticsTracking
site:previewAsAdmin
topics:widget