Configure a Post-Processing Modal for Single Gift Entry in Nonprofit

Use Lightning web components to create a Gift Tribute record for single gift entry.

These Lightning web component code snippets show a very basic form to create a Gift Tribute record for Single Gift Entry.

giftEntryTributePostSave.html:

<template>
    <section class="slds-card">
        <div class="slds-card__header slds-grid slds-p-around_medium">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-people" title="Tribute">
                        <svg class="slds-icon slds-icon_small" aria-hidden="true">
                            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#people"></use>
                        </svg>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title slds-truncate slds-text-heading_medium" title="Create Tribute">
                        Create Tribute
                    </h2>
                </div>
            </header>
        </div>

        <div class="slds-card__body slds-card__body_inner slds-p-horizontal_medium slds-p-bottom_medium">
            <lightning-record-edit-form
                object-api-name={objectApiName}
                onsuccess={handleSuccess}
                onerror={handleError}
                onsubmit={handleSubmit}
                class="slds-p-top_none"
            >
                <!-- Hidden GiftTransactionId (prefilled via @api) -->
                <lightning-input-field
                    field-name={giftTransactionField}
                    value={giftTransactionId}
                    if:true={hasGiftTransaction}
                    class="slds-hide"
                ></lightning-input-field>

                <div class="slds-grid slds-wrap slds-gutters">
                    <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="tributeType">Tribute Type</label>
                            <div class="slds-form-element__control">
                                <!-- TributeType defaulted to Honoree -->
                                <lightning-input-field
                                    field-name={tributeTypeField}
                                    value="Honor"
                                    data-field="TributeType"
                                ></lightning-input-field>
                            </div>
                        </div>
                    </div>

                    <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                        <lightning-input-field
                            field-name={honoreeContactField}
                            data-field="HonoreeContactId"
                        ></lightning-input-field>
                    </div>

                    <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                        <lightning-input-field
                            field-name={honoreeNameField}
                            data-field="HonoreeName"
                        ></lightning-input-field>
                    </div>

                    <div class="slds-col slds-size_1-of-1">
                        <lightning-input-field
                            field-name={honoreeInfoField}
                            data-field="HonoreeInformation"
                        ></lightning-input-field>
                    </div>
                </div>

                <div class="slds-m-top_medium slds-grid slds-grid_align-spread">
                    <lightning-button
                        label="Cancel"
                        title="Cancel"
                        onclick={handleCancel}
                    ></lightning-button>
                    <lightning-button
                        class="slds-m-left_small"
                        variant="brand"
                        type="submit"
                        label="Create Tribute"
                        title="Create Tribute"
                        disabled={isSubmitting}
                        onclick={preSubmitDefaulting}
                    ></lightning-button>
                </div>

                <template if:true={errorMessage}>
                    <div class="slds-m-top_medium slds-text-color_error">
                        {errorMessage}
                    </div>
                </template>
            </lightning-record-edit-form>
        </div>
    </section>
</template>

giftEntryTributePostSave.js:

import { LightningElement, api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import GIFT_TRIBUTE_OBJECT from '@salesforce/schema/GiftTribute';
import TRIBUTE_TYPE_FIELD from '@salesforce/schema/GiftTribute.TributeType';
import HONOREE_CONTACT_FIELD from '@salesforce/schema/GiftTribute.HonoreeContactId';
import HONOREE_NAME_FIELD from '@salesforce/schema/GiftTribute.HonoreeName';
import HONOREE_INFO_FIELD from '@salesforce/schema/GiftTribute.HonoreeInformation';
import GIFT_TRANSACTION_FIELD from '@salesforce/schema/GiftTribute.GiftTransactionId';

/**
 * LWC: giftEntryTributePostSave
 * Displays TributeType (default Honoree), HonoreeContactId, HonoreeName, HonoreeInformation
 * Associates GiftTransactionId via @api
 * Uses lightning-record-edit-form to create a GiftTribute
 */
export default class GiftEntryTributePostSave extends LightningElement {

    /**
     * Required input property.
     * Contains all the data for the row.
     */
    @api
    set rowData(value) {
        this._rowData = value || {};
        this.initializeFields();
    }
    get rowData() {
        return this._rowData;
    }

    /**
     * Required input property.
     * Contains objects for templateConfig and recordId for navigation
     */
    @api configuration;

    // Public API: Gift Transaction to link tribute to (hidden field)
    @api giftTransactionId;


    connectedCallback() {
        this.initializeFields();
    }

     /**
     * Initialize form fields with data from rowData
     */
    initializeFields() {
        console.log('** in initialize fields.')
        this.giftTransactionId = this._rowData['GiftTransactionId'];
        console.log('** gift transaction id: ' + this.giftTransactionId + '');
    }

    // record-edit-form bindings
    objectApiName = GIFT_TRIBUTE_OBJECT;
    tributeTypeField = TRIBUTE_TYPE_FIELD;
    honoreeContactField = HONOREE_CONTACT_FIELD;
    honoreeNameField = HONOREE_NAME_FIELD;
    honoreeInfoField = HONOREE_INFO_FIELD;
    giftTransactionField = GIFT_TRANSACTION_FIELD;

    @track isSubmitting = false;
    @track errorMessage;

    get hasGiftTransaction() {
        return !!this.giftTransactionId;
    }

    // Ensure defaults and set hidden values on submit
    handleSubmit(event) {
        this.isSubmitting = true;
        this.errorMessage = undefined;

        // Prevent default submit to inject default values
        event.preventDefault();

        // Clone and enforce defaults
        const fields = { ...event.detail.fields };

        // Default TributeType to Honoree if not provided/changed
        if (!fields[TRIBUTE_TYPE_FIELD.fieldApiName]) {
            fields[TRIBUTE_TYPE_FIELD.fieldApiName] = 'Honoree';
        }

        // Set hidden GiftTransaction if provided via @api
        if (this.giftTransactionId) {
            fields[GIFT_TRANSACTION_FIELD.fieldApiName] = this.giftTransactionId;
        }

        // Submit updated fields
        this.template.querySelector('lightning-record-edit-form').submit(fields);
    }

    handleSuccess(event) {
        this.isSubmitting = false;
        this.errorMessage = undefined;
        // Show a success toast using platform event
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Gift Tribute Created!',
                variant: 'success'
            })
        );

        this.closeModal();

       
    }

    handleError(event) {
        this.isSubmitting = false;
        // LDS error object includes detail; surface friendly message where possible
        const err = event.detail;
        this.errorMessage =
            (err && (err.message || err.detail || (err.output && err.output.errors && err.output.errors[0] && err.output.errors[0].message))) ||
            'An unexpected error occurred while creating the tribute.';

        // Show an error toast using platform event
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error',
                message: 'Failed to create Tribute: ' + this.errorMessage,
                variant: 'error'
            })
        );

    }

    handleCancel() {
       this.closeModal();
    }

    /**
     * Close the modal (emit custom event)
     */
    closeModal() {
        console.log('** in close modal');
        this.dispatchEvent(new CustomEvent('closemodal', {
            detail: {
                componentName: 'c/giftEntryTributePostSave'
            }
        }));
    }

/* toast helper removed; using ShowToastEvent directly */

}