Creating Switchable Lightning Design Tabs In Salesforce - Visualforce & Aura Components

Creating Switchable Lightning Design Tabs In Salesforce - Visualforce & Aura Components

Raghavendhra Yarlagadda's photo
Raghavendhra Yarlagadda
¡

3 min read

Table of contents

Hello There! Welcome Back 🙂

The Lightning Design System is my personal favourite UI framework the main reason being its look and feel is native & lightweight. But, Salesforce says that “The Lightning Design System is a pure CSS framework“. Which means we have to write our own javascript for the Lightning Design System components. If you are using the Lightning Components framework, Salesforce had you covered with Most of the SLDS components(Base Components) as a part of the Lightning Component framework.

So, I am starting to write generic code for some of the Lightning Design System components(mostly for visualforce and may or may not apply to Lightning Components as demonstrated below) which you can use in your development projects and build great User Interfaces. I am using jQuery to write this code.

In this blog we are gonna make the Lightning Design System “Tabs” component interactive(switchable tabs).

Let’s get started!

For Visualforce

Things we will be using:

  1. The Salesforce Lightning Design System

  2. jQuery

Step 1: Gathering the resources we need.

  1. Salesforce Lightning Design System:

    1. Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
      The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
      I am using “slds” as a scoping class in this blog post.

    2. The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “SLDS”.

    3. Upload the zip file as your Static Resource.

  2. jQuery:
    We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Now we have all the stuff we need, lets code what we want.

Step 2: The Code.

  1. Set the StandardStylesheets to false and doctype to html-5.0 (Visualforce Code: Line 1)

  2. We put all the resources we need into the page and set jQuery to noConflict mode. (Visualforce Code: Line 3 to 8)

  3. Create SLDS Tabs Component as shown in the SLDS website here, I chose the deafult style, you can choose any type of tab (Visualforce Code: Lines 14 to 26)
    To know more on getting started with The Lightning Design System you can refer my another blog post.

  4. The Most Important Step: including the code to make the SLDS Tabs Switchable. (Visualforce Code: Line 32 to 40)

<apex:page docType="html-5.0" standardStylesheets="false" title="Minerva18-SLDSTabsJS">
   <!–jQuery CDN–>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <!–Salesforce Lightning Design System Static Resource–>
   <apex:stylesheet value="{!URLFOR($Resource.SLDS203, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
   <script>
      var j$ = jQuery.noConflict();
   </script>
   <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
      <div class="minerva18">
         <!–The Salesforce Lightning Design System Tabs Component–>
         <div class="slds-tabs–default">
            <ul class="slds-tabs–default__nav" role="tablist">
               <li class="slds-tabs–default__item slds-text-heading–label slds-active" title="Item One" role="presentation">
                  <a class="slds-tabs–default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
               </li>
               <li class="slds-tabs–default__item slds-text-heading–label" title="Item Two" role="presentation">
                  <a class="slds-tabs–default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
               </li>
               <li class="slds-tabs–default__item slds-text-heading–label" title="Item Three" role="presentation">
                  <a class="slds-tabs–default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a>
               </li>
            </ul>
            <div id="tab-default-1" class="slds-tabs–default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
            <div id="tab-default-2" class="slds-tabs–default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
            <div id="tab-default-3" class="slds-tabs–default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
         </div>
      </div>
      <script>
         /*SLDS Tabs JS*/
         j$(‘.slds-tabs–default__link,.slds-tabs–scoped__link’).click(function(){
         j$(this).parent().parent().find(‘.slds-tabs–default__link,.slds-tabs–scoped__link’).attr(‘aria-selected’,’false’);
         j$(this).attr(‘aria-selected’,’true’);
         j$(this).parent().parent().find(‘.slds-tabs–default__link,.slds-tabs–scoped__link’).attr(‘tabindex’,’-1′);
         j$(this).attr(‘tabindex’,’0′);
         j$(this).parent().addClass(‘slds-active’).siblings().removeClass(‘slds-active’);
         j$(this).parent().parent().parent().find(‘.’+j$(this).parent().parent().parent().find(‘.slds-tabs–default__content,.slds-tabs–scoped__content’)[0].classList[0]).removeClass(‘slds-show’).addClass(‘slds-hide’);
         j$(this).parent().parent().parent().find(‘#’+j$(this).attr(‘aria-controls’)).removeClass(‘slds-hide’).addClass(‘slds-show’);
         });
         /*SLDS Tabs JS*/

      </script>
   </html>
</apex:page>

The main javascript/jQuery code are Lines 32 to 40 in the code snippet above can make any type(default and scoped) and any number of tabs switchable.
You just have to include those eight lines of code(Lines 32 to 40 in the code snippet above) and it will take care of the rest.

For Lightning Aura Components

It is comparatively easy to do it in Lightning Components, like really really easy!

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
   <lightning:tabset>
      <lightning:tab label="Item One">
         Item One Content
      </lightning:tab>
      <lightning:tab label="Item Two">
         Item Two Content
      </lightning:tab>
      <lightning:tab label="Item Three">
         Item Three Content
      </lightning:tab>
   </lightning:tabset>
</aura:component>

There it is! We just made the Lightning Design System Tabs switchable using jQuery.
Cool one, Right?

Resources
Salesforce Lightning Base Component Resource: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_overview.htm

SalesforceJavaScript
Â