Wednesday, 11 March 2020

Record Type Selection in LWC and Open New object page


In lightning web component(LWC) we don't need to call server to retrieve record type details. There is a native adapter available to retrieve object specific record types .
we have to use the wire adapter getObjectInfo to get the metadata about a specific object. As part of successful response it returns describing fields, child relationships, record type,etc.

In this example, we are using Account Object where i have overridden the new button using lightning component and in turns it's invoking LWC component  to display all record types .


let see the output..














on click Next button we are calling "handlechange" function to fetch selected record id and passing it to <lightning-record-form> to open new standard Account page for selected record type.










RecordtypePoc.html

<template>
    <div if:true={openmodel}>
        <template if:true={objectInfo.data}>
            <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick={closeModal}>
                            X<span class="slds-assistive-text">Cancel</span>
                        </button>
                        <h2 id="header43" class="slds-text-heading--medium">New Account</h2>
                    </div>
                    
                    <div class="slds-modal__content slds-p-around--medium">
                        <div class="slds-grid slds-wrap">
                            <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                                <div class="slds-align--absolute-center">Select a Record Type</div>                            
                           </div>
                            <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                                <lightning-combobox name="recordType" label="" placeholder="Choose Account record type"
                                    value={value} options={recordTypeId} onchange={changeHandler}>
                                </lightning-combobox>
                            </div>&nbsp; &nbsp;
                        </div>                   
                    </div>
                    <div class="slds-modal__footer">
                        <lightning:button class="slds-button slds-button--neutral" >Cancel</lightning:button>
                        <lightning:button class="slds-button slds-button--brand" onclick={handleChange}>Next</lightning:button>
                    </div>
                </div>
                </div>
                <div class="slds-backdrop slds-backdrop--open"></div>
            
        </template>
    </div>
        <template  if:true={recordTypeIdVal}> 
            
        <lightning-record-form
            object-api-name="Account"
            record-type-id={recordTypeIdVal}
            fields={fields}
            onsuccess={handleSuccess}>
    </lightning-record-form>
        </template>
</template>


recordtypePoc.js 


import { LightningElement, api, wire, track } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class RecordFormWithRecordType extends LightningElement {
// ApI name for App Builder setup
    @api recordId;
    @api objectApiName;
    @api optionVal;

    @track objectInfo;
    @track recordTypeIdVal;
    @track openmodel = true;
 
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;
    get recordTypeId() {
     
    // Returns a map of record type Ids
     
       var recordtypeinfo = this.objectInfo.data.recordTypeInfos;
       var uiCombobox = [];
   
      console.log("recordtype" + recordtypeinfo);
      for(var eachRecordtype in  recordtypeinfo)//this is to match structure of lightning combo box
      {
        if(recordtypeinfo.hasOwnProperty(eachRecordtype))
        uiCombobox.push({ label: recordtypeinfo[eachRecordtype].name, value: recordtypeinfo[eachRecordtype].name })
      }
      //console.log('uiCombobox' + JSON.stringify(uiCombobox));
      return uiCombobox;
    }
    changeHandler(event){
        this.optionVal=event.target.value;
    }
    handleChange(event) {
         // Returns a map of record type Ids
         const rtis = this.objectInfo.data.recordTypeInfos;
         this.recordTypeIdVal=(Object.keys(rtis).find(rti => rtis[rti].name === this.optionVal));
         this.closeModal();
        }

        handleSuccess(event) {
            const evt = new ShowToastEvent({
                title: "Account created",
                message: "Record ID: " + event.detail.id,
                variant: "success"
            });
            this.dispatchEvent(evt);
        }
        openModal() {
            this.openmodel = true
        }
        closeModal() {
            this.openmodel = false
        }

    }

recordtypePoc.js-meta.xml


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightning__HomePage</target>
    </targets>

</LightningComponentBundle>

Getting started with Heroku

I am familiar with the heroku for quite long time, have seen lots of people are interested with it but not sure from where its need to Start...