Configurar um modal de pós-processamento para entrada de presente única na educação

Exemplo: Criar um registro de tributo de presente para entrada de presente único

Use componentes da Web Lightning para criar um registro de Tributação de presente para entrada de presente único.

EDIÇÕES NECESSÁRIAS
Disponível em: Lightning Experience
Disponível em: Edições Enterprise, Performance, Unlimited e Developer com Education Cloud Disponível em: Edições Enterprise, Unlimited e Developer com a Nonprofit Cloud

Esses fragmentos de código do componente da Web Lightning mostram um formulário muito básico para criar um registro de Tributação de presente para Entrada de presente único.

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

}