Month: January 2018

Lightning Component Facets

In this blog post, I am going to explain salesforce lightning facets. lighting facets are nothing but attributes of type Aura.Component[] with the array of attributes like body, title etc.To define your own facet, add an aura:attribute tag of type Aura.Component[] to your component. The body attribute has type Aura.Component[] .Now to start with I created a new lighting component with name AuraFacet.cmp with below code.

This is the component which will have two attribute types title and footer facets that are passed from the invoked component.Now I created a component name facetwrapper.cmp with the below code.

 

 

Now if you see the value of an attribute are passed by using the <aura:set> tag.Set tag is used to set the footer and body and title attributes from the wrapper component as shown below.

 

Lightning Application Events

Introduction

In this blog post, I am going to explain how to use the application events.Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All
components that provide a handler for the event are notified.But its good practice to use the component events whenever possible instead of application events.Create an application event contains there steps

Step 1: Create an Application event
Create a new application event with below code as shown below. appEvent.evt

Step 2: Register an Event

A component registers that it may fire an application event by using <aura:registerEvent> in its markup. The name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name=”</aura:appEvent” but the value isn’t used anywhere.

Step 3 : Fire an Event
Use $A.get(“e.myNamespace:myAppEvent”) in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace.

Put All together

Now lets put all together to understand the application events.Here below is the component which will trigger the application events.

AppNotifier.cmp

 

AppHandler.cmp

AppHandler is component that will handle the event notification which is fired from the AppNotifer component and handle them

AppContainer.cmp

 

 

 

Lightning Component Events

Introduction

In this blog, I am going to explain salesforce lightning component events. The lightning component is event-driven framework model which control the flow determined by the occurrence of events from the notifier to the handler.The lightning framework supports two type of events namely component events and application 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. Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component and all components that provide a handler for the event are notified.

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.you can understand the component event in three steps . 1. Create Custome component event 2. Fire the Component event  3. Handle the component event

Step 1: Create Component Events
Create a custom component event name “CmpEvent.evt” as with below code.Events can contain attributes that can be set before the event is fired and read when the event is handled.

The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams(). A parameter name set in the event must match the name attribute of a <aura:attribute> in the
event as shown below.

The component that handles an event can retrieve the event data. To retrieve the attribute value in this event, call event.getParam(“message”) in the handler’s client-side controller.

Step 2: Fire Component Events

Fire a component event to communicate data to another 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.To fire the component event, you need to register the event first the need fire from the component.

.Use fire() to fire the event from an instance of a component as shown below. get the register events from the controller call getEvent bypassing the register event name and fire the event by using event.fire() method .

Step 3: Handling Component Events
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.
Use <aura:handler> in the markup of the handler component. For example:

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.
The action attribute of <aura:handler> sets the client-side controller action to handle the event. The event attribute specifies the event being handled.

Lets Put into Action 

So far we have seen how to setup and fire the component events steps. let’s put all into the actions now.Now create a new component Notifer.cmp will are used to register and fire the component event.

Notifer.cmp

Handler.cmp

Handler component is used to receive the events which are fired by notifier component and execute the corresponding action

So for the notifier and handler component sends the event parameters from the predefined attribute values. Now, lets send event data from the input text to handler from the notifier  components .TO do that change the notifier component as shown below.

With the above change, you can enter the input text and pass it to the event params values from the entered text values from the notifier component  and same values is received in the handler component from the event params .

 

Lightning Component Interfaces

In this blog, I am going to explain lightning component interfaces. Other OOP programming like Java, Apex etc lightning component has Object-oriented support to define the interface that defines a set of signatures. Salesforce has the lot of marker interface to implement for the different purpose like app builder and quick action and ext. Similar you can define your own interfaces. An interface starts with the <aura:interface> tag. It can only contain these tags:
<aura:attribute> tags to define the interface’s attributes.
<aura:registerEvent> tags to define the events that it may fire.
<aura: method> tags to define the events that it may fire.
You can’t use markup, renderers, controllers, or anything else in an interface. 

Define an interface panelType.intf the developer console with below code

when a component implements an interface all attributes, methods, and events will be available by the compiler in the background, so the attributes will be available at runtime – say no need to really ‘implement’ the contract from the interface by yourself.If you can see the above interface which contains the methods and attributes and events which are going to implement from the component with below code.

controller

helper

 

Now the component is having two show and hide action the first show and hide actions are coming from the methods of the interface and components has inherited those methods by implementing the paneltype.intf interface and Second show and hide actions are firing from the events which are again coming from the interface and component is inherited those events by implementing the paneltype.intf interface.