Record Type Selector in Lightning Web Component(lwc)

This post explains how to implement record type selector in lightning web components(lwc)

To get the record type info in lightning web components we have to use the wire adapter getObjectInfo this wire adapter gets metadata about a specific object. The response includes metadata describing fields, child relationships, record type, and theme.

In this example, I am using the Account Object. getObjectInfo wire adapter returns the account object info.

RecordTypesInLWC.html

<template>
    <lightning-card title="Record Type Selector in Lightning Web Component">
            <lightning-layout multiple-rows="true" vertical-align="end">
                <lightning-layout-item size="6" small-device-size="2" medium-device-size="4" large-device-size="4" padding="around-small">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <lightning-combobox name="recordTypes"
                                                    label="Account Record Types"
                                                    value={selectedValue}
                                                    placeholder="-Select-"
                                                    options={options}
                                                    onchange={handleChange} ></lightning-combobox>
                            </div>
                        </div>
                </lightning-layout-item>
            </lightning-layout><br/>
        <div style="margin-left:3%;">
            <div if:true={selectedValue}>
                Selected Record Type Id: <b>{selectedValue}</b>
            </div>
        </div>
    </lightning-card>
</template>

recordTypesInLWC.js

import { LightningElement, wire, track } from 'lwc';

// importing to get the object info 
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
// importing Account shcema
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class RecordTypesInLWC extends LightningElement {
    @track selectedValue;
    @track options = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accObjectInfo({data, error}) {
        if(data) {
            let optionsValues = [];
            // map of record type Info
            const rtInfos = data.recordTypeInfos;

            // getting map values
            let rtValues = Object.values(rtInfos);

            for(let i = 0; i < rtValues.length; i++) {
                if(rtValues[i].name !== 'Master') {
                    optionsValues.push({
                        label: rtValues[i].name,
                        value: rtValues[i].recordTypeId
                    })
                }
            }

            this.options = optionsValues;
        }
        else if(error) {
            window.console.log('Error ===> '+JSON.stringify(error));
        }
    }
     
    // Handling on change value
    handleChange(event) {
        this.selectedValue = event.detail.value;
    }

}

recordTypesInLWC.js-meta.xml

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

Output

Progress Bar in Lightning Web Component(lwc)

This post explains how to use progress bar in Lightning Web Components(lwc)

progressBarDemoInLWC.html

<template>
    <lightning-card title="Progress Bar in Lightning Web Component"><br/>
        <div style="margin-left: 2%;">
            <lightning-progress-bar size="medium" value={progress} variant="circular"></lightning-progress-bar>
        </div>
        <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
            {processStatus}
        </div>
    </lightning-card>
</template>

ProgressBarDemoInLWC.js

import { LightningElement, track } from 'lwc';

export default class ProgressBarDemoInLWC extends LightningElement {
    @track progress = 0;
    @track processStatus = 'In Progress';

    connectedCallback() {
        
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this._interval = setInterval(() => {
            this.progress = this.progress + 5;
            this.processStatus = 'Processing => ' + this.progress +'/100';
            if(this.progress === 100) {
                clearInterval(this._interval);
                this.processStatus = 'Completed';
            }
        }, 300);

    }
}

ProgressBarDemoInLWC.js-meta.xml

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

Output

Disable Browser Cache During Lightning Componet(AURA), Lightning Web Component Development(lwc)

Path:
From Setup, enter Session Settings in the Quick Find box, and then select Session Settings.
Deselect the checkbox for “Enable secure and persistent browser caching to improve performance”.
then click save.

Note:
Disabling secure and persistent browser caching has a significant negative performance impact on Lightning Experience. Always enable the setting in production orgs.