3

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'];}}

1 Answer 1

3

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.

4
  • Jeferson Thank you! This is exactly what I was trying to do. I now struggling to pass the id I get from that method to the other apex method. so that the the total amount will populate. Commented Nov 3, 2021 at 18:12
  • Sure Thomas, if this helped you, please mark as answer. Regarding the id, which method are you referring to? Are you referring to getCampaigns()? Commented Nov 3, 2021 at 18:37
  • I figured it out using getRecord and getFieldValue. instead of trying to pass it to another apex class! thank you Commented Nov 3, 2021 at 18:39
  • I see, it is probably better to use getRecord to retrieve the data from the chosen Campaign. There are many things that you can do on LWC without requiring Apex. Commented Nov 4, 2021 at 11:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .