Pass Value Dynamically Through App Builder in Lightning Web Component

Hello Everyone, In this post you will learn, how to pass value through lightning app builder in lightning web component. In aura component we used design bundle to achieve the same things but in lwc we don't have any design bundle. so let's see how we achieve this in web components.

Pass value dynamically through app builder in lwc

To implement this example, I have used contact object data, you can use any salesforce object as per your need. In lwc, meta.xml have the configuration file tags. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Let's understand it with an example.

ContactDataHandler.apxc

 public class ContactDataHandler {

    @AuraEnabled
    public static List<Contact> getContacts(Boolean bDoNotCall,Integer limitVal){
        return [SELECT Id,Name,Phone,Email,DoNotCall FROM Contact WHERE DoNotCall=:bDoNotCall limit:limitVal];
    }
 }

DynamicValueViaAppBuilder.html

 <template>
	<lightning-card title="Dynamic Value Through App Builder" icon-name="standard:contact">
		<table class="slds-table slds-table_cell-buffer slds-table_bordered">
			<thead>
				<tr class="slds-line-height_reset slds-text-title_caps">
					<th class="slds-is-resizable" scope="col">
						<div class="slds-truncate" title="Name">
							Name
						</div>
					</th>
					<th class="slds-is-resizable" scope="col">
						<div class="slds-truncate" title="Phone">
							Phone
						</div>
					</th>
					<th class="slds-is-resizable" scope="col">
						<div class="slds-truncate" title="Email">
							Email
						</div>
					</th>
					<th class="slds-is-resizable" scope="col">
						<div class="slds-truncate" title="Do Not Call">
							Do Not Call
						</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<template if:true={data}>
					<template for:each={data} for:item="c">
						<tr key={c.Id}>
							<th scope="row" data-label="Name">
								<div class="slds-truncate" title={c.Name}>{c.Name}</div>
							</th>
							<th scope="row" data-label="Phone">
								<div class="slds-truncate" title={c.Phone}>{c.Phone}</div>
							</th>
							<th scope="row" data-label="Email">
								<div class="slds-truncate" title={c.Email}>{c.Email}</div>
							</th>
							<th scope="row" data-label="DoNotCall">
								<div class="slds-truncate" title={c.DoNotCall}>{c.DoNotCall}</div>
							</th>
						</tr>
					</template>
				</template>
			</tbody>
		</table>
	</lightning-card>
 </template>

DynamicValueViaAppBuilder.js

 import { LightningElement, api } from 'lwc';
 import getContacts from '@salesforce/apex/ContactDataHandler.getContacts';
 export default class DynamicValueViaAppBuilder extends LightningElement {
    @api pdoNotCall = false;
    @api plimitVal = 5;
    data;
    connectedCallback() {        
        this.getAllContact();
    }

    getAllContact() {
        getContacts({ bDoNotCall: this.pdoNotCall, limitVal: this.plimitVal }).then(result => {
            window.console.log('result^^' + result);
            this.data = result;
        }).catch(error => {
            window.console.log('Error ====> ' + JSON.stringify(error));
        });
    }
 }

DynamicValueViaAppBuilder.js-meta.xml

 <?xml version="1.0"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>51.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__RecordPage</target>
            <target>lightning__AppPage</target>
            <target>lightning__HomePage</target>
        </targets>        
        <targetConfigs>
            <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">  
                <property name="pdoNotCall" type="boolean" label="Do Not Call" description="Show only checked value"/>
                <property name="plimitVal" type="Integer" label="Limit" description="Enter Record Limit" required="true"/>
            </targetConfig>
        </targetConfigs>
 </LightningComponentBundle>

After creating this web component, you have to edit any record details page, that will open in lightning app builder then you can drag this lwc in your record detail page and set value dynamically.

Output:

On Default Value (Do Not Call = false):

On Changed Value (Do Not Call = true):

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.