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>
</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
}
}
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
}
}
<?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>
No comments:
Post a Comment