Skip to main content

Showing and hiding the tab in Salesforce Lightning Design System in Visualforce page using basic javascript

I am not yet familiar with Salesforce Lightning Design System (SLDS) however I need to start it somewhere.There some requirement come in and it does not have specification on what the UI look likes so I thought why not give SLDS a try.

Before SLDS comes into picture, I experienced using Bootstrap and JQuery. It's simple and easy to use however because it is external javascript library it need to have extra precautions.Sometimes we got issue when the css is conflict.

Still after SLDS , developer need to code javascript in order to enhance user experience for example changing the tab, make the inactive button visible after click as SLDS does not have code for that.It only provide you the CSS how active and disable button looks like.I notice in some demo they use React JS or JQuery.

I love it because it's neat and elegant but I found it hard to customize the theme if our organization has different color scheme from Salesforce. It can be customized using Design Token using Sass, then generate our own CSS zip file. So we can't use tag   for customize CSS. Yet, this  is another new thing to learn.

I am very reluctant to use JQuery in this because I want to avoid third party libraries.While you go through design,  you might notice, all the code that control look and feel in SLDC is defined in class.Therefore we can use Java Script to manipulate CSS to change look and feel.

Here is sample of the tab that I designed using SLDS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="slds-tabs_card slds-tabs_default">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li id="first_tab_header" class="slds-tabs_default__item slds-is-active" title="First Stage Question" role="presentation">
      <a class="slds-tabs_default__link" href="javascript:showTab('first-tab',this);" role="tab" tabindex="-1" aria-selected="false" aria-controls="second_tab" id="second_tab__item">First Stage Question</a>
    </li>
       <li id="first_tab_header" class="slds-tabs_default__item" title="Second Stage Question" role="presentation">
      <a class="slds-tabs_default__link" href="javascript:showTab('second_tab',this);" role="tab" tabindex="0" aria-selected="true" aria-controls="first_tab" id="first_tab__item">Second Stage Question</a>
    </li>
  </ul>
    <!--first tab start -->

    <div id="first_tab" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="first_tab__item">
     <!--content on first tab whatever --->

    </div> 
     <!--first tab end -->
  <!--second tab start -->
   <div id="second_tab" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="second_tab__item">
     <!--content on second tab whatever --->
   </div>
<!--second tab end -->
</div>

The javascript code as below, it use classList remove and add .


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function showTab(tabName, element){
    console.log('tabName '+ tabName);
    console.log('Element '+ element);
    if(tabName=='first_tab') {
     document.getElementById('second_tab_header').classList.remove('slds-is-active');     
    document.getElementById('first_tab_header').classList.add('slds-is-active');
        
    document.getElementById('second_tab').classList.remove('slds-show');
    document.getElementById('second_tab').classList.add('slds-hide');
    
    document.getElementById('first_tab').classList.remove('slds-hide');
    document.getElementById('first_tab').classList.add('slds-show');
    
    }
    else{
    document.getElementById('first_tab_header').classList.remove('slds-is-active');     
    document.getElementById('second_tab_header').classList.add('slds-is-active');  
        
    document.getElementById('first_tab').classList.remove('slds-show');
    document.getElementById('first_tab').classList.add('slds-hide');
    document.getElementById('second_tab').classList.remove('slds-hide');
    document.getElementById('second_tab').classList.add('slds-show');
    
    }

}

The javascript code is to change the CSS value that define in class .This is very basic article but I hope it will be helpful for you.Have you tried SLDS in your organization? How do you find it?

Have a nice day.

Reference :
Lightning Design System
Using SLDS in Visualforce Page
How to change customize theme, background color in Visualforce that using Design system?

Comments

Popular posts from this blog

Search Solution Basics

When is it a good time to create a customized search solution? You're developing an external knowledge base for user support. You're in the mood for a fun Friday night. The sales reps just started using the Sales Cloud in Lightning Experience. You want to put your company branding in the search bar. What differentiates SOSL from SOQL? Syntax SOSL searches the search index instead of the org database. SOSL searches more efficiently when you don't know in which object the data resides. All of the above. SOSL works with: REST only SOAP only REST, SOAP, and Apex SOQL only What does a search for a single object look like in SOSL? FIND {cloud} RETURNING Account FIND in ACCOUNT RETURNING "cloud" FIND "cloud" in ACCOUNT FIND (cloud) RIGHT NOW! What does a search for multiple objects look like in SOSL? FIND {sneakers} RETURNING ALL ARTICLES FIND {sneakers} in ALL OBJECTS FIND {sneakers} RETURNING Product2, Content

Process Builder is not fired when field update is called from Approval Process

Scenario In Final Approvals section ; in Approval Process we have field update to update Status field. In Process Builder , we have some action that need to be done when Status field is updated in Approval Process.However this process builder is not fired. Solution To handle this, in Field Update in Approval Process , check Re-evaluated Workflow Rules after Field Change as picture below. What happen if field updated from Approval Process. Workflow - does not fires untill Re-evaluate workflow checkbox is ticked on your field update Process Builder - does not fires untill Re-evaluate workflow checkbox is ticked on your field update Trigger - will fire if conditions are matched This is explained in article here  . Field Updates That Re-evaluate Workflow Rules If  Re-evaluate Workflow Rules After Field Change  is enabled for a field update action, Salesforce  re-evaluates all workflow rules on the object if the field update results in a change to the value of the fi

Tips and Tricks : Test class for Invocable method

Issue : I got 100% coverage in my sandbox but when run validation for deployment it returns 0% coverage It turn out that in my sandbox, I am depending on Process Builder to Invocable Apex class, as long I manipulate test data that fire Process Builder it will call Invocable class. This is not useful when deploying it to Production although it gets deployed together with Process Builder. The correct way is to direct call Invocable method inside test class itself. Example of class : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 global class MyCustomObject_StatusUpdate_Util { @InvocableMethod ( label = ' Update Quote Status ' ) public static void updateQuote ( Request [] requests ) { Set < Id > setOppId = new Set < Id >(); List < SBQQ__Quote__c > listQuoteToUpdate = new List < SBQQ__Quote__c >(); for ( Request request : requests ) {