Grid - Custom Inline Component

Introduction

All GridMate components can be used as inline components just by configuration. However there is some situations where a custom component is required to address the business needs.

To address this type of use cases, you can implement your own Aura or LWC component. Both components should have recordId as an attribute.

If the component is an Aura component, it should be declared as a global as well as the recordId attribute.

Aura Implementation

Aura Component

Our use case is to display a relative date based on the close date like a timer. Let's go ahead and start our custom Aura component using Lightning Data Service and relativeDateTime lightning component.

CloseDateTimerComponent.cmp

<aura:component implements="force:hasRecordId" access="global">
    <aura:attribute name="style" type="String" access="global" />

    <aura:attribute name="recordData" type="Object" />
    <aura:attribute name="recordError" type="String" />
    <aura:attribute name="closeDate" type="Object" />

    <aura:handler name="change" value="{!v.recordData}" action="{!c.handleRecordDateChange}" />

    <force:recordData
        aura:id="recordData"
        recordId="{!v.recordId}"
        fields="Name,CloseDate"
        targetFields="{!v.recordData}"
        targetError="{!v.recordError}"
    />

    <aura:if isTrue="{! v.closeDate }">
        <div class="slds-align_absolute-center">
            Closing&nbsp;
            <span style="{!v.style}">
                <lightning:relativeDateTime value="{!v.closeDate}" />
            </span>
        </div>
    </aura:if>
</aura:component>

CloseDateTimerComponentController.js

({
    handleRecordDateChange: function (component, event, helper) {
        component.set('v.closeDate', null);

        let recordData = component.get('v.recordData');
        if (recordData && recordData.CloseDate) {
            component.set('v.closeDate', new Date(recordData.CloseDate));
        }
    }
});

Inline Component Configuration

Our Aura component is ready. Let's go ahead and configure it as an inline component as below. Note that we can have dynamic attributes to customize the behavior per grid if needed. In our example, we are passing the style of the timer.

[
    {
        "component": "c:CloseDateTimerComponent",
        "attributes": {
            "style": "font-size:large;color:blue"
        }
    }
]

Close Date Timer - Aura

LWC Implementation

LWC Component

LWC is also an option to implement an inline component. Below is the LWC version of the Close Date Timer component implemented above.

The LWC component should be exposed. Otherwise it will not be visible to GridMate.

closeDateTimerLWC.html

<template>
    <template if:true={closeDate}>
        <div class="slds-align_absolute-center">
            Closing&nbsp;
            <span style={timerStyle}>
                <lightning-relative-date-time value={closeDate}>
                </lightning-relative-date-time>
            </span>
        </div>
    </template>
</template>

closeDateTimerLWC.js

import { LightningElement, api, wire } from 'lwc';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CLOSE_DATE_FIELD from '@salesforce/schema/Opportunity.CloseDate';

export default class CloseDateTimerLWC extends LightningElement {
    @api recordId;
    @api timerStyle;

    @wire(getRecord, { recordId: '$recordId', fields: [CLOSE_DATE_FIELD] })
    recordData;

    get closeDate() {
        let oppCloseDate = getFieldValue(
            this.recordData.data,
            CLOSE_DATE_FIELD
        );

        if (oppCloseDate) {
            return new Date(oppCloseDate);
        }

        return null;
    }
}

closeDateTimerLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

Inline Component Configuration

Let's go ahead and configure the inline component as below:

[
    {
        "component": "c:closeDateTimerLWC",
        "attributes": {
            "timerStyle": "font-size:large;color:blue"
        }
    }
]

And obviously we get the same result as a above.

Close Date Timer - LWC