Pass value dynamically through app builder in lwc

  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):

Thank you.