How to change index of an element in an array (list) in aura component - Salesforce Globe For You

 How to change index of an element in an array (list) in aura component  - Salesforce Globe For You 

ChangeIndexOfAnElement.cmp

<aura:component >

    <aura:attribute name="fruits" type="List" default="['Mango','Apple','Orange','Kiwi']"/>

    <aura:attribute name="oldIndex" type="Integer"/>

    <aura:attribute name="newIndex" type="Integer"/>

    The available fruits are <br/>

    <aura:iteration items="{!v.fruits}" var="fruit" indexVar="index">

        {!index}) {!fruit}<br/>

    </aura:iteration>

    <br/>

    <lightning:input type="number" name="beforeIndex" label="Enter current Index" value="{!v.oldIndex}"/>

<lightning:input type="number" name="after Index" label="Enter new Index" value="{!v.newIndex}"/>

    <br/><lightning:button variant="brand" label="Change Index" title="Brand action" onclick="{!c.changeIndex}" />

</aura:component>

ChangeIndexOfAnElementController.js

({

changeIndex : function(component, event, helper) {

var oldIndex =component.get("v.oldIndex");

        var newIndex = component.get("v.newIndex");

        var fruits = component.get("v.fruits");

        if(newIndex >=fruits.length){

            var temp = newIndex - fruits.length+1;

            while(temp--){

                fruits.push(undefined);

            }

            

        }

        fruits.splice(newIndex,0,fruits.splice(oldIndex,1)[0]);

        component.set("v.fruits",fruits);

        

}

})

TestApp.app

<aura:application extends="force:slds">

<c:ChangeIndexOfAnElement/>

</aura:application>

Output:

How to display index of an element in a list in aura component - Salesforce Globe For You

 How to display index of an element in a list in aura component  - Salesforce Globe For You 

Solution:Use indexVar attribute of aura:iteration to display index of an element

Example:

IndexOfElement.cmp

<aura:component >

    <aura:attribute name="CricketPlayers" type="List" default="['Sachin','Kohli','Dhoni','Rohit']"/>

    The Cricket Players are <br/>

    <aura:iteration items="{!v.CricketPlayers}" var="player" indexVar="index">

        {!index+1}) {!player}<br/>

    </aura:iteration>

</aura:component>

TestApp.app

<aura:application extends="force:slds">

<c:IndexOfElement/>

</aura:application>

Output:

For loop in aura component or how to iterate a list in aura component - Salesforce Globe For You

 For loop in aura component  - Salesforce Globe For You 

ForLoop.cmp

<aura:component >

    <aura:attribute name="fruits" type="List" default="['Mango','Apple','Orange','Kiwi']"/>

    The available fruits are <br/>

    <aura:iteration items="{!v.fruits}" var="fruit" indexVar="index">

        {!index+1}) {!fruit}<br/>

    </aura:iteration>

</aura:component>

TestApp.app

<aura:application extends="force:slds">

<c:ForLoop/>

</aura:application>

Output:

Soql query to fetch list of lwc components - Salesforce Globe For You

 query lwc components  - Salesforce Globe For You 

Go to Developer console and click on 'Query Editor' tab and make sure the tooling API checkbox is clicked.

Use the following query to retrieve LWC components

Select id, masterLabel, apiVersion from LightningComponentBundle

Output:

How to query aura component Salesforce lightning - Salesforce Globe For You

How to query aura components  - Salesforce Globe For You 

Open anonymous window in developer console and execute the piece of code below.

List<AuraDefinitionBundle> lstAuraDefinitionBundle = new List<AuraDefinitionBundle>();

lstAuraDefinitionBundle = [SELECT Id, DeveloperName, apiVersion,description FROM AuraDefinitionBundle];

system.debug('lstAuraDefinitionBundle'+lstAuraDefinitionBundle);

Output:

How to display multiple tabs in aura component Salesforce lightning - Salesforce Globe For You

How to display multiple tabs in aura component  - Salesforce Globe For You 

Multiple tabs.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="tabId" type="String" default="2"/>

    <aura:handler name="change" value="{!v.tabId}" action="{!c.handleTabChange}"/>

    <lightning:tabset aura:id="tabs" selectedTabId="{!v.tabId}">

        <lightning:tab label="Tab One" id="tab1">

           Tab One Content inside the tab

            <lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />

        </lightning:tab>

        <lightning:tab label="Tab Two" id="tab2">

            Tab Two Content inside the tab

            <lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />

        </lightning:tab>

        <lightning:tab label="Tab Three" id="tab3">

            Tab three Content inside the tab

            <lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />

        </lightning:tab>

    </lightning:tabset>

</aura:component>

MultipleTabsController.js

({

    doInit : function(component, event, helper) {

        component.find("tabs").set("v.selectedTabId", "tab1");

    },changeTab: function(component) {

        var currentTabId = component.get("v.tabId");

        if(currentTabId =='tab1') {

            component.set("v.tabId", "tab2");

        }

        if(currentTabId =='tab2') {

            component.set("v.tabId", "tab3");

        }

    },

    handleTabChange: function(component) {

        var selected = component.get("v.tabId");

        component.find("tabs").set("v.selectedTabId", selected);

    }

})

MultipleTabsApp.app

<aura:application extends="force:slds">

<c:MultipleTabs/>

</aura:application>

Output: