Community · Lightning · LWC · Salesforce

PASS MULTIPLE PARAMETER TO LWC IN PUBLIC COMMUNITY PAGE WITH SIMPLE EXAMPLE

Create a LWC component TestCommunity.

In TestCommunity.js-meta.xml, add the <target> and <property> tags as the example below and save the file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" label="Record ID" description="The value should be {!recordId}." />
            <property name="taskId" type="String" label="Task ID" description="The value should be {!taskId}." />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

In TestCommunity.js file using @api annotation for recordId and taskId propoerty in js.

import { LightningElement, api} from 'lwc';
 export default class TestCommunity extends LightningElement {
     @api recordId;
     @api taskId;
 }

In html page print the values of recordId and taskId.

<template>
     <p>{recordId}</p>
     <p>{taskId}</p>
</template>

Create new Community page and add TestCommunity LWC to the page and click publish.

Pass the values in the parameter as above using ampersand ‘&’.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s