A blog dedicated to Salesforce Ohana

Salesforce Lightning Component - Application Event

In continuation to my previous post about component event in Salesforce Lightning, today I would like to discuss about the another type of event i.e. Application event.

Application event in Salesforce Lightning follows publish-subscribe model. An application is fired from an instance of a component. All components that provide a handler for the event will be notified once the event is fired. Below diagram will give you a more clear picture -

As the above diagram tells - Component 1 is firing the event and that information is getting passed to Salesforce framework. Now all the events - Component 2, 3, 4 & 5 are already registered as handler of this event. So it is now Salesforce framework who will notify all these components that the event has occurred. Here you can see that all the components are very much loosely coupled because when Component 1 is firing the event, it does not know or rather it does not care which component is going to handle that event. Similarly when Component 2 or 3 or 4 or 5 will get notified that the event has occurred, they really don't know which component has fired the event. This approach makes that component very much loosely coupled.

Now I will start with few basic and later I will give you an example to understand Application event.

CREATE CUSTOM APPLICATION EVENT:
To create Application event, you need to write the below code -
1
2
3
<aura:event type="APPLICATION">
    <aura:attribute name="name" type="String"/>
</aura:event>
The above code will create an Application event with name as an attribute to the event.

REGISTER APPLICATION EVENT:
A component needs to register for the event if the component wants to fire that event. Below code will be used to register for application event -
1
<aura:registerEvent name="applicationEvent" type="c:applicationEvent"/>
For application event name attribute is required, but not used for application event. The name attribute is only relevant for component event.

FIRE APPLICATION EVENT:
To fire an event, we need to first get the instance of the event in JavaScript and then use the fire() to fire the event. Here is the code -
1
2
3
var appEvent = $A.get("e.c:applicationEvent");
appEvent.setParams({ "name" : "Sudipta Deb" });
appEvent.fire();

HANDLING APPLICATION EVENT:
Use to handle the event. For example:
1
<aura:handler event="c:applicationEvent" action="{!c.handleApplicationEvent}"/>
When the event is fired, the client side controller method handleApplicationEvent will be called.

With this understanding now I will give you an example of application event communication. 
Here I will prepare two different components -
  • Component 1 - ButtonPressed - This component will contain the button and will fire the event on each button pressed.
  • Component 2 - ButtonCountPressed - This component will show how many times the button is pressed. This component will handle the event which will get fired from Component 1 on each button click.
APPLICATION EVENT - ButtonCountEvent:
To start with we need to first create the application event. Here is the code.
1
2
<aura:event type="APPLICATION" description="Fired when a Button is pressed">
</aura:event>

COMPONENT 1 - ButtonPressed:
The component code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:registerEvent name="ButtonCountEvent" type="sudipta:ButtonCountEvent"/>
    
    <div class="slds-page-header" role="banner">
     <div class="slds-media__body">
        <p class="slds-page-header__title slds-truncate slds-align-middle" title="Click and Count">CLICK AND COUNT</p>
        <p class="slds-text-body--small slds-page-header__info">SUDIPTA DEB</p>
     </div>
    </div>
    <div class="container">
        <form class="slds-form--stacked">
         <div class="slds-form--element">
             <ui:button label="Click Here" labelClass="label" class="slds-button--neutral" press="{!c.countButtonClick}"/>
            </div>
        </form>
    </div>
</aura:component>
The controller code -
1
2
3
4
5
6
({
 countButtonClick : function(component, event, helper) {
        var clickEvent = $A.get("e.sudipta:ButtonCountEvent");
        clickEvent.fire();
 }
})
The style code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.THIS .slds-button--neutral{
    padding: 10px;
    margin: 10px;
}
.THIS .slds-page-header__title{
    font-size: x-large;
    color: #097FE6;
}
.THIS .slds-page-header__info{
    padding-top: 10px;
    color: #5F9FD6;
}

