You are here:
Custom Lightning Web Components in Gift Entry Grid in Nonprofit
Understand how custom Lightning web components move data from and to the Gift Entry Grid.
| REQUIRED EDITIONS |
|---|
| Available in: Lightning Experience |
Available in: Enterprise, Performance, Unlimited, and Developer Editions with Education Cloud Available in: Enterprise, Unlimited, and Developer Editions with Nonprofit Cloud |
- 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. - Sending Data Back to Gift Entry Grid
Column modals and cell edit components use different mechanisms to return data to the Gift Entry Grid. - Considerations for Returning Data
When returning data back to the Gift Entry Grid, consider these rules for picklist and lookup fields.
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.
| REQUIRED EDITIONS |
|---|
| Available in: Lightning Experience |
Available in: Enterprise, Performance, Unlimited, and Developer Editions with Education Cloud Available in: Enterprise, Unlimited, and Developer Editions with Nonprofit Cloud |
| Property | Description |
|---|---|
| params |
|
| rowData |
|
Sending Data Back to Gift Entry Grid
Column modals and cell edit components use different mechanisms to return data to the Gift Entry Grid.
| REQUIRED EDITIONS |
|---|
| Available in: Lightning Experience |
Available in: Enterprise, Performance, Unlimited, and Developer Editions with Education Cloud Available in: Enterprise, Unlimited, and Developer Editions with Nonprofit Cloud |
Column Modals
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:
| Function | Description |
|---|---|
@api validate() |
Return an object with two properties:
|
@api getComponentValues() |
Return a key:value set of properties to apply to the row:
|
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__giftEntryGridComponentActionmessage 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}
}
}
Considerations for Returning Data
When returning data back to the Gift Entry Grid, consider these rules for picklist and lookup fields.
| REQUIRED EDITIONS |
|---|
| Available in: Lightning Experience |
Available in: Enterprise, Performance, Unlimited, and Developer Editions with Education Cloud Available in: Enterprise, Unlimited, and Developer Editions with Nonprofit Cloud |
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} }
