Month: December 2018

Lightning Web Component Accordion

Let us discuss here how to create an Accordion using the Lightning Web Component lightning-accordioncomponent. A lightning-accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components. To create Lightning web component we need to SFDX. Please refer this link for Environment setup for development. 

1.Create an apex class 

Now create an apex class to get the data from the Salesforce. here we will be fetching the accounts and its contacts data and will be displaying them like an accordion.

use this SFDX command to create an apex class

Here is the complete code

 

2. Create a Lightning Web Component 

Create a lightning web component that will show the accordion. run the following SFDX command to create a lightning web component.

Here is the code for the AccordionEx web component.

Here is the AccordionEx.html code that will display the Accordion.

Here is the AccordionEx.js JavaScript controller class.

Here is the AccordionEx.js-meta.xml configuration file which allows us to add this component to the record page.

3.Push changes

Now push the changes to scratch org using this below SFDX command

Now after pushing the changes to add this lightning web component to the record page. Go to the lightning app builder and add this component to the record page and save it .which will be displayed similar accordion on the record page.

 

 

 

 

 

Passing Current Object Name to Lightning Web Component

Lets us discuss here how to pass the current object name to the lightning web component. If a component is used on a Lightning record page, you can pass the component the API name of the current object. In the component’s JavaScript class, use the @api decorator to create a public objectApiName property. When your component is invoked in a record context in Lightning Experience or in the mobile app, the objectApiName is set to the API name of the object associated with the record being viewed, for example: Account. The objectApiName is set only when you place or invoke the component in an explicit record context. In all other cases, the objectApiName isn’t set, and your component shouldn’t depend on it.

 Create a lightning component

Create a new lightning web component using the below SFDX command.

Here is the ViewObject.html markup code

Here is the JavaScript controller class code .In the component’s JavaScript class, use the @api decorator to create a public objectApiName property and recordId property.

Here is the ViewObject.js-meta.xml code

Push the changes

Now push the changes to scratch org using the below SFDX command

Add this component to record page and you can able to see the output as shown below

Get Record Id into Lightning Web Components

Let us discuss here how to get the current record id into the lightning web components.  If a component is used on a Lightning record page, you can pass the component the ID of the current record. In the component’s JavaScript class, use the @api decorator to create a public recordId property.

In this example, we will be using the lightning-record-view-form to show the record data. Let’s start with the simple lightning web component and then we will see another example of how to pass the record id to the apex controller from the lightning web component.

 Create a Lightning web component

Now create a lightning web component using the following SFDX command

Here is the RecordIdExample.html code and in this code, we are using the lightning-record-view-form to show the account data.

Here is the RecordIdExample.js controller. In this JavaScript class, use the @api decorator to create a public recordId property.

Sample RecordIdExample.css

Here is the RecordIdExample.js-meta.xml

Push Changes to Scratch Org 

Now push the changes from the local development to scratch org using this command

Add the lightning web component to the account record page using app builder and you can able to see the result as shown below.

 

 

Update code to pass record Id to Apex controller 

Let us make some changes now to the component. Now we will update the code in such a way that will get show the data for the selected account. Let us understand how to pass the record id to the apex controller here. create an apex class using this SFDX command

Here is the ContactData apex class.

Now update the RecordIdExample.html markup code as shown below

Now update the RecordIdExample.js controller as shown below. Now in this JavaScript controller, we are passing the current record id to apex controller and will get the data.

If you add the above component to the account record page, you can able to see the list of contacts related to the account as shown below.

 

Lightning Web Components Making Width Aware

Let us discuss here how to define the lightning web component width aware of the screen. When building web apps, it is sometimes advantageous for components to have awareness of their size and position on the screen. This is useful both for rendering content initially, but also for components that need to know when their size changes. When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at runtime. This example will display the opportunity table and adding different boards based on width as shown below.

In the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page. the flexipageRegionWidth will return SMALL ,MEDIUM ,LARGE values

 

Step 1: Create an Apex Class

Create a simple apex class that queries the opportunity and return the data. run the following command from the SFDX

Here is the complete code for apex class

 

Step 2: Create a lightning web component

Create a Lightning web component by using the following SFDX command

Here is the RegionEx.html markup code which will display the opportunity table.

Here is the RegionEx.js JavaScript controller.I n the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page.

 

Here are the RegionEx.css styles that we will used  based on the region

Here is the RegionEx.js-meta.xml

 

Step 3: Push Changes to Scratch Org 

Now push the changes using this SFDX command

Add the Lightning web component to the record page and you can able to see the styles based on the region width of the page as shown below.

 

 

 

Platform Events Subscribe using Lightning Component

Platform events are part of Salesforce’s enterprise messaging platform. The platform provides an event-driven messaging architecture to enable apps to communicate inside and outside of Salesforce. Here let us discuss how to subscribe to the platform events in the lightning component using lightning: empApi. The lightning:empApi component provides access to methods for subscribing to a streaming channel and listening to event messages. All streaming channels are supported, including channels for platform events, PushTopic events, generic events, and Change Data Capture events. The lightning:empApi component uses a shared CometD connection.we will be subscribing the platform event object as shown below.
Here is the simple lightning component that will subscribe to the platform events and listen for notifications.


 

once a platform event is published, you can able to the response from the subscribed lightning component as shown below