COMPONENT 2 - ButtonCountPressed:
The component code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:handler event="sudipta:ButtonCountEvent" action="{!c.incrementCount}"/>
    
    <!-- Aura Attributes -->
    <aura:attribute name="count" type="Integer" default="0"/>
    
    <div class="container stds-p-top-medium">
     <div class="slds-notify slds-notify--toast slds-theme--alert-texture">
         <p class="slds-title__title slds-truncate">No of click:</p>
            <ui:outputNumber class="slds-truncate" value="{!v.count}"/>
        </div>
    </div>
</aura:component>
The controller code -
1
2
3
4
5
6
7
8
({
 incrementCount : function(component, event, helper) {
        var count = component.get("v.count");
        count++;
  component.set("v.count", count);

 }
})

FINALLY THE APPLICATION - CountTheTotalClickApp
1
2
3
4
<aura:application >
    <sudipta:ButtonPressed />
    <sudipta:ButtonCountPressed />
</aura:application>

Note - "sudipta" is the namespace used by me. So you need to replace "sudipta" with your org namespace.

Here is the screenshot of the lightning app -

I hope the concept of application event and how to use it is clear now. Please provide your feedback. Thanks.
Share:

Salesforce Lightning Component - Component Event Bubbling Effect

Salesforce Lightning – The Future of Salesforce. Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce1 Platform. It includes Lightning Component Framework which is used to create reusable components, customize the Salesforce1 App, and also build Standalone apps.

The framework uses the event-driven approach communicate with different components. Event is a notification which will let the world/interested entity know that something happened and now they can take actions accordingly.

In Salesforce Lightning, the interested entity is the components that you develop. The components will register for the events they are interested and will fire if required. And at the same time there will be components who will handle the events when they are fired.

We have two different types of lightning events, as displayed below –
  • Application Event
  • Component Event
In this post, I will try to explain how Component Events are handled in Salesforce Lightning Framework.

Salesforce documentation says, “A component event is always 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 received the bubble event.

I believe this is the best explanation of component event. Later in this post, I will give you an example to explain the bubble effect which I believe is little confusing at this point of time. Let’s wait for some time and I am quite sure once you go through the example below in the post, you will be clear with the component events.

With this agreement, let’s start with few basics:

HOW TO CREATE CUSTOM COMPONENT EVENT:
Below code will create a component event (name: sampleComponentEvent) having one attribute named Country of type String.
<!—Component Event Name: sampleComponentEvent -->
<aura:event type=”COMPONENT”>
 <aura:attribute name=”country” type=”String”/>
</aura:event>

Now to access the parameters of the event, you can use –
event.getParam(“country”);

HOW TO REGISTER CUSTOM COMPONENT EVENT:
A component needs to register for component event if it is willing to fire the event. Below code will register the event sampleComponentEvent.
<aura:registerEvent name=”mySampleComponentEvent” type=”sudipta:sampleComponentEvent />
Note: sudipta is the namespace here. So in your code, you need to replace “sudipta” with your namespace.

HOW TO FIRE CUSTOM COMPONENT EVENT:
To fire an event, you need to first get a reference of the event in JavaScript and then use fire() method to fire the event. Below is the code –
var compEvent = component.getEvent(“mySampleComponentEvent”);
compEvent.fire();

HOW TO HANDLE CUSTOM COMPONENT EVENT:
You need to use <aura:handler> tag to handle custom component event. Below is the code:

<aura:handler name=”mySampleComponentEvent” action=”{!c.handleComponentEvent}” />

Here handleComponentEvent is the name of the JavaScript controller function which will react when the event happens.
With all the above details, let’s go through the below example where I will try to explain the event bubbling effect.

Event – cmpClickEvent:
To start with, let’s create an event – cmpClickEvent.
<aura:event type="COMPONENT" description="Component Click Event" />

