Latest Updates

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

How to Pass Multiple Parameter to LWC in Public Community Page?

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.

https://dineshgdk.force.com/TestCommunity/s/?recordId=00O3A000001xFw7AAF&taskId=00F6w000002t5BAEAZ

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