0

I am needing to create a custom detail link on a custom object detail record page that will open my custom JS modal (Which in turn generates a dynamically filled text file from the Record ID). How can I achieve this?

HTML:

<template>
  <div>
        <a onclick={openModal}>Generate CERS File</a>
    </div>
    <lightning-card if:true={isModalOpen}>
        <div class="slds-container_small">
            <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
                <div id="CERSModal" class="slds-modal__container">
                    <div class="slds-modal__header">
                        <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Generate CERS File</h1>
                    </div>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Enter the required information below.
                        </b></p>
                        <div class="slds-p-around_x-small lgc-bg">
                            <lightning-input class="customInputField" label="Carrier Name"  type="text" value={carrierName} onchange={carrierNameChange} required="true"></lightning-input>
                        </div>
                        <div class="slds-p-around_x-small lgc-bg">
                            <lightning-input class="customInputField" label="Document Number" type="text" value={documentNo} onchange={documentNumberChange} required="true"></lightning-input>
                        </div>
                        <div class="slds-p-around_x-small lgc-bg">
                            <lightning-input class="customInputField" label="Form Key Value"  type="number" value={formKeyValue} onchange={formKeyValueChange} required="true"></lightning-input>
                        </div>
                    </div>
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick={closeModal}>Cancel</button>
                        <lightning-button variant="brand"
                                          label="Generate File"
                                          title="Generate File"
                                          onclick={downloadClick}
                                          class="slds-m-left_x-small">
                        </lightning-button>
                    </div>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
        </div>
    </lightning-card>
</template>

JS:

import {LightningElement, wire, api, track} from 'lwc';
import createCERSstructure from '@salesforce/apex/trac_GenerateTxtFileController.createCERSstructure';
import {CloseActionScreenEvent} from "lightning/actions";
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Shipment_Hold__c.Name';
import {ShowToastEvent} from "lightning/platformShowToastEvent";

export default class TracGenerateTxtFile extends LightningElement {
 @track isModalOpen = false;
 @track shipmentInfo;
 @track carrierName;
 @track documentNo;
 @track formKeyValue;
 @api recordId;
 @api recordName;
 text = '';

 @wire(getRecord, {recordId: '$recordId', fields: ['Shipment_Hold__c.Name']})
 shipment_hold__c;

 carrierNameChange(event){
 console.log("carriernameChange test");
 this.carrierName = event.target.value;
 }

 documentNumberChange(event){
 console.log("docnumChange test");
 this.documentNo = event.target.value;
 }

 formKeyValueChange(event){
 console.log("formkeyChange test");
 this.formKeyValue = event.target.value;
 }

 showSuccessToast(){
 this.dispatchEvent(new ShowToastEvent({
 title: "Success",
 message: "File Downloaded",
 variant: "Success"
 }));
 }

 showErrorToast(errorMessage) {
 this.dispatchEvent(new ShowToastEvent({
 title: "Error",
 message: errorMessage,
 variant: "error"
 }));
 }

 /**
 * Click handler for Download button that generates a text document and populates it with supplied data(String)
 */
 downloadClick() {
 if(this.validateInputFields()){
 let fileName = 'SFCERS';
 let recordName = getFieldValue(this.shipment_hold__c.data, NAME_FIELD);
 let fileType = '.txt';
 console.log("downloadlcick test");
 console.log(fileName);
 console.log(recordName);
 console.log(fileType);

 createCERSstructure({
 shipmentHoldRecordId: this.recordId,
 carrierName: this.carrierName,
 documentNumber: this.documentNo,
 formKeyValue: this.formKeyValue})
 .then(result =>{
 console.log('CREATE FILE TEST');
 this.shipmentInfo = result;
 this.text = `data:text/plain,${encodeURIComponent(`${this.shipmentInfo}`)}`;
 let downloadElement = document.createElement('a');
 downloadElement.href = this.text;
 downloadElement.target = '_self';
 downloadElement.download = fileName + recordName + fileType;
 document.body.appendChild(downloadElement);
 downloadElement.click();
 this.showSuccessToast();
 this.closeModal();
 })
 .catch((error) => {
 console.log(error);
 this.showErrorToast("CERS file generation failed. Please try again.");
 });
 }
 }

 validateInputFields() {
 let isValidVal = true;
 let inputFields = this.template.querySelectorAll('.customInputField');
 inputFields.forEach(inputField => {
 if(!inputField.checkValidity()) {
 inputField.reportValidity();
 isValidVal = false;
 }
 });
 return isValidVal;
 }

 openModal(){
 this.isModalOpen = true;
 }

 closeModal() {
 this.isModalOpen = false;
 // this.dispatchEvent(new CloseActionScreenEvent());
 }
}
2
  • Does this answer your question? LWC: How do I display "out of box" object hover?
    – McCubo
    Commented Jun 21, 2022 at 9:50
  • I also need to be able to input text into the popup and use that text in the generated file. Not sure if that will allow me to do that but I will give it a try! Thanks
    – mcook
    Commented Jun 22, 2022 at 13:15

0

You must log in to answer this question.