How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript
Source page:- w3web.net
Files we used in this post example:-
customTabApp.appLightning ApplicationIt is used for call the component to preview on browser.
customTabCmp.cmp
Lightning ComponentIt is used for create a custom tabs on lightning component .
customTabCmpController.js
JavaScript Controller FileIt is used for click function for show and hide the custom tabs section.customTabCmp.cssComponent Style CSSIt is used for create custom Style CSS for active tab highlight section.
Live Demo
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>
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>
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’);
},
})
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;}
Related Topics
- Create custom expand all/ collapse all for accordion section rows table based in lightning component
Source page:- w3web.net
