I have a modal lightning-record-from that I have wrapped in an aura component so that I am able to provide the modal as a custom action button on a page. For some reason I have two problems:
- It seems like the aura component is somehow showing up under my lwc component? I'm not sure how this works - I assumed the LWC would fill the aura component. Also, the close button (X in upper right) is mostly un-clickable because most of it is under the area outlined in blue (highlighted with element inspector) which seems like it is a part of the LWC itself, blocking clicks below it to the aura component. I am not doing anything special in my code but I'm not sure how to begin to even fix this.
- Both of the Cancel and Save buttons don't actually close the modal. I tried first with the closeModal method (which worked as a stand-alone LWC) and then tried adding the closeQA to the aura component but it doesn't seem to fire.
Aura component:
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
<c:newProductAddToQuoteLineModal recordId="{!v.recordId}" onclose="{closeQA}"/>
</aura:component>
Aura component controller js:
({
closeQA : function(component, event, helper) {
console.log('sending e.force:closeQuickAction');
$A.get("e.force:closeQuickAction").fire();
}
})
LWC component:
<template>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box LWC header here -->
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Product and Add a Quote Line Item</h2>
</header>
<!-- Modal/Popup Box LWC body starts here -->
<div class="slds-modal__content" id="modal-content-id-1">
<lightning-record-form
object-api-name="Product2"
fields={fields}
columns="1"
mode="edit"
onsubmit={handleSubmit}
onsuccess={handleSuccess}
oncancel={handleCancel}
density="comfy">
</lightning-record-form>
</div>
</div>
</section>
</template>
LWC js file:
import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import addNewQuoteLineItem from '@salesforce/apex/NewProductAddToQuoteLineHelper.addNewQuoteLineItem';
import getFieldSetMembers from '@salesforce/apex/NewProductAddToQuoteLineHelper.getFieldSetMembers';
export default class NewProductAddToQuoteLineModal extends LightningElement {
@api recordId;
fields = [];
/* javaScipt functions start */
connectedCallback() {
console.log('recordId: ' + this.recordId);
getFieldSetMembers().then(result => {
this.fields = [];
var array = result.split(',');
for(let i = 0; i < array.length; i++){
this.fields.push({fieldApiName: array[i], objectApiName: "Product2"});
}
}).catch(error => {
console.log('error is: ' + error);
const event = new ShowToastEvent({
title: 'Error reading fields for Product',
message: error,
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(event);
});
}
closeModal() {
console.log('closing the model now');
const closeQA = new CustomEvent('close');
this.dispatchEvent(closeQA);
}
handleCancel(event) {
console.log('handling cancel now');
this.closeModal();
}
handleSubmit(event) {
console.log('handling submit now');
event.preventDefault();
// Get data from submitted form
const rfields = event.detail.fields;
// You need to submit the form after modifications
this.template
.querySelector('lightning-record-form').submit(rfields);
}
handleSuccess(event) {
addNewQuoteLineItem({ quoteId: this.recordId,
productId: event.detail.id })
.then(
result => {
this.closeModal();
}
).catch(
error => {
this.closeModal();
const event = new ShowToastEvent({
title: 'Error creating a new Quote Line',
message: error,
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
);
}
handleError(event) {
console.log('handling error now');
this.closeModal();
this.dispatchEvent(event);
}
/* javaScipt functions end */
}