How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript

Post Views: 1,502

Hey guys, today in this post we are going to learn about how to create a Customizable Tabs for Salesforce Lightning Component pages using component controller Javascript.

How to Create a Vertical Tab Dynamically & Customisable in Lightning Component Click Here For More Information

Files we used in this post example:-

customTabApp.app	Lightning Application	It is used for call the component to preview on browser.
customTabCmp.cmp	Lightning Component	It is used for create a custom tabs on lightning component .
customTabCmpController.js	JavaScript Controller File	It is used for click function for show and hide the custom tabs section.
customTabCmp.css	Component Style CSS	It is used for create custom Style CSS for active tab highlight section.

Live Demo

Other related post that would you like to learn in lightning component.

Get Picklist Values Dynamically and display Picklist values & Radio Buttons value in Lightning Component Salesforce
Retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce
Write a Batch Apex to Update all the Industry and Type Field of Account and re-call batch class from batch Using Database.executeBatch in finish method
Writing a Custom Schedulable Batch Apex Class and Schedule job Weekly at Specific Date and Time in Salesforce
A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS)
How to Avoid Duplicate Name Record Simply Using a Apex Controller Method and Validating a Lightning Input Form with Email Regex Pattern Checked and Submit Form on Click Button in Salesforce Lightning
A Simple Example of Application Event Handling Between two Custom Lightning Components in Salesforce
How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript

Step 1:- Create Lightning Application : customTabApp.app

From Developer Console >> File >> New >> Lightning Application

customTabApp.app [Component Application File]

   <aura:application extends="force:slds">
	<c:customTabCmp/>
</aura:application>

<aura:application extends="force:slds">

<c:customTabCmp/>

</aura:application>

Step 2:- Create Lightning Component : customTabCmp.cmp

From Developer Console >> File >> New >> Lightning Component

customTabCmp.cmp [Lightning Component File]

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<div class="slds slds-p-around--medium">
       <div class="slds-tabs_default" id="sldsTabItemOver">          
          <div class="slds-tabs_default__content slds-show" role="tabpanel">
            <div class="slds-tabs_scoped">
              <ul class="slds-tabs_scoped__nav">
                <li class="slds-tabs_scoped__item slds-is-active" id="tabItem3webnet0">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet0" onclick="{!c.tabActionw3webnet}">Blog</a>
                </li>
                <li class="slds-tabs_scoped__item" id="tabItem3webnet1">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet1" onclick="{!c.tabActionw3webnet}">Tutorial</a>
                </li>
                <li class="slds-tabs_scoped__item" id="tabItem3webnet2">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet2" onclick="{!c.tabActionw3webnet}">Technical Guide</a>
                </li>
                  
                 <li class="slds-tabs_scoped__item" id="tabItem3webnet3">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet3" onclick="{!c.tabActionw3webnet}">JQuery</a>
                </li> 
                 
                 <li class="slds-tabs_scoped__item" id="tabItem3webnet4">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet4" onclick="{!c.tabActionw3webnet}">Sitemap</a>
                </li> 
                  
                <li class="slds-tabs_scoped__item" id="tabItem3webnet5">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet5" onclick="{!c.tabActionw3webnet}">About Us</a>
                </li> 
                  
                 <li class="slds-tabs_scoped__item" id="tabItem3webnet6">
                  <a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet6" onclick="{!c.tabActionw3webnet}">Contact Us</a>
                </li> 
                  
              </ul>
                
              <div id="activetabItem3webnet0" class="slds-tabs_scoped__content slds-show">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/blogging-complete-guide-for-beginners/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/07/blogGuide.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>How to start a blog for free that makes money | A simple 8 easy guide step-by-step for beginners</b></p><br/>
                      <p>In this post we are going to learn about How to start a blog and make money. Easy Guide Step-By-Step for Beginners follow given points.</p><br/>
                      <p>Blog is a platform where you can share your personal experience that you have in expertise. You can start it from such like your Hobbies, Business, Sports, Medical Equipment, Education, Network Marketing etc..</p><br/>
                      <p>So think about yourself that in which fields you are much more knowledge and create a blog on the same field.</p><br/>
                      
                      <p>There are 8 easy steps to start a blogging...<span class="readMore"><a href="https://www.w3web.net/blogging-complete-guide-for-beginners/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet1" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/update-count-of-child-record-based-on-parent-object-value/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/08/employeeSizeTrigger.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>Trigger to update count of child records with custom field of parent object</b></p><br/>
                      <p>Hey guys, today in this post we are going to learn about how to update count of child records with custom field value into parent object using trigger map list in Salesforce.</p><br/>
                      <p>Real time scenarios:- Write a trigger on parent object where create a custom field as Employee (Number type).</p><br/>
                      <p>If user insert the parent record, the child record should be automatic inserted equal to the same value of employee...<span class="readMore"><a href="https://www.w3web.net/update-count-of-child-record-based-on-parent-object-value/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet2" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/how-to-voice-typing-in-computer-from-mobile/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/07/remote-app2-1-1.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>How to voice typing in computer from mobile?</b></p><br/>
                      <p>Many people writing a Blog or Article. There can be multiple pages in a single article, if you have not good hand typing speed you will be face so many difficulty.</p><br/>
                      <p>If you want to write a article English or Hindi very fast than go through the “Remote Mouse App”. It is a free app and available on google app store, or you can download from your laptop directly go through this link “https://www.remotemouse.net/”. This App helps you to write a article English/Hindi very fast and save the plenty of time....<span class="readMore"><a href="https://www.w3web.net/how-to-voice-typing-in-computer-from-mobile/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet3" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/custom-sidebar-navigation-menu-with-submenu/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/08/sidebarNavigationFeature.png" width="200" height="150"/>
                          </a>
                      </div>                       
                      <p><b>How to Build a Custom Left Sidebar Navigation Menu with Submenu using HTML, CSS and JQuery</b></p><br/>
                      <p>In this post we are going to learn about how to create a custom left sidebar Navigation Menu with Submenu using HTML, CSS and JQuery...<span class="readMore"><a href="https://www.w3web.net/custom-sidebar-navigation-menu-with-submenu/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet4" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/all-published-post/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/08/sitemap.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>Sitemap</b></p>
                      <p>Here you can find all of the published post on <a href="https://www.w3web.net/">w3web.net</a></p><br/>
                      <p><span><a href="https://www.w3web.net/how-to-validate-child-component-from-parent-component/">How to validate child component from parent component on click button using aura method in lightning component</a></span></p><br/>
                      <p><span><a href="https://www.w3web.net/expand-all-collapse-all-rows-in-lightning-component/">Create custom expand all/ collapse all for accordion section rows table based in lightning component</a></span></p><br/>
                      <p><span><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">Editing row, Saving row and Removing rows Dynamically in Lightning component Salesforce</a></span></p><br/>
                      <p><span class="readMore"><a href="https://www.w3web.net/all-published-post/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet5" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/about-us/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/08/aboutus.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>About Us</b></p>
                      <p><b><a href="https://www.w3web.net/">w3web.net</a></b> is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much more…</p><br/>
                      <p>I am Web and Mobile application developer and sharing knowledge is my passion. Web application development is my interest but it is not biggere then my dream....<span class="readMore"><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">Read more...</a></span></p>
                  </div>
               </div>
              <div id="activetabItem3webnet6" class="slds-tabs_scoped__content slds-hide">
                  <div class="tabContent">
                      <div class="postImage">					
                          <a href="https://www.w3web.net/contact-us/">
                              <img src="https://www.w3web.net/wp-content/uploads/2020/08/contactUs.png" width="200" height="150"/>
                          </a>
                      </div> 
                      <p><b>Contact Us</b></p>
                      <p>Thank you for contact with us. you can write us at the below contact form for any of your queries / clarifications.</p><br/>
                      <p>You can also email us for a faster response. <b>E-mail:- vijayk085@gmail.com</b>...<span class="readMore"><a href="https://www.w3web.net/contact-us/">Read more...</a></span></p>
                  </div>
               </div>                  
            </div>
          </div>
          
        </div>
    </div>
