Configurar un modal de postprocesamiento para entrada de regalo única en Educación

Ejemplo: Crear un registro de homenaje de regalo para una única entrada de regalo

Utilice componentes web Lightning para crear un registro Homenaje de regalo para una única entrada de regalo.

EDICIONES REQUERIDAS
Disponible en: Lightning Experience
Disponible en: Ediciones Enterprise, Performance, Unlimited y Developer con Education Cloud Disponible en: Ediciones Enterprise, Unlimited y Developer con Nonprofit Cloud

Estos miniprogramas de código de componente web Lightning muestran un formulario muy básico para crear un registro Homenaje de regalo para Entrada de regalo única.

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 */

}