Component – clickEventGenerator:
Now the component – clickEventGenerator who will register the above component and also fire the event on button click.
<aura:component >
    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Registered -->
    <aura:registerEvent name="clickEvent" type="sudipta:cmpClickEvent"/>
    
    <div class="container">
     <form class="slds-form--stacked">
         <div class="slds-form-element">
                <ui:button label="GENERATE EVENT" labelClass="label" class="slds-button--neutral" press="{!c.fireEvent}"/>
            </div>
        </form>
    </div>
 
</aura:component>

And the JavaScript Controller contains the method –
({
 fireEvent : function(component, event, helper) {
             var cmpEvent = component.getEvent("clickEvent");
             cmpEvent.fire();
 }
})

Another Component – clickEventInnerMostComponent:
This component is the handler of the event. Here is the code –
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    
    <div>
        <sudipta:clickEventGenerator />
    </div>
</aura:component>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
          console.log("Event handled from Inner Most Component: " + event.getName());
 }
})

Another Component – clickEventMiddleComponent:
This is the component which is also a handler of the event. Here is the code:
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     {!v.body}
    </div>
</aura:component>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
           console.log("Event handled from Middle Most Component: " + event.getName());
 }
})

Another Component – clickEventParentComponent:
This is the parent component as well as handler of the event. Here is the code –
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     <sudipta:clickEventMiddleComponent >
          <sudipta:clickEventInnerMostComponent />
     </sudipta:clickEventMiddleComponent>
    </div>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
     console.log("Event handled from Parent Component: " + event.getName());
 }
})

Now the final Lightning App – ComponentEventApp:
The app contains a very basic structure as –
<aura:application >
    <sudipta:clickEventParentComponent />
</aura:application>

Now when you will execute the app and click on the GENERATE EVENT Button, you will get the below output in the console:
Event handled from Inner Most Component: clickEvent
Event handled from Parent Component: clickEvent

Surprised, right? Why not the log is coming from Middle Component?

So now if you see the event cmpClickEvent is bubbled to clickEventInnerMostComponent and clickEventParentComponent. It is not bubbled to clickEventMiddleComponent. The reason behind is that component clickEventInnerMostComponent and clickEventParentComponent are the facet value provider of the event, but clickEventMiddleComponent is not the facet value provider.

A component can be a facet value provider if that component is the outermost component in the markup.

clickEventInnerMostComponent became facet value provider because it is the outermost component in the markup for the component clickEventGenerator which is generating the event. This is defined in the component code – clickEventInnerMostComponent.

Similarly clickEventParentComponent became facet value provider because it is the outermost component in the markup for the component clickEventGenerator which is generating the event. This is defined in the component code – clickEventParentComponent.

But the component clickEventMiddleComponent is not the facet value provider as the code for the component doesn’t contain any reference of the component clickEventGenerator which is generating the event.

Now if you change the code of clickEventMiddleComponent to make sure this component also contains the reference of the component clickEventGenerator which is generating the event like below –

<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     <sudipta:clickEventInnerMostComponent /> 
    </div>
</aura:component>

The console output changes to –
Event handled from Inner Most Component: clickEvent
Event handled from Middle Component: clickEvent
Event handled from Parent Component: clickEvent

It indicates that now clickEventMiddleComponent is also the facet value provider of the event.

I hope you understood the event bubbling effect now as this concept is very important and developer should be very clear to the concept. In my next post, I will explain the Application type event.

If you have any feedback/question, please let me know. Your feedbacks are always welcome.
Share:

Sudden Gift from Salesforce Trailhead -- Feeling awesome

 
Share:

Another Important Step - Trailhead Module - Navigate the Salesforce Advantage


Aha!!!. This time I need to review a new Salesforce Trailhead module - Navigate the Salesforce Advantage. This time it is not any more battleship, rather it looks to me Pirate ship. This Pirate ship will navigate us through the sea – The Salesforce Advantage sea.

This trail is for beginners in Admin, Developer, Business User scope. Once you complete this trail, you will be aware of the key differentiator that makes Salesforce unique and successful. At the same time, you will understand Salesforce’s core values, innovative technology, and vibrant ecosystem.

