Lightning Web Components – Setting LWC Properties on Community/Digital Experience Pages

javascriptlightning-web-componentslwc-wire-adapter

I'm a LWC noob and am trying to figure out how to create a LWC that allows the user to select a campaign record and then uses that values from that record to create fundraising thermometer visualization available on community/digital experience pages.

I was able to hard code the campaign Id to get the values I needed, but would like to make it so that users can select one of many records that meet the criteria.( see picture for example of the functionality I'm trying to recreate.

Thanks for any help!

enter image description here

Here is the code I was messing around with to just get the data not formatting it as a thermometer.

JS file

import { LightningElement, track, wire } from 'lwc';
import getCampaigns from '@salesforce/apex/testCampaign.getCampaigns'
export default class Totalraised extends LightningElement {
@track columns = [
    {label:'Name', fieldName: 'Name'},
    {label: 'Total Amount Raised', fieldName: 'AmountWonOpportunities'}
];
@track campaignList;

@wire(getCampaigns) wireCampaigns({data,error}){
    if (data) {
        this.campaignList = data;
        console.log(data);
    } else if (error) {
        console.log(error);
    }
}

}

HTML FILE

<template>
 <div style="height: 500px;">
 <template if:true={campaignList}>
      <lightning-datatable
              key-field="id"
              data={campaignList}
              columns={columns} >
      </lightning-datatable>
 </template>
 </div>

APEX CLASS REFERENCED

public with sharing class testCampaign {
@AuraEnabled(cacheable=true)
public static List<Campaign> getCampaigns() {
return [SELECT Id, Name, AmountWonOpportunities FROM Campaign WHERE Id = '7017c000002FfgAAAS'];}}

Best Answer

Hello Thomas and welcome to Salesforce StackExchange.

This is a more advanced topic but it is possible through Dynamic Picklists.

You will have to configure the component to expose a property for the selected Campaign (e.g. selectedCampaignId), then on meta XML something like:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property label="selectedCampaignId" name="name" type="String" datasource="apex://MyCampaigns"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

And then on MyCampaigns you retrieve the options:

global class MyCampaigns extends VisualEditor.DynamicPickList {
  global override VisualEditor.DataRow getDefaultValue(){
    // Implementation of default value
  }

  global override VisualEditor.DynamicPickListRows getValues() {
    VisualEditor.DynamicPickListRows myValues = new VisualEditor.DynamicPickListRows();
    // choose the correct criteria to avoid performance issues
    for (Campaign c : [SELECT Id, Name FROM Campaign] ) {
      myValues.add(
        new VisualEditor.DataRow(c.Name, c.Id)
      );
    }
    return myValues;
  }
}

Reference on how to configure components for usage in Digital Experience (previously known as Community): Configure a Component for Experience Builder.

Reference for Dynamic Picklist.

Related Topic