0

So I am rather stuck on this issue I am facing, being new to Salesforce.

If someone may be able to point me the way to understand the issue a bit better...

Issue: I have three image types in my XML list, svg,img,mask.

I need to render a combobox based on the type selected. So there would be in essence, three comboboxes with paths to their relevant staticresource folder.

I have been able to write the component based off a hard value, which works. But I need to conditionally render the combobox based off the image type selected (photo attached.

I tried something like

if(this.type === 'svg') {
// render svg combobox
} else if (this.type ==='img'){
// render img combobox
}

etc etc.

My only issue is, I am not sure how to render said combobox, as I would need to store the if statement in a method - which I am also hazy as to how I would call it. I have implemented a handleChange just like the combobox LWC docs state which works fine with the one combobox, but in my thinking, I would need to add one for each type as well?

Here is some base code that may help explain it better without providing an entire wall of code:

  @api type;
  @api imageColor;
  @api imageChoice;

  // initial value
  value = "";
  folder = "";

  svg = true;
  image = false;
  mask = false;

  // handle combobox change
  handlePicklistChange(event) {
    this.value = event.detail.value;
    let selectedOption = this.options.find(
      (option) => option.value === this.value
    );
    this.folder = selectedOption.folder;
  }

get options() {
    return [
      { label: "Meh", folder: "09.People/", value: "icn_emoji_meh.svg" },
      { label: "Happy", folder: "09.People/", value: "icn_emoji_happy.svg" },
      { label: "Sad", folder: "09.People/", value: "icn_emoji_sad.svg" },
      { label: "smirk", folder: "09.People/", value: "icn_emoji_smirk.svg" },
      { label: "nametag", folder: "09.People/", value: "icn_nametag.svg" },
     ]
    }

xml file

    <?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Asset Selection</masterLabel>
    <targets> 
        <target>lightningCommunity__Page</target> 
        <target>lightningCommunity__Default</target> 
    </targets> 
    <targetConfigs> 
        <targetConfig targets="lightningCommunity__Default">
            <property
        label="Selection Type"
        name="type"
        type="String"
        datasource="img,svg,mask"
        default="img"
      />
            <property
        label="Selection Choice"
        name="imageChoice"
        datasource="people_approved,people_edit,people_fail,people_international"
        type="String"
      />         
            <property
        label="Selection Color"
        name="imageColor"
        datasource="red, blue, black"
        type="String"
      />         
        </targetConfig> 
    </targetConfigs>  
</LightningComponentBundle>

I have never worked with xml before, so the datasource attribute is kinda messing with my thinking. Ideally, if the type datasource of svg is chosen, then the relative imageChoice datasource can be chosen etc.

I hope this provides enough information?

1 Answer 1

0

My apologies, I seem to be going around this the wrong way.

What I need to actually do is set the combobox value to the @type, @imageChoice, and @imageColor values when selected in experience builder.

At the moment, I can display the choice to the component, but I am not sure as to how to update the combobox selection - if it's even possible?

I have attached a photo to show the corresponding choices to the output on the page. enter image description here

You must log in to answer this question.

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