Creating Custom Tabs for Lightning Web Components

Create a Lightning web component and add it as a custom tab in the App Launcher and navigation menu.

  • Create a new Lightning web component:
    • Name: myComponent
  • Add a lightning-card to myComponent:
    • Title: Hello
  • Add a lightning-button to the Hello lightning-card (Note: make sure the button lives in the “actions” slot):
    • Label: New
  • Add a footer paragraph to the Hello lightning-card:
    • Text: Footnote
  • Add myComponent as a new custom tab:
    • Name: Words

Before you begin, you must update the configuration file to allow for custom tabs.

Copy the following code and paste it into notepad and save it as myComponent.js-meta.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=””&gt;

Use workbench to deploy the lightning component bundle to your org.

Record Page Component Visibility Rules Based on Device

Cloud Kicks has a requirement to make the recommendation component visible on a Sales Rep’s desktop. Build out a custom Lightning account page.

  • Create a new Lightning page:
    • Page type: Record Page
    • Label: Account Page
    • Object: Account
    • Template: Clone Salesforce Default Page > Account Grouped View Default
  • Add the Recommendations component to the page you created
  • Add a visibility filter on the Recommendations component:
    • Filter Type: Device
    • Field: Form Factor
    • Operator: Equal
    • Value: Desktop
  • Save and activate the page for all users
  • Assign the page as the org default

Blog Posts

Previously I would post about the maintenance exams. Since they have moved to Trailhead, I feel they are no longer needed.

If you find yourself still needing assistance feel free to shoot me a message and I will try to assist where possible. I keep up on my maintenance exams so I might be able to provide insight.

If there is anything you would like to see more posts of just let me know and I will do my best to publish more if those topics.