Day: December 30, 2018

Lightning Web Component Tree Grid

Let us discuss here how to use  Lightning Web Component Tree Grid.A lightning-tree-grid component displays hierarchical data in a table. Its appearance resembles lightning-datatable, with the exception that each row can be expanded to reveal a nested group of items. Rows that contain nested data display a chevron icon to denote that they can be expanded or collapsed. This visual representation is useful for displaying structured data such as account hierarchy or forecasting data. Each column’s formatting is determined by its data type. For example, a phone number is displayed as a hyperlink with the tel: URL scheme by specifying the phone type. The default type is text .

Please refer to this link for Lightning web component environment setup 

 

1.Apex Class 

Create an apex class using the below SFDX command

Use this apex code in the TreeGrid Class

 

2. Create a Lightning web component 

Create a lightning web component using this below SFDX Command

Here is the code for TreeGrid.html

Here is the TreeGrid.js JavaScript controller

Here are the TreeGrid.js-meta.xml configuration files

3.Push Changes to scratch org 

Now push the changes to scratch org using this SFDX command

Add this component to the record page using the lightning app builder. After adding to the record page you can able to the Tree grid as shown below

 

 

 

Lightning Web Component Google Maps

Let us discuss here how to use the Google maps with Lightning Web Component Map. A lightning-map component displays a map of one or more locations. To display maps Pass the location to be displayed via the component’s map-markers property. map-markers is an array of markers that indicate location. A marker contains

  • Location Information: This can be a coordinate pair of latitude and longitude or an address composed of address elements.
  • Descriptive Information: This is information like title, description and an icon which is information relevant to the marker but not specifically related to location.

The location information supports the following address elements: City, Country, PostalCode, State, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of City, Country, PostalCode or State must be specified. Here’s an example of a marker that uses address elements.

 

Here’s an example of a marker that uses coordinates for latitude and longitude.

 

For each map marker in the array of map markers, provide either latitude and longitude coordinates or address elements. If you specify both in a single marker, latitude and longitude get precedence.

When displaying a list of addresses, you must also pass the markers-title property, which displays a heading for your locations.

1.Create an Apex Class

The following apex class will get the account location information and pass it to the web components. Use the following SFDX command.

Here is the code

2. Create a Lightning Web component 

Create a lightning web component to display the map. use this SFDX command to create a web component.

Here is the MapEx.html code

Here is the MapEx.js JavaScript controller code

Here is the MapEx.js-meta.xml configuration file

3.Push Changes to scratch org 

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

Add this web component to the record page and you can able to see the map as shown below.

 

Lightning Web Component Datatable

Let us discuss here a simple example of Lightning Web Component Data table.A lightning-datatable component displays tabular data where each column can be displayed based on the data type. For example, an email address is displayed as a hyperlink with the mailto: URL scheme by specifying the email type. The default type is text.

1. Create an apex class 

Create an Apex class that will get all opportunities. Use the below SFDX Command

Here is the code

2. Create a Lightning Web Component 

Create a Lightning web component using this SFDX command. this web component will display the opportunities in the table.

Here is the DatatableEx.html code

Here is the DatatableEx.js JavaScript controller code.

Use this DatatableEx.js-meta.xml configuration file

 

3. Push Changes to scratch org

Use the below SFDX command to push the changes to scratch org

 

Now add this component to record page using lightning app builder and save it. you can able to see the below data table with the list of opportunities.

 

Lightning Web Component Combobox

Let us discuss here how to use the Lightning Web Component Combobox .lightning-combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input. In this example, we will be showing the list of the opportunities based on the selected stage name. Refer this link to environment setup 

1.Create an apex class 

create an Apex class that will be fetching the opportunities based on the selected stage name . it this class we have an Aura Enabled method that will accept the stage name and return the list of opportunities. Use this SFDX command to create an apex class

Here is the complete apex class

 

2. Create a Lightning Web Component 

Now create a lightning web component that will display the combobox which contains the opportunity stage names .based on the selected opportunity stage name this component will display the list of opportunities.

Use this SFDX command to create a lightning web component

Here is the ComboboxEx.html code

Here is the ComboboxEx.js JavaScript controller.

Here is the ComboboxEx.js-meta.xml configuration file

 

3. Push Changes and add the Component to record page 

Now push the changes using this SFDX command

Now add this web component to the opportunity record page using lightning app builder and you can able to see the result as shown below.

Now select the stage name from the combobox and it will display the list of opportunities as shown below.

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.