Tag Archives: Lightning

Cacheable Apex Method

To improve the performance of the lightning component cache Salesforce introduced storable (cacheable) in Winter’19 release. In API version 44.0 and later, you can mark an Apex method as storable (cacheable) instead of using setStorable() on every JavaScript action that calls the Apex method to centralize your caching notation for a method in the Apex class.

Here is an example to cache data returned from an Apex method for lightning component, annotate the Apex method with @AuraEnabled(cacheable=true).

Apex Class:

public class SampleAuraController {
    
    @AuraEnabled(cacheable = true)
    public static List<Account> getDirectCustomerAccount() {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, Type, Industry, Phone
                   FROM Account WHERE Type = 'Customer - Direct'];
        return accList;
    }
}

Lightning Component:

<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Declare Event Handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!--Declare Attributes-->
    <aura:attribute name="accList" type="Account[]"/>
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Account Type">Account Type</div>
                    </th>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Industry">Industry</div>
                    </th>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.accList}" var="acc">
                    <tr class="slds-hint-parent">
                        <th data-label="Account Name" scope="row">
                            <div class="slds-truncate" title="{!acc.Name}"><a href="javascript:void(0);" tabindex="-1">{!acc.Name}</a></div>
                        </th>
                        <td data-label="Account Type">
                            <div class="slds-truncate" title="{!acc.Type}">{!acc.Type}</div>
                        </td>
                        <td data-label="Industry">
                            <div class="slds-truncate" title="{!acc.Industry}">{!acc.Industry}</div>
                        </td>
                        <td data-label="Phone">
                            <div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event) {
        var action = component.get("c.getDirectCustomerAccount");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                var result = response.getReturnValue();
                component.set("v.accList", result);
            }
        });
        $A.enqueueAction(action);
    }
})

Output:

Set Lightning Tab Label Dynamically

Using lightning:workspaceAPI we can change Tab Label dynamically. Basically this component allows to access methods for programmatically controlling workspace tabs and subtabs in a Lightning console app. Here is an example to change Account record Tab Label “Account Name” to “Account Type” with “Account Name”.

Account Standard Tab Label:

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    
    <!--Attributes-->
    <aura:attribute name="accFields" type="Account"/>
    
    <!--Component Start-->
    
    <!--Lightning Workspace API-->
    <lightning:workspaceAPI aura:id="workspace"/>
    
    <!--Lightning Force Data to get Account record-->
    <force:recordData aura:id="accRecordData"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetFields="{!v.accFields}"
                      recordUpdated="{!c.handleRecordUpdate}"/>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleRecordUpdate: function(component, event, helper) {
        var accountFields = component.get("v.accFields");
        var workspaceAPI = component.find("workspace");
        workspaceAPI.getFocusedTabInfo().then(function(response) {
            var focusedTabId = response.tabId;
            workspaceAPI.setTabLabel({
                tabId: focusedTabId,
                label: accountFields.Type + ' - ' + accountFields.Name
            });
        })
    }
})

Add above created lightning component on Account Lightning Record Page.

Output:

Call A Method From Another Method in Same Lightning Controller

Lightning Component:

<aura:component>
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.methodOne}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    //Method One
    methodOne : function(component, event, helper){
        //Call methodTwo from methodone
        var action = component.get('c.methodTwo');
        $A.enqueueAction(action);
    },
    
    //Method Two
    methodTwo : function(component, event, helper){
        alert('Method 2');
    }
})

Lightning Button Group

Lightning Component:

<aura:component>
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:buttonGroup>
            <lightning:button label="Add" variant="Brand" onclick="{!c.handleAdd}" />
            <lightning:button label="Edit" onclick="{!c.handleEdit}" />
            <lightning:button label="Delete" disabled="true" onclick="{!c.handleDelete}" />
        </lightning:buttonGroup>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleAdd : function(component, event, helper) {
        var selectedButtonLabel = event.getSource().get("v.label");
        alert("Button label: " + selectedButtonLabel);
    },
    
    handleEdit : function(component, event, helper) {
        var selectedButtonLabel = event.getSource().get("v.label");
        alert("Button label: " + selectedButtonLabel);
    },
    
    handleDelete : function(component, event, helper) {
        var selectedButtonLabel = event.getSource().get("v.label");
        alert("Button label: " + selectedButtonLabel);
    }
})

Output:

Identify Salesforce User Experience Theme in Apex Class

We can use UserInfo.UITheme() and UserInfo.UIThemeDisplayed() in Apex class to determine User Experience Theme.

UserInfo.UITheme() : Returns the theme that is supposed to be used.
UserInfo.UIThemeDisplayed() : Returns the theme that is actually being used.

UserInfo.UITheme() and UserInfo.UIThemeDisplayed() will return following values.

  • Theme1—Obsolete Salesforce theme
  • Theme2—Salesforce Classic 2005 user interface theme
  • Theme3—Salesforce Classic 2010 user interface theme
  • Theme4d—Modern “Lightning Experience” Salesforce theme
  • Theme4t—Salesforce mobile app theme
  • Theme4u—Lightning Console theme
  • PortalDefault—Salesforce Customer Portal theme
  • Webstore—Salesforce AppExchange theme

Sample Code:

String themeDisplayedType = UserInfo.getUIThemeDisplayed();
String themeType = UserInfo.getUITheme();