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 related post that would you like to learn in LWC
Step 1:- Create Lightning Application : customTabApp.app
From Developer Console >> File >> New >> Lightning Application
customTabApp.app [Component Application File]
|
1 2 3 |
<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]
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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" > <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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
({ 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]
|
1 2 3 4 5 6 7 8 |
.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
Related Topics
How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component
Search Username and Create a Custom Lightning-Pill Button With Add/Remove in Salesforce Lightning Component
How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component
Adding a Custom Style CSS for Specific Role & Profile in Salesforce
very good information please visit my website :- ergautam.com
This codes and this information is very helpfull for any developer good job
You Can Join Stock Market Classes In IndoreBest NISM & Trading Share Market Technical Analysis
good code
it made my work easier
In this blog I get a great post please also visit my blog I post a great content
Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot.