PASS ADDITION PARAMETER TO CUSTOM LWC IN PUBLIC COMMUNITY PAGE

Hi there, are you searching for creating a community page with LWC component or you want to pass record Id to LWC from community page or you want to know some awesome features about community page than your landed at right place.

What is Community page used for ?

Communities are a great way to share information and collaborate with people who are key to your business processes, such as customers, partners, or employees. Whether you call it a portal, a help forum, a support site, HR central, or something else, an online community is a great place to connect with the important folks in your life in a new and different way. Use easy point-and-click branding tools with ever-evolving Lightning templates or go with Visualforce to create branded collaboration spaces.

Let us get start with creating community page.

Got To Setup and Search for Community.

And click on Enable communities and enter a Domain Name and click on Check Availability button, domain name should be unique and then click on Save button

On Successful save you will be redirect to All communities.

Note: If you not redirect to All communities search for All Communities in Setup.

Click on New Community Button.

You will be redirect to Template page where you can select or create templates for you community page.

For now you can select “Build Your Own” template.

And click on Get Started button.

Click on Builder to start building your community page.

Now we can start creating LWC Component to render in community page.

sfdx force:apex:class:create -n CommunityLWCApex -d classes

Create a Apex @AuraEnabled(cacheable=true) class and copy paste the below code.

public with sharing class CommunityLWCApex {
    @AuraEnabled(cacheable=true)
    Public static account getAccountDetails(Id recordId){
        List<Account> lstAccount = [SELECT Id,Name from Account where Id=:recordId];
        return lstAccount[0];
    }
}

sfdx force:lightning:component:create -n CommunityLWC --type lwc -d lwc

Copy paste the below code in .js-meta.xml 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>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" label="Record ID" description="The value should be {!recordId}." />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Copy paste the below code in .js file.

import { LightningElement,api,wire,track } from 'lwc';
import getAccountDetails from '@salesforce/apex/CommunityLWCApex.getAccountDetails';
export default class CommunityLWC extends LightningElement {
    @api recordId;
    @track AccountName;
    @track AccountId;
     
    @wire(getAccountDetails, {
        recordId: "$recordId"
    })
    wiredGetDetails(result) {
        this.wiredAccountResults = result;
        if (result.data) {
            this.data = result.data;
            this.AccountName = this.data.Name;
            this.AccountId = this.data.Id;
            console.log('this.data '+JSON.stringify(this.data));
        }
        else if (result.error) {
            this.error = result.error;
            console.log('this.error '+this.error);
        }
    }
}

Copy paste the below code in .html file.

<template>
    <div class="slds-card">
        <p style="padding:5%;margin:2%">Account Id: {AccountId}</p>
        <p style="padding:5%;margin:2%">Account Name: {AccountName}</p>
    </div>
</template>

Save the LWC component and Deploy this component to org and go back to and go back to Builder.

And in Components option search for your LWC component “communityLWC” drag the component and add the component to the UI.

And add {record.Id} to Record ID field, and click publish button. Now you will be receiving mail with from salesforce with community URL. Click on the URL and pass the Account Id.

For Additional information:

Append “?recordId=0012w000003FmGFAA0”

for example: “https://dinesh-blog-developer-edition.ap16.force.com/s/?recordId=0012w000003FmGFAA0

?recordId=0012w000003FmGFAA0 

You can pass multiple Id’s using ‘&’ https://dinesh-blog-developer-edition.ap16.force.com/s/?recordId=0013g000001xFw9AAE&taskId=00T6w000002sr1pEAA

And need to add task Id in LWC meta.xml and Js files.

<property name="taskId" type="String" label="Task ID" description="The value should be {!taskId}." /> // Add this to meta.xml file
@api taskId; //add this to .js file