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

Post Views: 647

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.

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 post that would you like to learn

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

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

Further post that would you like to learn

5 thoughts on “How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript”

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

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

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

5 thoughts on “How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript”

Leave a Comment Cancel reply

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

5 thoughts on “How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript”

Leave a Comment Cancel reply

Contribute to Support If Some Value Added in Your Project or Website