Tuesday, August 14, 2018

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?

No comments:

Post a Comment