You need to sign in to do that
Don't have an account?
Pavushetti Abhilash 3
Open Modal background should not visible
Hi folks,
I have created a lightning record edit form in LWC. The form should open on pop up. After modal opens the background is visible. It should not visible. Any suggestions. Please refer my html and js code. If any CSS should to be create, please let me know.
------html----------
<template>
<div class="slds-m-bottom_large">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
<span>RMA Case Line Item History</span>
</div>
<div class="slds-clearfix">
<lightning-button label="New" variant="Neutral" onclick={newRmaForm} class="slds-float_right"></lightning-button>
</div>
</div>
</div>
<div class="landingpagebody">
<lightning-card title="">
<div class="slds-m-top_large">
<lightning-datatable key-field="id" data={rmarecord} columns={columns}></lightning-datatable>
</div>
</lightning-card>
<div if:true={showModal}>
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header">
<lightning-icon style="cursor: pointer;" class="slds-float_right" icon-name="utility:close" size="small" onclick={handleClose} ></lightning-icon>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Create Case Line Item</h2>
</header>
<div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
<lightning-record-edit-form object-api-name="R4C_Case_Line_Item__c" columns = "2" layout-type = "compact">
<lightning-messages></lightning-messages>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Case__c"></lightning-input-field>
<lightning-input-field field-name="EPM_Name__c"></lightning-input-field>
<lightning-input-field field-name="MMID_BU_Hierarchy__c"></lightning-input-field>
<lightning-input-field field-name="Remedy__c"></lightning-input-field>
<lightning-input-field field-name="Return_Reason__c"></lightning-input-field>
<lightning-input-field field-name="Return_Type__c"></lightning-input-field>
<lightning-input-field field-name="Stocking__c"></lightning-input-field>
<lightning-button type="submit"
name="submit"
label="Create Case Line Item">
</lightning-button>
</lightning-record-edit-form>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={handleCancel}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</div>
</template>
-------------------------js-------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import { loadStyle } from 'lightning/platformResourceLoader';
// import CUSTOMCSS from '@salesforce/resourceUrl/recordForm'; //this is my static resource file name
import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
/* import NAME from '@salesforce/schema/R4C_Case_Line_Item__c.Name';
import Case from '@salesforce/schema/R4C_Case_Line_Item__c.Case__c';
import EPM_Name from '@salesforce/schema/R4C_Case_Line_Item__c.EPM_Name__c';
import MMID_BU_Hierarchy from '@salesforce/schema/R4C_Case_Line_Item__c.MMID_BU_Hierarchy__c';
import Remedy from '@salesforce/schema/R4C_Case_Line_Item__c.Remedy__c';
import Return_Reason from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Reason__c';
import Return_Type from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Type__c';
import Stocking from '@salesforce/schema/R4C_Case_Line_Item__c.Stocking__c'; */
export default class RmaCaseLineItem extends LightningElement {
isCssLoaded = false;
@api recordId;
objectApiName = 'R4C_Case_Line_Item__c';
showModal = false;
@track rmarecord = false;
@track conid;
/* renderedCallback(){
if(this.isCssLoaded) return
this.isCssLoaded = true;
loadStyle(this,CUSTOMCSS).then(()=>{
console.log('loaded');
})
.catch(error=>{
console.log('error to load');
});
} */
newRmaForm(event){
this.showModal = true;
// fields = [NAME, Case, EPM_Name, MMID_BU_Hierarchy, Remedy, Return_Reason, Return_Type, Stocking];
}
handleClick(){
this.showModal = true;
}
handleClose(){
this.showModal = false;
}
handleSave(){
this.template.querySelector('lightning-record-edit-form').submit();
this.showModal = false;
const evt = new ShowToastEvent({
title: "Success!",
message: "Case Line Item Created",
variant: "success",
});
this.dispatchEvent(evt);
}
handleCancel(){
this.showModal = false;
}
handleSubmit(event){
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
fields.LastName = 'My Custom Last Name'; // modify a field
this.template.querySelector('lightning-record-form').submit(fields);
}
@track columns = [
{label:'R4C configuration name', fieldName:'R4C configuration name', type:'string'},
{label:'Case', fieldName:'Case__c', type:'text'},
{label:'EPM Name', fieldName: 'EPM_Name__c', type:'text'},
{label:'Remedy', fieldName: 'Remedy__c',type:'data'},
{label:'Return Reason', fieldName: 'Return_Reason__c',type:'data'},
{label:'Return Type', fieldName:'Return_Type__c',type:'data'},
{label:'Stocking', fieldName:'Stocking__c', type:'data'},
{label:'MMID', fieldName:'MMID_BU_Hierarchy__c', type:'text'}
]
@wire (getRecord, {recordId : USER_ID, fields: [CONTACT_ID]})
user;
get contactId() {
this.conid = getFieldValue(this.user.data, CONTACT_ID);
return getFieldValue(this.user.data, CONTACT_ID);
}
}
I have created a lightning record edit form in LWC. The form should open on pop up. After modal opens the background is visible. It should not visible. Any suggestions. Please refer my html and js code. If any CSS should to be create, please let me know.
------html----------
<template>
<div class="slds-m-bottom_large">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
<span>RMA Case Line Item History</span>
</div>
<div class="slds-clearfix">
<lightning-button label="New" variant="Neutral" onclick={newRmaForm} class="slds-float_right"></lightning-button>
</div>
</div>
</div>
<div class="landingpagebody">
<lightning-card title="">
<div class="slds-m-top_large">
<lightning-datatable key-field="id" data={rmarecord} columns={columns}></lightning-datatable>
</div>
</lightning-card>
<div if:true={showModal}>
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header">
<lightning-icon style="cursor: pointer;" class="slds-float_right" icon-name="utility:close" size="small" onclick={handleClose} ></lightning-icon>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Create Case Line Item</h2>
</header>
<div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
<lightning-record-edit-form object-api-name="R4C_Case_Line_Item__c" columns = "2" layout-type = "compact">
<lightning-messages></lightning-messages>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Case__c"></lightning-input-field>
<lightning-input-field field-name="EPM_Name__c"></lightning-input-field>
<lightning-input-field field-name="MMID_BU_Hierarchy__c"></lightning-input-field>
<lightning-input-field field-name="Remedy__c"></lightning-input-field>
<lightning-input-field field-name="Return_Reason__c"></lightning-input-field>
<lightning-input-field field-name="Return_Type__c"></lightning-input-field>
<lightning-input-field field-name="Stocking__c"></lightning-input-field>
<lightning-button type="submit"
name="submit"
label="Create Case Line Item">
</lightning-button>
</lightning-record-edit-form>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={handleCancel}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</div>
</template>
-------------------------js-------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import { loadStyle } from 'lightning/platformResourceLoader';
// import CUSTOMCSS from '@salesforce/resourceUrl/recordForm'; //this is my static resource file name
import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
/* import NAME from '@salesforce/schema/R4C_Case_Line_Item__c.Name';
import Case from '@salesforce/schema/R4C_Case_Line_Item__c.Case__c';
import EPM_Name from '@salesforce/schema/R4C_Case_Line_Item__c.EPM_Name__c';
import MMID_BU_Hierarchy from '@salesforce/schema/R4C_Case_Line_Item__c.MMID_BU_Hierarchy__c';
import Remedy from '@salesforce/schema/R4C_Case_Line_Item__c.Remedy__c';
import Return_Reason from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Reason__c';
import Return_Type from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Type__c';
import Stocking from '@salesforce/schema/R4C_Case_Line_Item__c.Stocking__c'; */
export default class RmaCaseLineItem extends LightningElement {
isCssLoaded = false;
@api recordId;
objectApiName = 'R4C_Case_Line_Item__c';
showModal = false;
@track rmarecord = false;
@track conid;
/* renderedCallback(){
if(this.isCssLoaded) return
this.isCssLoaded = true;
loadStyle(this,CUSTOMCSS).then(()=>{
console.log('loaded');
})
.catch(error=>{
console.log('error to load');
});
} */
newRmaForm(event){
this.showModal = true;
// fields = [NAME, Case, EPM_Name, MMID_BU_Hierarchy, Remedy, Return_Reason, Return_Type, Stocking];
}
handleClick(){
this.showModal = true;
}
handleClose(){
this.showModal = false;
}
handleSave(){
this.template.querySelector('lightning-record-edit-form').submit();
this.showModal = false;
const evt = new ShowToastEvent({
title: "Success!",
message: "Case Line Item Created",
variant: "success",
});
this.dispatchEvent(evt);
}
handleCancel(){
this.showModal = false;
}
handleSubmit(event){
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
fields.LastName = 'My Custom Last Name'; // modify a field
this.template.querySelector('lightning-record-form').submit(fields);
}
@track columns = [
{label:'R4C configuration name', fieldName:'R4C configuration name', type:'string'},
{label:'Case', fieldName:'Case__c', type:'text'},
{label:'EPM Name', fieldName: 'EPM_Name__c', type:'text'},
{label:'Remedy', fieldName: 'Remedy__c',type:'data'},
{label:'Return Reason', fieldName: 'Return_Reason__c',type:'data'},
{label:'Return Type', fieldName:'Return_Type__c',type:'data'},
{label:'Stocking', fieldName:'Stocking__c', type:'data'},
{label:'MMID', fieldName:'MMID_BU_Hierarchy__c', type:'text'}
]
@wire (getRecord, {recordId : USER_ID, fields: [CONTACT_ID]})
user;
get contactId() {
this.conid = getFieldValue(this.user.data, CONTACT_ID);
return getFieldValue(this.user.data, CONTACT_ID);
}
}
<div class="slds-backdrop slds-backdrop_open"></div>
overwrite the background as per your design in your css file.
.slds-backdrop {
transition-duration: var(--lwc-durationSlowly,0.4s);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
/* background: var(--sds-c-backdrop-color-background, var(--lwc-colorBackgroundTempModalTint,rgba(8, 7, 7, 0.6))); */
z-index: var(--lwc-zIndexModal,9000);
}
All Answers
<div class="slds-backdrop slds-backdrop_open"></div>
overwrite the background as per your design in your css file.
.slds-backdrop {
transition-duration: var(--lwc-durationSlowly,0.4s);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
/* background: var(--sds-c-backdrop-color-background, var(--lwc-colorBackgroundTempModalTint,rgba(8, 7, 7, 0.6))); */
z-index: var(--lwc-zIndexModal,9000);
}
There is an object named as email status show that in LWC
please help me