0

I am trying to achieve this functionality.

I am displaying all the campaign members in LWC for that,

I have declared an iteration over a list of campaign members in LWC that has status and substatus so lightning-combobox is defined only one time in code but displays number of times on UI according to the number of campaign members (since it is in for:each loop)

changing status (lightning-combobox) of one record should change the "options" only in that corresponding record's substatus (lightning-combobox).

instead of that, it's applying to all record's substatus (lightning-combobox) because all have options={options}

HTML snippet

<template for:each={recordsToDisplay} for:item="camp">

    <span class="tooltip">
            <!-- {camp.Id} -->
            <a href={url} target="_blank" data-record-id={camp.ContactId}
                    onclick={viewContact}>{camp.Name}
            </a>
            <span class="tooltiptext">
                    <div class="marginClass">Contact Name : {camp.Name}</div>
                    <div class="marginClass">Mobile : {camp.MobilePhone}</div>
                    <div class="marginClass">Email : {camp.Email} </div>
                    Created Date : {camp.CreatedDate}
            </span>
    </span>

    <lightning-combobox
        name={camp.ContactId}
        value={camp.Status}
        options={statusOptions}
        onchange={handleStatusChange}>
    </lightning-combobox>

    <lightning-combobox
        name="Substatus {camp.ContactId}"           
        value={value}
        onchange={handleChange}
        options={options}>
    </lightning-combobox>
    
    <lightning-button
        variant="success"
        label="Save"
        title="Save" data-record-id={camp.Id}
        onclick={SavehandleClick}
        class="slds-m-left_x-small">
    </lightning-button>
        
</template>

JS snippet

handleStatusChange(event) {

    let campaignMemberRecordId = event.target.name;
    this.changedStatus = event.detail.value;
    this.getCampaignMemberStatusChanged();
    
}


getCampaignMemberStatusChanged() {
    console.log('getCampaignMemberStatusChanged method called');
    getDependentPicklist({ pickValue: this.changedStatus }) // HERE MY CLASS RETURNS LIST OF SUBSTATUS
        .then((result) => {
            console.log('in success',result);
            console.log(result);
            let subStatusValues = result;
            let dropDownList = [];
            for(var i = 0; i<subStatusValues[0].subStatusValues.length; i++){
                dropDownList.push({
                    label: subStatusValues[i],
                    value: subStatusValues[i]
                });
            }
            this.options = dropDownList;
            console.log('this.options',this.options.length);
        })
        .catch((error) => {
            console.log('in catch part', error);
            this.error = error;
        });
}
1
  • 2
    Please add pertinent HTML and Javascript code to your question. It facilitates answering. Oct 28, 2022 at 4:57

1 Answer 1

0

You need to assign the correct options to each iteration. I wrote up a simple example.

const options1 = [
  { label: 'Pending', value: 'pending' },
  { label: 'Active', value: 'active' }
];
const suboptions1 = [
  { label: 'Provisioning', value: 'provisioning' },
  { label: 'Pending Activation', value: 'pending-activation' }
];
const suboptions2 = [
  { label: 'In Service', value: 'in-service' },
  { label: 'Scheduled Maintenance', value: 'scheduled-maintenance' }
];

export default class App extends LightningElement {
  @track items = [
    { id: 1, statusOptions: options1, substatusOptions: suboptions1 },
    { id: 2, statusOptions: options1, substatusOptions: suboptions1 }
  ];
  handleChange(event) {
    const item = this.items.find((item)=>`${item.id}`===`${event.target.dataset.id}`);
    if(event.target.value === 'pending') {
      item.substatusOptions = suboptions1;
    } else {
      item.substatusOptions = suboptions2;
    }
  }

You'll need to adjust this to deal with each row, but the point is, that you need to include the valid options for each iteration.

Demo.

You must log in to answer this question.

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