Final Up to date on July 7, 2022 by Rakesh Gupta
Huge Concept or Enduring Query:
- Tips on how to floor the Lightning Internet Elements in Salesforce cell and Lightning Expertise as Customized Tabs?
Targets:
After studying this weblog, you’ll have the ability to:
- Perceive the distinction between floor elements in App Builder pages vs Tabs
- Add the suitable goal to make a Lightning net element out there as a customized tab
- Create a customized lightning element tab for the lightning net element
- and rather more
Previously written just a few articles on Lightning Internet Element. Why not verify them out while you’re at it?!
- Access Static Resources, Content Asset Files in Lightning Web Component
- Access Custom Labels in Lightning Web Component
- Create a Form with a Progress Bar in Lightning Web Component
Keegan Watson is working as a Junior Developer at Gurukul on Cloud (GoC). By now, she has created a type with a progress bar after studying this article, as proven beneath:
Now she needs to discover ways to make progressBarExample lightning net element is offered as a customized tab in a Lightning Expertise app and the Salesforce app.
Add Lightning Internet Elements in App Builder Pages vs Tabs
There are alternative ways to make lightning net elements out there for Salesforce cell and lightning expertise. These fall below two classes, as talked about beneath:
| App Builder Pages | Tabs |
| Structure constructed utilizing drag and drop the element on the template | Structure absolutely managed by builders |
| May be constructed and configured by enterprise customers | Enterprise customers can’t customise it |
| Consists of title bar, which can encompass fast actions | |
| Activation mechanically creates tabs and permits straightforward addition to apps and the cell navigation menu |
Goal specifies the place the element may be added, comparable to on a kind of Lightning Web page or in Embedded Service Chat. If you would like your element to seem within the Lightning App Builder or in Expertise Builder, specify at the very least one Lightning web page sort. Legitimate values for the goal are:
| Worth | Description |
| lightning__AppPage | Permits a element for use on an App web page in Lightning App Builder. |
| lightning__FlowScreen | Permits a element for use on move screens in Circulation Builder. |
| lightning__HomePage | Permits a element for use on a House web page in Lightning App Builder. |
| lightning__Inbox | Permits a element for use in Lightning App Builder so as to add to electronic mail software panes for the Outlook and Gmail integrations. |
| lightning__RecordAction | Permits a element for use as a fast motion on a report web page. |
| lightning__RecordPage | Permits a element for use on a report web page in Lightning App Builder. |
| lightning__Tab | Permits a element for use in a customized tab in Lightning Expertise or the Salesforce cell app. |
| lightning__UtilityBar | Permits a element for use as a utility merchandise on the utility bar within the App Supervisor. |
| lightningSnapin__PreChat | Permits a customized prechat element to be chosen from Embedded Service Chat Setup. |
Automation Champion Method (I-do):
There are three steps to resolve Keegan’s enterprise requirement utilizing Lightning Internet Element and a customized tab. We should:
- Add the lightning__Tab goal to the element’s configuration file
- Create a lightning element tab for the lightning net element
- Add a lightning element Tab to the Salesforce Cellular Navigation Menu and Lightning Expertise
Step 1: Add the lightning__Tab Goal to the Element’s Configuration File
Add the lightning__Tab goal to the element’s configuration file. The progressBarExample.js-meta.xml configuration file defines the metadata values for the element, together with the setting to permit utilization in a customized tab.
<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__RecordPage</goal>
<goal>lightning__AppPage</goal>
<goal>lightning__HomePage</goal>
<goal>lightning__Tab</goal>
</targets>
</LightningComponentBundle>
Deploy the adjustments to the supply org through Visible Studio Code.
Step 2: Create a Lightning Element Tab for the Lightning Internet Element
A Lightning Element tab for the lightning net element may be created manually within the setup interface.
- Click on Setup.
- Within the Fast Discover field, sort Tabs.
- Choose Tabs, navigate to Lightning Element Tabs , then click on on the New.
- Enter the small print as proven within the following screenshot:
- Choose the progressBarExample Lightning element within the Lightning Element.
- Choose the progressBarExample Lightning element within the Lightning Element.
- Enter an outline of the tab, if desired, and click on Subsequent.
- Select the consumer profiles you need entry to within the new customized tab.
- Click on Save.
Step 3: Add a Lightning Element Tab to the Salesforce Cellular Navigation Menu and Lightning Expertise
The lightning Element tab may be manually added to the Cellular Navigation menu within the setup interface.
The lightning Element tab may be manually added to the Lightning Expertise by including App(s) to the setup interface.
Proof of Idea
Now onwards, enterprise customers can entry the lightning element tab from Salesforce cell below the navigation menu as proven beneath:
Formative Evaluation:
I need to hear from you!
What’s one factor you realized from this submit? How do you envision making use of this new data in the actual world? Be happy to share within the feedback beneath.
