Tag Archives: Lightning Component

Get Selected Record Type Id in Standard Button Overrides Lightning Component

Implementing lightning:hasPageReference interface, we can access the recordTypeId in lightning JS controller. lightning:hasPageReference provides access to the pageReference attribute.

The pageReference attribute can be populated only for the following page types:

  • standard__component
  • standard__navItemPage (for Lightning component tab only)
  • standard__recordPage
  • standard__objectPage

Example:

Lightning Component:

<aura:component implements="force:hasRecordId,lightning:actionOverride,lightning:hasPageReference">
    <!--Declare Attributes-->
    <aura:attribute name="selectedRecordId" type="Id" />
    
    <!--Declare Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        Selected Record Type Id : {!v.selectedRecordId}
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit: function(component, event, helper) {
        
        //get record type Id
        var recordTypeId = component.get("v.pageReference").state.recordTypeId;
        component.set("v.selectedRecordId", recordTypeId);
        
        //get action name edit/new
        var actionName = component.get("v.pageReference").attributes.actionName;
        console.log('actionName-' + actionName);
        
        //get object API name
        var objectApiName = component.get("v.pageReference").attributes.objectApiName;
        console.log('objectApiName-' + objectApiName);
    },
})

Output:

Get Available Lightning Components In Your Org

  1. To get all available lightning components in your org, My Domain should be enabled in your Org.
  2. Log in to your org.
  3. Add componentReference/suite.app in your org domain URL.
  4. It should look like this :  https://yourorgdomain.lightning.force.com/lightning.force.com/componentReference/suite.app
  5. It will open Salesforce Lightning Component Library.
  6. Here you can see all the available components of your Org along with Salesforce Lightning Component examples.

Lightning Formatted URL

A lightning:formattedUrl component displays a read-only representation of a URL as a hyperlink with an href attribute. The link can be a relative or absolute URL.

Example:

<aura:component>  
    <lightning:formattedUrl value="https://www.google.com" tooltip="Google" label="Click to Open" target="_blank" />
</aura:component>

Output:

Lightning Vertical Navigation

A lightning:verticalNavigation component represents a list of links that’s only one level deep, with support for overflow sections that collapse and expand. Here is an example of Lightning Vertical Navigation.

Apex Class:

public with sharing class AuraSampleController{
    
    @AuraEnabled
    public static List<Account> getAccounts(){
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, AccountNumber, Industry From Account LIMIT 10];
        return accList;
    }
}

Lightning Component:

<aura:component controller="AuraSampleController" Implements="flexipage:availableForRecordHome,force:hasRecordId">
    
    <!--Declare Attributes-->
    <aura:attribute name="selectedaccId" type="Id" />
    <aura:attribute name="accList" type="Account[]" />
    
    <!--Declare Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <lightning:layout>
            <lightning:layoutItem>
                <lightning:verticalNavigation onbeforeselect="{!c.handleBeforeSelect}"
                                              selectedItem="{!v.selectedaccId}"
                                              onselect="{!c.handleOnSelect}">
                    <lightning:verticalNavigationSection label="Select Account">
                        <aura:iteration items="{!v.accList}" var="acc" indexVar="index">
                            <lightning:verticalNavigationItem label="{!acc.Name}" name="{!acc.Id}" />
                        </aura:iteration>
                    </lightning:verticalNavigationSection>
                </lightning:verticalNavigation>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-medium">
                <p>You have selected : {!v.selectedaccId}</p>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit: function(component, event, helper) {
        helper.getAccountList(component, event);
    },
    
    handleBeforeSelect: function(component, event) {
        //Write your logic before select of any item
    },
    
    handleOnSelect: function(component, event) {
        //Write your logic on select of any item
    }
})

Lightning JS Helper:

({
    getAccountList: function(component, event) {
        var action = component.get("c.getAccounts");
        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:

Invoke Visualforce Page Javascript Method From Lightning Component

Lightning Component:

<!--SampleComponent.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Declare Attributes-->
    <aura:attribute name="vfMsgMethod" type="object" description="this attribute is for visualforce page javascript method"/>
    
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning Controller:

({
    doAction : function(component, event, helper) {
        var msg = 'Welcome to Salesforce Ohana';
        var msgMethod = component.get("v.vfMsgMethod");
        msgMethod(msg, function(){
            //handle callback
        });
    }
})

Lightning App:

<!--SampleApp.app--> 
<aura:application extends="ltng:outApp" access="global">
    <!--Lightning component-->
    <aura:dependency resource="c:SampleComponent"/>
</aura:application>

Visualforce Page:

<apex:page sidebar="false" showHeader="false">
    <apex:includeLightning />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer"/>
    
    <script type="text/javascript">
    //Create Lightning Component
    $Lightning.use("c:SampleApp", function() {
        $Lightning.createComponent("c:SampleComponent", { 
            vfMsgMethod : getMessage, //Method to call from lightning component
        },"LightningContainer", function(component) {
            console.log('Component created');
        });
    });
    
    //Function to call from Lightning Component
    function getMessage(welcomeMsg){
        alert(welcomeMsg);
    }
    </script>
</apex:page>

Output: