Lightning Component For Lightning Design System Tabs

Tabs - Lightning Design System
A tab keeps related content in a single container that is shown and hidden through navigation.
For more information please refer the following link.
Lightning Design System - Tabs
CODE :
Component :
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <aura:attribute name="SalesCloudURL" type="String" default="http://resources.docs.salesforce.com/208/14/en-us/sfdc/pdf/smb_sales_impl_guide.pdf"/>
   
    <aura:attribute name="ServiceCloudURL" type="String" default="https://resources.docs.salesforce.com/200/latest/en-us/sfdc/pdf/workbook_service_cloud.pdf"/>
    <aura:attribute name="MarketCloudURL" type="String" default="https://developers.gigya.com/display/GD/Salesforce+Marketing+Cloud"/>
    <aura:attribute name="AnalyticsCloudURL" type="String" default="https://resources.docs.salesforce.com/200/10/en-us/sfdc/pdf/analytics.pdf"/>
    <div class="slds-m-around--medium">
        <div class="slds-tabs--scoped">
            <ul class="slds-tabs--scoped__nav" role="tablist">
                <li aura:id="SalesId" class="slds-tabs--scoped__item slds-text-title--caps slds-active customClassForTab" title="Sales Cloud" role="presentation" ><a class="slds-tabs--scoped__link" href="javascript:void(0);" onclick="{!c.salesTab}" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-1" id="sales_linking">Sales Cloud</a></li>
                <li aura:id="ServiceId" class="slds-tabs--scoped__item slds-text-title--caps customClassForTab" title="Service Cloud" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" onclick="{!c.serviceTab}" role="tab" tabindex="-1" aria-selected="true" aria-controls="tab-default-2" id="service_linking">Service Cloud</a></li>
                <li aura:id="MarketId" class="slds-tabs--scoped__item slds-text-title--caps customClassForTab" title="Market Cloud" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" onclick="{!c.marketTab}" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="market_linking">Market Cloud</a></li>
                <li aura:id="AnalyticsId" class="slds-tabs--scoped__item slds-text-title--caps customClassForTab" title="Analytics Cloud" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" onclick="{!c.analyticsTab}" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="Analytics_linking">Analytics Cloud</a></li>
            </ul>
            <div name="tabdataName" aura:id="SalesCloudId" id="tab-default-1" class="slds-tabs--scoped__content slds-show customClassForTabData" role="tabpanel" aria-labelledby="sales_linking">
                <p>"Sales Cloud" refers to the "sales" module in salesforce.com. </p>
                <p>It includes Leads, Accounts, Contacts, Contracts, Opportunities, Products, Price books, Quotes, and Campaigns (limits apply).</p>
                <p>It includes features such as Web-to-lead to support online lead capture, with auto-response rules.</p>
                <p>Below is the link to refer sales cloud.</p>
                <p><ui:outputURL value="{!v.SalesCloudURL}" label="SALES CLOUD PDF"/>
                </p>
            </div>
            <div name="tabdataName" aura:id="ServiceCloudId" id="tab-default-2" class="slds-tabs--scoped__content slds-hide customClassForTabData" role="tabpanel" aria-labelledby="service_linking">
                <p>Salesforce Service Cloud is a customer relationship management (CRM) platform for customer service and support, based on the company's CRM software for sales professionals.</p>
                <p>Below is the link to refer service cloud.</p>
                <p><ui:outputURL value="{!v.ServiceCloudURL}" label="SERVICE CLOUD PDF"/>
                </p>
            </div>
            <div name="tabdataName" aura:id="MarketCloudId" id="tab-default-3" class="slds-tabs--scoped__content slds-hide customClassForTabData" role="tabpanel" aria-labelledby="market_linking">
                <p>Salesforce Marketing Cloud is a customer relationship management (CRM) platform for marketers that allows them to create and manage marketing relationships and campaigns with customers.</p>
                <p>Below is the link to refer market cloud.</p>
                <p><ui:outputURL value="{!v.MarketCloudURL}" label="MARKET CLOUD PDF"/>
                </p>
            </div>
            <div name="tabdataName" aura:id="analyticsCloudId" id="tab-default-4" class="slds-tabs--scoped__content slds-hide customClassForTabData" role="tabpanel" aria-labelledby="Analytics_linking">
                <p>Cloud analytics is a service model in which elements of the data analytics process are provided through a public or private cloud.</p>
                <p>Cloud analytics applications and services are typically offered under a subscription-based or utility (pay-per-use) pricing model.</p>
                <p>Below is the link to refer market cloud.</p>
                <p><ui:outputURL value="{!v.AnalyticsCloudURL}" label="ANALYTICS CLOUD PDF"/>
                </p>
            </div>
        </div>
    </div>

