0

I would like to display an error message regarding on JS promise.

My code is this:

HTML:

        <template for:each={test} for:item="test">
                            <lightning-accordion-section key={test.id} data-item={test.id}  label={test.label} name={test.id} class="slds-truncate">
                                <div slot="actions">
                                    <lightning-layout class="slds-wrap" multiple-rows="true">
                                        <lightning-layout-item size="12" padding="around-small">
                                            <lightning-layout-item if:true={showError} padding="around-small" size="12">
                                                <h1 class="slds-p-around_x-small" style="color: red; ">{errorLabel}</h1>
                                            </lightning-layout-item>
                                        </lightning-layout-item>
                                    </lightning-layout>
                                </div>
                            </lightning-accordion></lightning-layout-item>
       </template>

I ommited some code of this HTML part for just put main code to modify.

JS:

validate() {
    validateCase({caseId: this.recordId})
    .then(result => {
        if (result) {
            this.next= true;
            next(this);
        } else {
          this.showError = true;
        }
    })
    .catch(error => {
        this.error = error;
        this.showNotify(this.title, ERROR_MSG, 'warning');
    });
}

Problem here is that, I just want to display error (showError) in the records that don't retrieve result on JS function. Now, for example, I have 4 records, and 3 of them have results and the other one have not result. Error message is displayed on ALL OF THEM, and I want to display the error just in the 3 without results.

For instance, my component retrieves from Controller the next results:

Record 1: Have information added.

Record 2: Have information added.

Record 3: Do not have information added.

Displayment on UI:

Record 1: This record have no information added.

Record 2: This record have no information added.

Record 3: This record have no information added.

And I want that displayment for UI would be like:

Record 1:

Record 2:

Record 3: This record have no information added.

1 Answer 1

1

You only have one variable in which to control the messages, so that's why when there's an error, they all display the message. You need a way to control individual messages, so that means one variable per record:

<lightning-layout-item if:true={test.showError} padding="around-small" size="12">

Which would then be set via the return value from Apex:

validateCase({caseId: this.recordId})
.then(result => {
    if (result) {
        this.next= true;
        next(this);
    } else {
        this.test.find(record => record.id === this.recordId).showError = true;
    }
})

You must log in to answer this question.

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