</aura:component>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet1" onclick="{!c.tabActionw3webnet}">Tutorial</a>

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet2" onclick="{!c.tabActionw3webnet}">Technical Guide</a>

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet3" onclick="{!c.tabActionw3webnet}">JQuery</a>

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet4" onclick="{!c.tabActionw3webnet}">Sitemap</a>

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet5" onclick="{!c.tabActionw3webnet}">About Us</a>

</li>

<a class="slds-tabs_scoped__link" href="javascript:void(0);" name="tabItem3webnet6" onclick="{!c.tabActionw3webnet}">Contact Us</a>

</li>

</ul>

</a>

</div>

<p><b>How to start a blog for free that makes money | A simple 8 easy guide step-by-step for beginners</b></p><br/>

<p>In this post we are going to learn about How to start a blog and make money. Easy Guide Step-By-Step for Beginners follow given points.</p><br/>

<p>Blog is a platform where you can share your personal experience that you have in expertise. You can start it from such like your Hobbies, Business, Sports, Medical Equipment, Education, Network Marketing etc..</p><br/>

<p>So think about yourself that in which fields you are much more knowledge and create a blog on the same field.</p><br/>

<p>There are 8 easy steps to start a blogging...<span class="readMore"><a href="https://www.w3web.net/blogging-complete-guide-for-beginners/">Read more...</a></span></p>

</div>

</a>

</div>

<p><b>Trigger to update count of child records with custom field of parent object</b></p><br/>

<p>Hey guys, today in this post we are going to learn about how to update count of child records with custom field value into parent object using trigger map list in Salesforce.</p><br/>

<p>Real time scenarios:- Write a trigger on parent object where create a custom field as Employee (Number type).</p><br/>

<p>If user insert the parent record, the child record should be automatic inserted equal to the same value of employee...<span class="readMore"><a href="https://www.w3web.net/update-count-of-child-record-based-on-parent-object-value/">Read more...</a></span></p>

</div>

</a>

</div>

