Dynamically Creating Lightning Tabs

In this blog, I am going to show how to create a lightning component tabs dynamically by using lightning:tabset and lightning:tab components. In this example, simple I am creating four tabs dynamically when the user clicks on the button.

Lightning Component 


On click of the button, the tabs will created dynamically as shown below.


Usage Of lightning:slider

In this blog, I am going to show how to use lightning: slider.The lightning:slider is an input range slider for specifying a value between two specified numbers. A lightning:slider component is a horizontal or vertical slider for specifying a value between two specified numbers. For example, this slider can be used to capture user input about order quantity or when you want to use an input field of type=”range”. To orient, the slider vertically, set type=”vertical”. By default, the min and max values are 0 and 100, but you can specify your own values. Additionally, if you specify your own step increment value, you can drag the slider based on the step increment only. If you set the value lower than the min value, then the value is set to the min value. Similarly, setting the value higher than the max value results in the value being set to the max value. In this examples, I am just fetching the contact based on the slider range.

Apex Class

Lightning Component



lightning:notificationsLibrary Example

In this blog, I am going to explain how to use lightning:notificationsLibrary that provides an easy way to display notices and toast in the app. lightning:notificationsLibrary  component is supported in Lightning Experience, Salesforce app, and Lightning communities only. Include one <lightning:notificationsLibrary aura:id=”notifLib”/> tag in the component that triggers the notifications, where aura:id is a unique local ID. Only one tag is needed for multiple notifications.


Notices interrupt the user’s workflow and block everything else on the page. Notices must be acknowledged before a user regains control over the app again. As such, use notices sparingly. They are not suitable for confirming a user’s action, such as before deleting a record. To dismiss the notice, only the OK button is currently supported.



Toasts are less intrusive than notices and are suitable for providing feedback to a user following an action, such as after a record is created. A toast can be dismissed or can remain visible until a predefined duration has elapsed.



The Below lightning component shows the different type of notifications.






Usage of lightning:treeGrid

In this blog, I am going to show how to use lightning:treeGrid. A lightning:treeGrid 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. Each column can be displayed based on the data type. In this example, I am going to show account and its contacts and opportunities as a tree grid.

Apex Class 

Lightning Component 



Below image shows the treegrid output.



Custom Navigation Model for Flow Screens with Lightning Component

In this blog, I am going to explain how to use the custom lightning component button that is used to control the navigation of flow.By default, users navigate a flow by clicking standard buttons at the bottom of each screen. The lightning:availableForFlowScreens interface provides two attributes to help you fully customize your screen’s navigation. To figure out which navigation actions are available for the screen, loop through the availableActions attribute. To programmatically trigger one of those actions, call the navigateFlow action from your JavaScript controller.

Flow Navigation Actions

The availableActions attribute lists the valid navigation actions for that screen NEXT, BACK, PAUSE, RESUME, FINISH are the possible actions. A screen’s available actions are determined by:

  • Where in the flow the screen is. For example, Previous isn’t supported on the first screen in a flow, Finish is supported for only the last screen in a flow, and you can never have both Next and Finish.
  • Whether the flow creator opted to hide any of the actions in the screen’s Navigation Actions controls. For example, if Allow Pause is de-selected, the Pause action isn’t included in availableActions.


Here is the lightning component




Here the simple flow that I created for testing
You can see below the image that shows how the lightning component interacts with flow navigation.
Once you click the next button on the component it will take to the next action i.e Finish.