---
schema_version: "1"
id: 33f084884952f3a9c0a33de3cf960c461e4178688a3470c99bd4e80a4bdd777c
title: Custom Lightning Web Components in Gift Entry Grid in Education
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/sfdo/264-0-0/ec_fundraising_custom_lwc_in_gift_entry_grid.md
canonical_url: https://help.salesforce.com/s/articleView?id=sfdo.ec_fundraising_custom_lwc_in_gift_entry_grid.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b1235ccf93011826ac766f96b61f3be01eca3b007c4ebae7ececa5eae67edbe7
description: Understand how custom Lightning web components move data from and to the Gift Entry Grid.
products:
  - Education Cloud
release: "264"
---
# Custom Lightning Web Components in Gift Entry Grid in Education

Understand how custom Lightning web components move data from and to the Gift Entry Grid.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
      <colgroup>
        <col style="width:100%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d73428e39">REQUIRED EDITIONS</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="REQUIRED EDITIONS" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e39 ">Available in: Lightning Experience</td>

        </tr>
        <tr class="">
          <td data-label="REQUIRED EDITIONS" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e39 ">
            <p style="margin-bottom:0;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>,
              and <strong>Developer</strong> Editions with Education Cloud</p>
          </td>

        </tr>
      </tbody>
    </table>

## Properties Sent to a Component from the Gift Entry Grid

The Gift Entry Grid passes row data to custom Lightning web components through the params property for cell components and the rowData property for modals.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d73428e96">Property</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d73428e99">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e96 ">params</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e99 ">
              <ul>
                <li>Available in the Cell Edit and Cell Display components.</li>

                <li>Contains the properties of the current row within the Gift Entry Grid and the
                  underlying grid services.</li>

                <li><code>params.data</code> contains field values corresponding to GiftEntry
                  object fields in addition to object representations of lookup and picklist
                  fields. Fields not yet populated in a new row aren’t included in the data
                  collection.</li>

                <li>Row field values can be retrieved by using
                  <code>params.data.{giftEntryfieldName}</code>.
                </li>

              </ul>
            </td>

          </tr>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e96 ">rowData</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e99 ">
              <ul>
                <li>Available in Column Modal and Post Processing Modal.</li>

                <li>Contains field values corresponding to GiftEntry object fields in addition to
                  object representations of lookup and picklist fields. Fields not yet populated
                  in a new row aren't included in the rowData collection. </li>

                <li>Use <code>rowData.{giftEntryfieldName}</code> to retrieve row field
                  values.</li>

                <li>In the Post Processing Modal, rowData will also contain the ID of generated
                  records, such as Gift Entry ID (as <code>rowData.Id</code>) and Gift
                  Transaction ID (as <code>rowData.GiftTransactionId</code>).</li>

              </ul>
            </td>

          </tr>
        </tbody>
      </table>

## Sending Data Back to Gift Entry Grid

**Column Modals**

Column modals and cell edit components use different mechanisms to return data to the Gift Entry Grid.

Column Modals are rendered within a wrapper lightning web component that includes the modal title (as defined in the template) as well as a Continue and a Cancel button.

The Continue button is what the user will click to close your custom modal. It will call these required exposed functions:

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d73428e203">Function</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d73428e206">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Function" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e203 "><code>@api validate()</code></td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e206 ">
              <p>Return an object with two properties:</p>
              <ul>
                <li>isValid: true or false indicating that the contents of the modal passes your
                  validation rules. If true, the field values are retrieved through a call to
                  getComponentValues() and the modal is closed.</li>

                <li>invalidFields: If isValid is false, this contains a key:value set of fields
                  api names with the associated error. This info is used to render messages within
                  the modal.</li>

              </ul>
            </td>

          </tr>
          <tr class="">
            <td data-label="Function" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e203 "><code>@api getComponentValues()</code></td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d73428e206 ">
              <p>Return a key:value set of properties to apply to the row:</p>
              <ul>
                <li>{ FieldApiName : value, … }</li>

                <li>Each field must refer to a field that exists on the GiftEntry object. These
                  will be persisted to the row when saved.</li>

              </ul>
            </td>

          </tr>
        </tbody>
      </table>

**Cell Edit Component**

To return data back to the Gift Entry Grid from a cell edit component:

- Construct an object as the message to return to the Gift Entry Grid.
- Publish an event to the `lightning__giftEntryGridComponentAction` message channel.

The contents of the message body are strict. Follow the structure of this example:

```
// Build the "message" object to send back to 
// Gift Entry Grid following the documented contract
const message = {

    // Required properties (do not change the values below)
    action: "ColumnEdit",
    componentName: this.tagName,
    colId: this._params?.colDef?.colId,

    // 'details' is an optional property:
    // - include if there is data to write to the row 
    //   in Gift Entry
    details: {

        // rowId and rowIndex must be included in details
        rowId: this.params?.data?.id,           // Required
        rowIndex: this.params?.data?.rowIndex,  // Required

        // All GiftEntry fields to write to rowData
        // and as object in a key:value collection.
        // To clear the value of a field on the GiftEntry rowData
        // object, return null instead of undefined
        giftEntryFields : { key: value, ... },

        // rowProperties is optional, but if passed can be
        // referenced by other custom components. Data in this
        // object are not persisted to the GiftEntry record.
        rowProperties: { key : value, ... },

        // Special Use: If your custom column component is 
        // forcing a matched gift transaction, use these
        // properties to send the matching transaction ID 
        // and NAME back to grid for proper handling:
        matchingGiftTransactionId: {giftTransactionId},
        matchingGiftTransactionName: {giftTransactionName}
    }
}
```

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-education_cloud-264-0-0-production-enus/89403874-2a89-4126-b574-9db175c14f28/images/icon_note.png)

Note No properties are returned to the grid from the Column Component (Display) or Cell Display Component.

## Considerations for Returning Data

When returning data back to the Gift Entry Grid, consider these rules for picklist and lookup fields.

Picklist field considerations:

- If picklist fields are returned as a simple string, the value should represent the picklist API name in the event that the label and the API name are different.
- Picklist fields can also be returned as an object in the form of `{ value: xx, displayValue: zz }`. Here's an example:
    
    ```
    { 
      giftType: 
        { value: “Organizational”, 
          displayValue: “Organizativo/Doméstico” 
        }
    }
    ```

Lookup field considerations:

- Lookup Fields that are not columns in the Gift Entry Grid can be returned as just an ID string only in a response object. For example, `{MyLookupFieldId__c: ‘xxx00000000’}`
- Lookup fields that are field columns in the Gift Entry Grid, such as Campaign and Outreach Source Code, should be returned from a custom Lightning web component in an object form to make sure that they render properly in the grid. Here’s an example:
    
    ```
    Campaign: {
       Id: {campaignId},
       Name: {campaignName}
    }
    ```