The first module: Salesforce Success Model
This module comes with two submodules. The first submodule – “Getting to Know Salesforce” explains what is salesforce and how salesforce will be benefits for business. The second submodule – “Introducing our Four Core Differentiators” explains the importance of customer success in Salesforce. Here we are having the Salesforce’s 1-1 model of Giving back.

Once you complete this module, you will be awarded with the below badge:

The second module: Salesforce Cloud Benefits
Like the above one, this module also comes with two submodules. The first submodule – “Succeeding with a Complete CRM” explains a very basic questions – Whether Salesforce is an app or a platform? At the same time, this submodule explains how Salesforce’s Complete CRM evolves with customer’s requirements. The second submodule – “Propelling Your Business with the Cloud” explains the basic of cloud computing and why Salesforce decided to do operation in cloud. At the same time, this section explains the benefit that customer receives being in cloud.

Once you complete this module, you will be awarded with the below badge:

The third module: Salesforce Technology Basics
This module comes with 4 submodules. The first sub module “Getting behind the trusted cloud” talks about the trust which Salesforce built to become World’s most trusted cloud platform. Describes Salesforce’s security model and I believe this module is an inspiration to check out Salesforce’s security model implementation. The second sub module “Learning the Value of Multitenancy” explains about multitenancy and the advantages of having this in Salesforce. The third sub module “Understanding the Power of Metadata” explains one of my favorite topic i.e. Metadata. This explains the how flexible the Salesforce platform is due to availability of Metadata, how upgrades can be done seamlessly die to Metadata. The last sub module “Experiencing Fast App Development and Customization” talks about different paths of fast app development and also the components available during fast app development. At the same time, this section talks about the when to go for Customization rather than Configuration.

Once you complete this module, you will be awarded with the below badge:

The final module: Salesforce Ecosystem
This module again comes with two distinct sub modules. The first sub module “Leveraging our Community, Resources, and Events” talks about the success community that Salesforce is having. At the same time, it tells you to get connected to provide/share ideas, answers and collaborate with each other. Sharing is Caring. The second sub module – “Stopping, Collaborating, and Listening” tells about the how as an individual you can connect to Salesforce via a Salesforce MVP, or through a user group or any other mediums.

Once you complete this module, you will be awarded with the below badge:
After completing this trail, I can explain Salesforce in a much better way to my customers. Requesting others also to go through this trail and make yourself comfortable. Again a special big THANKS to Trailhead for this trail.


Share:

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (105) Apex (44) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) lightning (12) tutorial (11) Certification. (9) javascript (8) Trigger (7) test class (7) unit testing (7) Sharing and Visibility (6) design pattern (6) report (6) security (6) trailhead (6) Advanced Admin (5) Certification (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) developer (5) formula (5) mobile (5) salesforce release (5) service cloud (5) solution management (5) use case (5) JSON (4) Kitchener Developer Group (4) Lightning Experience (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Advanced Apex (3) Architect (3) Live Chat (3) Performance (3) Products (3) Role (3) Sales Cloud (3) Salesforce DX (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Tips (3) Web Technology (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Bulkify (2) Data Architecture and Management Certification (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Lightning Design System (2) Live Agent (2) Metadata (2) Online Event (2) Opportunity (2) Price Book (2) REST (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Asynchronous callout (1) Aura Framework (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Cheat Sheet (1) Classic (1) Community (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Customer (1) Decorator Design Pattern (1) Dev Hub (1) Devops (1) Diwali (1) Email (1) FSC (1) Function (1) Goals (1) Guide (1) Household (1) Ideas (1) Improvement (1) KPIs (1) Kitchener User Group (1) Large Data Volume (1) LastModifiedDate (1) Lightning Web Component (1) Manual Sharing (1) Metrics (1) New (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Person Account (1) Photo (1) Platform Developer I (1) Presentation (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Retrieve (1) Role Hierarchy (1) SFDX (1) Salesforce Optimizer (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Switch (1) SystemModStamp (1) User License (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Total Subscribers

Total Pageviews