Get Hands-on Creating Custom Tabs for Lightning Web Components
After completing this unit, you’ll be able to:
- Add Lightning Web Components as Custom Tabs.
- Maintain your Platform Developer I certification.
With the Winter ’20 release, you can make a Lightning web component available as a custom tab in a Lightning Experience app and in the Salesforce app.
If you’ve ever worked with Lightning Web Components (LWC), you know that the
<component>.js-meta.xml configuration file defines the metadata values for the component. To allow the component to be used in Lightning App Builder,
isExposed to true and define the <target>, which is a type of Lightning page. Adding the
lightning__Tab target to the component’s configuration file allows its usage in a custom tab.
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>46.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
Once you’ve deployed this Lightning web component to an org, you can create its custom tab in the Setup menu by clicking the New button next to Lightning Component Tabs.
Easy as pie!
- Salesforce Winter ’20 Release Notes: Add Lightning Web Components as Custom Tabs
In the hands-on challenge, you create a Lightning web component and add it as a custom tab in the App Launcher. As part of this challenge, you’ll need to be familiar with Lightning Web Components (LWC).
If you’re comfortable using Lightning Web Components (LWC), you can start working on the hands-on challenge. You can also learn to build Lightning Web Components by completing the Lightning Web Components Basics module.
Working with Lightning Web Components is a developing skill for many platform developers, and we encourage you to learn these new skills. However, if you’ve never worked with Lightning Web Components before and aren’t ready to learn about them, you can install an unmanaged package that already contains the Lightning Web Component. To launch your playground and install the package, follow the instructions below.
Launch your Trailhead Playground by scrolling to the bottom of this page and clicking Launch. If you see a tab in your org labeled Install a Package, great. Follow the steps below.
If not, click to launch the App Launcher, then click Playground Starter and follow the steps. If you don’t see the Playground Starter app, copy this package installation link and check out Install a Package or App to Complete a Trailhead Challenge on Trailhead Help.
- Click the Install a Package tab.
04t1v0000021k2cinto the field.
- Click Install.
- Select Install for Admins Only, then click Install.
When your package is finished installing, you see a confirmation page and get an email to the address associated with your playground.