Configuration d'une fenêtre modale de post-traitement pour une entrée de don unique dans Nonprofit

Exemple : Création d'un enregistrement Hommage au don pour Entrée de don unique

Utilisez des composants Web Lightning pour créer un enregistrement Hommage au don pour une entrée de don unique.

ÉDITIONS NÉCESSAIRES
Disponible dans : Lightning Experience
Disponible dans : Enterprise, Performance, Unlimited et Developer Editions avec Education Cloud Disponible avec : Éditions Enterprise, Unlimited et Developer avec Nonprofit Cloud

Ces extraits de code de composant Web Lightning affichent un formulaire très basique pour créer un enregistrement Hommage au don pour Entrée au don unique.

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

}