</aura:component>
Controller :
({
    salesTab: function(component, event, helper) {
        helper.clearAll(component, event);
        //make Sales Cloud tab active and show tab data
        component.find("SalesId").getElement().className = 'slds-tabs--scoped__item slds-active customClassForTab';
        component.find("SalesCloudId").getElement().className = 'slds-tabs--scoped__content slds-show customClassForTabData';
    },
    serviceTab: function(component, event, helper) {
        helper.clearAll(component, event);
        //make Service Cloud tab active and show tab data
        component.find("ServiceId").getElement().className = 'slds-tabs--scoped__item slds-active customClassForTab';
        component.find("ServiceCloudId").getElement().className = 'slds-tabs--scoped__content slds-show customClassForTabData';
    },
    marketTab: function(component, event, helper) {
        helper.clearAll(component, event);
        //make Market Cloud tab active and show tab data
        component.find("MarketId").getElement().className = 'slds-tabs--scoped__item slds-active customClassForTab';
        component.find("MarketCloudId").getElement().className = 'slds-tabs--scoped__content slds-show customClassForTabData';
    },
    analyticsTab: function(component, event, helper) {
        helper.clearAll(component, event);
        //make Analytics tab active and show tab data
        component.find("AnalyticsId").getElement().className = 'slds-tabs--scoped__item slds-active customClassForTab';
        component.find("analyticsCloudId").getElement().className = 'slds-tabs--scoped__content slds-show customClassForTabData';
    },
   

})
Helper :
({
    clearAll: function(component, event) {
        // this method set all tabs to hide and inactive
        var getAllLI = document.getElementsByClassName("customClassForTab");
        var getAllDiv = document.getElementsByClassName("customClassForTabData");
        for (var i = 0; i < getAllLI.length; i++) {
            getAllLI[i].className = "slds-tabs--scoped__item slds-text-title--caps customClassForTab";
            getAllDiv[i].className = "slds-tabs--scoped__content slds-hide customClassForTabData";
        }
    }

})
OutCome :





Comments

Post a Comment

Popular posts from this blog

Configur Docusign For Salesforce

Image
DocuSign For Salesforce The basic steps are : Step 1:Sign in or create a Docusign account ( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce). Step 2:Connect salesforce to Docusign( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce). . Steps To Configure Docusign For Salesforce: Step 1:  After installing the DocuSign for Salesforce managed package, select the  DocuSign Admin  tab in Salesforce to bring up the DocuSign Log In view Step 2: Log in to your DocuSign Account:  Use an existing DocuSign admin account.                                                          Or Step 2: Sign up for a Free DocuSign Trial:  This creates a new account with a complementary 30-day free trial.  The free trial account is automatically directed to the DocuSign Production environment Step 3: Connect your DocuSign account with your Salesforce account, adding DocuSign as a Trusted Network in Salesforce. Enter your Salesforce credentials,
Read more

How To Make DataTable Column Resizable

Image
First, we will use the dummy table shared by the  Lightning Design System . We need to store the original width of the selected column to calculate the new width for which we have defined the oldWidth attribute to store the value. We also need the distance of the selected column width from the left of the screen to identify the start point from where user start to drag the column. We have used mouseStart attribute for the same. We have used two mouse events to identify when user start to drag and when user is dragging the column for adjusting the width. onmousedown  will be fired when user click on the column divider element and ondrag  will be fired when user is dragging th . Component : <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >     <aura:attribute name="mouseStart" type="string" />     <aura:attribute name="
Read more

Lightning:recordForm - Lightning Data Service

Image
Lightning:recordForm is a very powerful component for editing, viewing and adding a record in lightning and combines both lightning:recordEditForm and lightning:recordViewForm. Here is an example lightning component for lightning:recordForm. Lightning Component:- <aura:component implements="flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId" access="global" >     <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress', 'Phone' , 'Type']"/>     <div class="THIS">                <lightning:recordForm                               recordId="{!v.recordId}"                               objectApiName="{!v.sObjectName}"                               fields="{!v.fieldsList}"                               columns="2"                               mode="View&qu
Read more