Add Lightning Internet Elements in Cellular and Lightning Expertise as Tabs


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?!

  1. Access Static Resources, Content Asset Files in Lightning Web Component
  2. Access Custom Labels in Lightning Web Component
  3. 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:

  1. Add the lightning__Tab goal to the element’s configuration file
  2. Create a lightning element tab for the lightning net element
  3. 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. 

  1. Click on Setup.
  2. Within the Fast Discover field, sort Tabs.
  3. Choose Tabs, navigate to Lightning Element Tabs , then click on on the New.
  4. Enter the small print as proven within the following screenshot:
    1. Choose the progressBarExample Lightning element within the Lightning Element.
  5. Enter an outline of the tab, if desired, and click on Subsequent.
  6. Select the consumer profiles you need entry to within the new customized tab.
  7. 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.



Source link

Thanks for Reading

Enjoyed this post? Share it with your networks.

Leave a Feedback!