Usage of lightning:tab

A lightning:tabset displays a tabbed container with multiple content areas, only one of which is visible at a time. Tabs are displayed horizontally inline with content shown below it. A tabset can hold multiple lightning:tab components as part of its body. The first tab is activated by default, but you can change the default tab by setting the selectedTabId attribute on the target tab.

Use the variant attribute to change the appearance of a tabset. The variant attribute can be set to default, scoped, or vertical. The default variant underlines the active tab. The scoped tabset styling displays a closed container with a defined border around the active tab. The vertical tabset displays a scoped tabset with the tabs displayed vertically instead of horizontally.

 

 

 

 

 

 

 

 

 

lightning:tree metatext example

A lightning:tree component displays the visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. metatext one of the attributes which you can pass it to the array of items .metata attribute is used to provide users with supplemental information and aid with identification or disambiguation. For example, if you want to provide the contact details in the Items that are displaying as shown in the below image.

Apex Class 

Lightning Component 

 

 

lightning:accordionSection row actions

Sample example to show how to use the lightning:accordionSection row actions whihc enables a custom menu implementation. Actions are displayed to the right of the section title.

Apex Class

Lightning Component 

Controller.js

Understanding code 

1. The below code is used to set the row level actions

2. On row click of the button menu, we are handling the on the select event.

 

Navigate to Component Using lightning:navigation

in this example, we will see how to navigate from the one lightning component another component using lightning:navigation. Use lightning:navigation component to navigate to a given pageReference or to generate a URL from a pageReference.  PageReference is a reference to a page, providing a well-defined structure that describes the page type and its corresponding values. You should use the PageReference definitions instead of attempting to parse the URL directly. The following PageReference properties are supported.

type:- The API name of the PageDefinition like component or standard page etc.

attributes is an object of values for each attribute specified by the PageDefinition.

state This property defines the parameter of page URL to be generated.

The below is the simple component that we will be invoking from another component by using navigation API.

Target.cmp

In the init handler we are getting the page reference from the navigation API and setting the attributes.

Source.cmp

Controller.js

In the client-side controller, set the pageReference attribute for the lightning component and set the state and attributes. Set the URL on your link using the generateUrl() method on the init handler.

handleClick method on the button click will navigate to the Target component.

 

 

Usage Of force:recordView

A force:recordView component represents a read-only view of a record. By default, the record view uses the full layout to display all fields of the record. The type attribute does not support any other value so you don’t need to specify it. In this example, we will see how to use the force:recordview along with datatable. we will show the row details on click of the row action by using force:recordview

Apex Class 

 

Lightning Component 

Here is the simple lightning component

controller.js

helper.js

Key highlights of the code 

The following code is used to show the row-level action on datatable

Below controller handler is used to handler the row level actions.

the following controller action logic is used to create a force:recordview and passes the record id to the record view based on the row action.