0

Problem: I need to have the parent component to make another Apex call, apiCallout(), after the save button is clicked on the child component. That way the UI is displaying current data, however the current setup requires me to refresh the page after the save button is clicked to show the updated data. Would I need to send a variable in my custom event on handleClickedSave() to have the parent component make another apex callout?

Parent HTML:

<c-view var1={var1}></c-view>
<c-edit var1={var1}></c-edit>

Parent JS:

var1
async apiCallout(){
var2 = var1;
let payload = JSON.stringify({"test":var2});
this.var1 = await calloutToApi({params:payload});
}
connectedCallBack(){
apiCallout()
}

Child View HTML:

<template>
        <lightning-card  title="Hello">
            <lightning-button label="Edit" slot="actions" onclick={handleClickedEdit}></lightning-button>
            <p class="slds-p-horizontal_small">Card Body {var1}</p>
        </lightning-card>
</template>

Child View JS:

@api var1;
handleClickedEdit(){
//sends custom event to Parent to show Edit screen
}

Child Edit HTML:

<template>
        <lightning-card  title="Hello">
            <lightning-button label="Cancel" slot="actions" onclick={handleClickedCancel}></lightning-button>
            <lightning-button label="Save" slot="actions" onclick={handleClickedSave}></lightning-button>
            <lightning-input type="text" label="Enter some text" value={var1}></lightning-input>
        </lightning-card>
</template>

Child Edit JS:

@api var1

handleClickedSave(){
//custom event to send to parent to show View Screen with Apex callout
sendUpdatePayloadToApi({params:var1})
}
handleClickedCancel(){
//custom event to send to parent to show View Screen without Apex callout
}

1 Answer 1

3

The child should notify the parent via an event:

// child.js
async handleClickedSave(){
  //custom event to send to parent to show View Screen with Apex callout
  await sendUpdatePayloadToApi({params:var1})
  this.dispatchEvent(
    new CustomEvent('recordsaved')
  )
}

<!-- parent.html -->
<c-edit onrecordsaved={refreshData}></c-edit>

// parent.js
async refreshData() {
  await this.apiCallout();
}
2
  • ah so this does work, thank you. Attaching this to my cancel button seems to work but for some reason the save button does not like it. Would I have to set up some delay? Jun 6, 2022 at 17:01
  • to add to my comment above, when I put in an alert it will cause the refreshData function to work. But once removed, it does not function properly Jun 6, 2022 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.