Tag Archives: Lightning

Create Lightning Tabset in Component

Biswajeet   November 25, 2017   No Comments on Create Lightning Tabset in Component

Component:

<!--TabComponent-->
<aura:component>
    <div aura:id="data-entry">
        <lightning:tabset variant="default" selectedTabId="tab1" >
            <lightning:tab label="Mobile" aura:id="tab1" tabindex="1" id="tab1" title="Mobile">
                <p>Apple</p>
                <p>Samsung</p>
                <p>Lenovo</p>
            </lightning:tab>
            
            <lightning:tab label="Laptop" aura:id="tab2" tabindex="2" id="tab2" title="Laptop">
                <p>Apple</p>
                <p>Lenovo</p>
                <p>Dell</p>
            </lightning:tab>      
        </lightning:tabset>
    </div>
</aura:component>

Output:

Navigate From One Lightning Component to Another Lightning Component

Biswajeet   November 25, 2017   1 Comment on Navigate From One Lightning Component to Another Lightning Component

Component1:

<!--Component1-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div>
        Component 1   
    </div>     
    <lightning:button variant="brand" label="Navigate to Component 2" onclick="{!c.navigate}" /> 
</aura:component>

Component1 Controller:

({
    navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c:Component2"
            //You can pass attribute value from Component1 to Component2
            //componentAttributes :{ }
        });
        navigateEvent.fire();
    }
})

Component2:

<!--Component2-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div>   
        Component 2
    </div>    
    <lightning:button variant="brand" label="Navigate to Component 1" onclick="{!c.navigate}" />
</aura:component>

Component2 Controller:

({
    navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c:Component1"
            //You can pass attribute value from Component2 to Component1
            //componentAttributes :{ }
        });
        navigateEvent.fire();
    }
})

Get Picklist Values on a Lightning Component

Biswajeet   November 20, 2017   2 Comments on Get Picklist Values on a Lightning Component

In below example I’m retrieving “Account” object “Industry” picklist values and populating on lightning component using ui:inputSelect.

Apex Class:

public class AccountAuraController {
    @AuraEnabled
    public static List<String> getIndustry(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        return options;
    }
}

Component:

<!--TestComponent-->
<aura:component controller="AccountAuraController" access="global" implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="select-01">Select Industry</label>
        <div class="slds-select_container">
            <ui:inputSelect label="Industry" class="dynamic" aura:id="InputAccountIndustry" change="{!c.onPicklistChange}"/> 
        </div>
    </div>
</aura:component>

Component Controller:

({
    doInit: function(component, event, helper) {
        var action = component.get("c.getIndustry");
        var inputIndustry = component.find("InputAccountIndustry");
        var opts=[];
        action.setCallback(this, function(a) {
            opts.push({
                class: "optionClass",
                label: "--- None ---",
                value: ""
            });
            for(var i=0;i< a.getReturnValue().length;i++){
                opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
            }
            inputIndustry.set("v.options", opts);
            
        });
        $A.enqueueAction(action); 
    },
    onPicklistChange: function(component, event, helper) {
        //get the value of select option
        var selectedIndustry = component.find("InputAccountIndustry");
        alert(selectedIndustry.get("v.value"));
    },
})

Lightning App:

<!--TestApp-->
<aura:application extends="ltng:outApp" access="global">
    <c:TestComponent />
</aura:application>

Output:

Salesforce Lightning Value Providers

Biswajeet   November 19, 2017   1 Comment on Salesforce Lightning Value Providers

Value providers are a way to access data. Value providers encapsulate related values together, similar to how an object encapsulates properties and methods. The value providers for a component are v (view) and c (controller).

v (View) Value Provider: This value provider enables you to access the value of a component’s attribute in the component’s markup.

Component:

In below component the name of the attribute is defined as “whom” String, If no value is specified, it defaults to “World”. Where “v” is the value provider for a component attribute which represent the view.

<aura:application>
    <aura:attribute name="whom" type="String" default="World"/>
    Hello {!v.whom}!
</aura:application>

c (Controller) Value Provider: This value provider enables you to wire up event handlers and action for the component. Client side controller handles events within a component. It’s a JavaScript resource that defined the functions for all of the components actions.

Component:
In below component the name of the attribute is defined as “text” String, If no value is specified, it defaults to “Just a string” and “v” is the value provider for a component attribute which represent the view. The Lightning framework button wires the onclick attribute in the lightning:button component to the handleClick action in the controller.

<aura:component>
    <aura:attribute name="text" type="String" default="Just a string."/>
    <lightning:button label="Framework Button" onclick="{!c.handleClick}"/>
    
    {!v.text}
</aura:component>

Component Controller:
A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.

The controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas (as you would with any JavaScript map).

In the below Component Controller handleClick function, notice that the first argument to every action is the component to which the controller belongs. One of the most common things you’ll want to do with this component is look at and change its attribute values.

cmp.get("v.attributeName") returns the value of the attributeName attribute.

cmp.set("v.attributeName", "attribute value") sets the value of the attributeName attribute.

({
    handleClick : function(cmp, event, helper) {
        var attributeValue = cmp.get("v.text");
        console.log("String Value: " + attributeValue);
        var changeStringValue = 'Change the string value';
        cmp.set("v.text", changeStringValue);
    }
})

Each action function takes in three parameters:

cmp — The component to which the controller belongs.
event — The event that the action is handling.
helper — The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.

Display Inner SOQL Query Data in Lightning Component

Biswajeet   November 13, 2017   7 Comments on Display Inner SOQL Query Data in Lightning Component

Apex Controller:
Create below apex controller to get the inner SOQL query data.

public with sharing class AuraSampleController{
    @AuraEnabled
    public static List<Account> getAccounts() {
        List <Account> accList = [SELECT Name, Type, Industry, (SELECT FirstName, LastName From contacts) From Account LIMIT 5];
        return accList;
    }
}

Sample Lightning Component:
Create below lightning component Sample.cmp for display the inner SOQL query data on component.

<!--Sample.cmp-->
<aura:component controller="AuraSampleController">
    <aura:attribute name="accList" type="Account[]" description="List of Accounts with respective Contacts"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ul>
        <aura:iteration items="{!v.accList}" var="acc">
            <li type="dice">Account Name : {!acc.Name}</li>
            <ul>
                <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                    <li>Contact Name : {!con.FirstName} &nbsp; {!con.LastName}</li>
                </aura:iteration>
            </ul>
            <hr/>
        </aura:iteration>
    </ul>
</aura:component>

Sample Lightning Component JS Controller:
Create below JavaScript Controller for above Sample.cmp component.

({
    doInit: function(component, event, helper) {
        //Call apex class method
        var action = component.get('c.getAccounts');
        action.setCallback(this, function(response) {
            //Get state of response
            var state = response.getState();
            if (state === "SUCCESS") {
                //Set result in accList attribute on component.
                component.set('v.accList', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output: