Salesforce Visual flows

Lightning Component For Custom RecordType Selection

Apex Controller:

Here, we are getting List of RecordTpes from Account Object.

public class RecordTypeSelectorController {
 
    @AuraEnabled
    public static List<RecordType> getListOfRecordType(){
        String query = 'SELECT Id,Name FROM RecordType WHERE SobjectType =\''+'Account'+'\' ';
        List<RecordType> rtNames = new List<RecordType>();
        Schema.SObjectType  objType = Account.SObjectType;     
        for(RecordTypeInfo rt : objType.getDescribe().getRecordTypeInfos()){
            System.debug('rt.getName()'+rt.getName());
            rtNames.add(new RecordType(Id = rt.getRecordTypeId(),Name = rt.getName()));
            System.debug('rtNames'+rtNames);
        } 
        return rtNames; 
    }
}


Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" controller="RecordTypeSelectorController" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" access="public"/>
    <aura:attribute name="recordTypes" type="String[]" access="public"/>
    <div class="slds">
        <div class="demo-only" style="height: 640px;" id="newClientSectionId">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                            <lightning:icon iconName="utility:clear" size="small" alternativeText="Indicates approval"/> 
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">RecordType Selection</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <aura:iteration items="{!v.recordTypes}" var="rt">
                            <ol class="slds-list--vertical slds-list--vertical-space">
                                <input type="radio" value="{!rt.Name}" name="recordTypeRadio" id="{!rt.Id}" style="margin-right: 5px;" />{!rt.Name}
                            </ol> 
                        </aura:iteration>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_brand" onclick="{!c.createRecordFun}">Next</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </div>

</aura:component>

JavaScript Controller:

Here, we are using force:createRecord event. This event tells app to use standared create record page.

({
    createRecordFun : function (component, event, helper) {
        var rtDet = document.querySelector('input[name="recordTypeRadio"]:checked');
        if(rtDet != null) {
            document.getElementById("newClientSectionId").style.display = "none" ;
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
                "entityApiName": "Account",
                "recordTypeId":rtDet.id
            });
            createRecordEvent.fire();
        } 
    },
    doInit : function(component, event, helper) { 
        helper.RecordTypeSelectorController(component); 
    }

})

JavaScript Helper:

({
   RecordTypeSelectorController: function(component) {
    var action = component.get("c.getListOfRecordType");
    action.setCallback(this, function(actionResult) {
        var infos = actionResult.getReturnValue();
        component.set("v.recordTypes", infos);
    });
    $A.enqueueAction(action);
  }

})

Note :

This force:createRecord event is handled by the one.app container.It's supported in Lightning Experience and salesforce1 only.This event presents a standard page to create a record.

Lightning:recordForm

"Lightning:recordForm" which suppresses using "lightning:recordEditForm and lightning:recordViewForm" separately to handle record view and edit.

"lightning:recordForm" is very powerful component for editing,viewing and adding
a record in lightning.

<aura:attribute name="fieldArray" type="String[]"
default="['Name','Email','Phone','AccountId']"/>

<lightning:recordForm aura:id="recordForm"
recordId="{!v.recordId}"
objectApiName="contact"
fields="{!v.fieldArray}"/>

Note : "ObjectApiName" is always required while using lightning:recordForm component.

Lightning Component Facets

A facet attribute is similar to any other component attributes,but instead of having a
primitive,collection,sObject or custom class type,it has an "Aura.Component[]" type.
And instead of holding those kind of data,it will hold HTML markups or even another
component.

Note :
A facet is implicitly defined in each component, the body facet.When we reference a subcomponent
writing some HTML markups between the tags that include the component into the container,
we are implicitly setting the body facet.

ex :

<!-- <c:SubComponent> -->


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="topArea" type="Aura.Component[]"/>
    <aura:attribute name="leftArea" type="Aura.Component[]"/>
    <aura:attribute name="rightArea" type="Aura.Component[]"/>
    <aura:attribute name="bottomArea" type="Aura.Component[]"/>
    <div class="mytop">
        {!v.topArea}
    </div>
    <div class="mymiddle">
        <div class="myleft">
            {!v.leftArea}
        </div>
        <div class="myright">
            {!v.rightArea}
        </div>
    </div>   
    <div>
        I am the body!: {!v.body}
    </div>
     <div class="mybottom">
        {!v.bottomArea}
    </div>
</aura:component>

<!--<c:BottomComponent/> -->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<p>Bottom Area Component html text</p>
</aura:component>

<!--<c:ParentContainer/> -->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <c:SubComponent>
    <aura:set attribute="topArea">
        <h1>Top Area component</h1>
    </aura:set>
    <aura:set attribute="leftArea">
        <ul>
            <li>Left area app</li> 
            <li>Left area Menu</li> 
            <li>left area App Builder</li> 
        </ul>
    </aura:set>
    <aura:set attribute="rightArea">
            <p>Right area !</p>
        </aura:set>
        <aura:set attribute="bottomArea">
           <c:BottomComponent></c:BottomComponent>
        </aura:set>
    </c:SubComponent>
</aura:component>