How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript | how to add/remove tabs in Salesforce lightning component

Post Views: 1,925

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.

Don’t forget to check out:- 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>

<br/><br/>
    <p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

    </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

131

132

133

134

<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>

<p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></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;}

.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;}

TechW3web:- To know more, Use this Link

Further post that would you like to learn in lightning component.

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

Author of w3web.net

Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time.

9 thoughts on “How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript | how to add/remove tabs in Salesforce lightning component”

Er. Gautam

September 1, 2020 at 8:18 am

very good information please visit my website :- ergautam.com
How to create e-commerce single page tabs

September 2, 2020 at 2:31 am

This codes and this information is very helpfull for any developer good job
Stock Homes

September 9, 2020 at 7:33 am

You Can Join Stock Market Classes In IndoreBest NISM & Trading Share Market Technical Analysis
pooja

October 3, 2020 at 4:57 am

good code
it made my work easier
kashifhossain

October 3, 2020 at 8:48 pm

In this blog I get a great post please also visit my blog I post a great content
pinjara khubsurti kaa

December 14, 2020 at 6:44 pm

Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot.
David

May 4, 2021 at 6:56 am

In this blog I get a great post please also visit my blog I post a great content …
buy Google voice number
buy twitter accounts
Buy Instagram pva accounts
Buy Facebook pva accounts
muhammad kashif bilal

July 23, 2021 at 1:28 pm

Great Sir Thank You SO Much

40 High Demand Gigs on Fiverr – Most Selling Gigs on Fiverr 2021
Fiona Xu

August 10, 2021 at 6:16 am

Amazing article, and I have learned a lot

How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript | how to add/remove tabs in Salesforce lightning component

Files we used in this post example:-

customTabApp.app [Component Application File]

customTabCmp.cmp [Lightning Component File]

customTabCmpController.js [JavaScript Controller]

customTabCmp.css [Style CSS]

Related Topics | You May Also Like

Author of w3web.net

9 thoughts on “How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript | how to add/remove tabs in Salesforce lightning component”

Leave a Comment Cancel reply