<p><b>How to voice typing in computer from mobile?</b></p><br/>

<p>Many people writing a Blog or Article. There can be multiple pages in a single article, if you have not good hand typing speed you will be face so many difficulty.</p><br/>

<p>If you want to write a article English or Hindi very fast than go through the “Remote Mouse App”. It is a free app and available on google app store, or you can download from your laptop directly go through this link “https://www.remotemouse.net/”. This App helps you to write a article English/Hindi very fast and save the plenty of time....<span class="readMore"><a href="https://www.w3web.net/how-to-voice-typing-in-computer-from-mobile/">Read more...</a></span></p>

</div>

</a>

</div>

<p><b>How to Build a Custom Left Sidebar Navigation Menu with Submenu using HTML, CSS and JQuery</b></p><br/>

<p>In this post we are going to learn about how to create a custom left sidebar Navigation Menu with Submenu using HTML, CSS and JQuery...<span class="readMore"><a href="https://www.w3web.net/custom-sidebar-navigation-menu-with-submenu/">Read more...</a></span></p>

</div>

</a>

</div>

<p><b>Sitemap</b></p>

<p>Here you can find all of the published post on <a href="https://www.w3web.net/">w3web.net</a></p><br/>

<p><span><a href="https://www.w3web.net/how-to-validate-child-component-from-parent-component/">How to validate child component from parent component on click button using aura method in lightning component</a></span></p><br/>

<p><span><a href="https://www.w3web.net/expand-all-collapse-all-rows-in-lightning-component/">Create custom expand all/ collapse all for accordion section rows table based in lightning component</a></span></p><br/>

<p><span><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">Editing row, Saving row and Removing rows Dynamically in Lightning component Salesforce</a></span></p><br/>

</div>

</a>

</div>

<p><b>About Us</b></p>

<p><b><a href="https://www.w3web.net/">w3web.net</a></b> is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much more…</p><br/>

<p>I am Web and Mobile application developer and sharing knowledge is my passion. Web application development is my interest but it is not biggere then my dream....<span class="readMore"><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">Read more...</a></span></p>

</div>

</a>

</div>

<p><b>Contact Us</b></p>

<p>Thank you for contact with us. you can write us at the below contact form for any of your queries / clarifications.</p><br/>

<p>You can also email us for a faster response. <b>E-mail:- vijayk085@gmail.com</b>...<span class="readMore"><a href="https://www.w3web.net/contact-us/">Read more...</a></span></p>

</div>

</aura:component>

Step 3:- Create Lightning Component : customTabCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

customTabCmpController.js [JavaScript Controller]

   ({
	tabActionw3webnet : function(component, event, helper) {
		var thisObj = event.target.name;
        var sldsTabItemOver = document.getElementById('sldsTabItemOver');
        var scopedItemAll =  sldsTabItemOver.querySelectorAll('.slds-tabs_scoped__item');
        var scopedContent =  sldsTabItemOver.querySelectorAll('.slds-tabs_scoped__content');
        
        var isActive = document.getElementById(thisObj).classList.contains('slds-is-active');
       
        for(var i=0; i<scopedItemAll.length; i++){
            scopedItemAll[i].classList.remove('slds-is-active');
            scopedContent[i].classList.add('slds-hide');
        }
        
        document.getElementById(thisObj).classList.add('slds-is-active'); 
        document.getElementById('active'+thisObj).classList.remove('slds-hide');
        document.getElementById('active'+thisObj).classList.add('slds-show');
        
	},
})

({

tabActionw3webnet : function(component, event, helper) {

var thisObj = event.target.name;

var sldsTabItemOver = document.getElementById('sldsTabItemOver');

var scopedItemAll = sldsTabItemOver.querySelectorAll('.slds-tabs_scoped__item');

var scopedContent = sldsTabItemOver.querySelectorAll('.slds-tabs_scoped__content');

var isActive = document.getElementById(thisObj).classList.contains('slds-is-active');

for(var i=0; i<scopedItemAll.length; i++){

scopedItemAll[i].classList.remove('slds-is-active');

scopedContent[i].classList.add('slds-hide');

}

document.getElementById(thisObj).classList.add('slds-is-active');

document.getElementById('active'+thisObj).classList.remove('slds-hide');

document.getElementById('active'+thisObj).classList.add('slds-show');

})

Step 4:- Create Lightning Component Style: customTabCmp.css

From Developer Console >> File >> New >> Lightning Component >> Component Style CSS

customTabCmp.css [Style CSS]

  .THIS {
}
.THIS  .slds-tabs_scoped__item.slds-is-active .slds-tabs_scoped__link{color:#b70e01; text-decoration:none;}
.THIS .tabContent{display:block; padding:5px 0 5px 0px; font-size:14px; overflow: hidden;}
.THIS .tabContent .postImage{display: inline-block; float: left; margin-right: 10px;}
.THIS .readMore{font-size:14px; font-weight:bold; display:inline-block; padding:0 0 0 10px;}
.THIS .readMore a{color:#ff0000; text-decoration:none;}
.THIS .readMore a:hover{color:#04a5ca; text-decoration:underline;}