0

I'm just starting learning LWCs and I thought I'd tackle something I know well which is Quick Actions and Related Record Components. They are fabulous, but have a few limitations (like not being able to modify Owner or not being able to default Currency), so I thought it might be easy to build something similar using the lightning-record-form. (Narrator: It was not easy) The fictitious scenario is a lookup on the Account record to Property__c for a Primary Property, and to show the Property form on the Account page.

I've got it so it does the following:

  • Shows the related record data
  • Can add and remove the related record from the main record
  • Updates the main record page on change of the component data
  • Set defaults when the component data is changed

Comparison between RRC and LWC

Or see a Gif showing functionality

CODE:

*******************HTML********************
<template>
    <template if:true={propertyId}>
        <lightning-card title="Property for Account" icon-name="custom:custom85">
            <div class="slds-m-around_medium">
                <lightning-record-form object-api-name='Property__c' record-id={propertyId} fields={propertyFields}
                    columns="2" mode="view" onsubmit={handleSubmit} onsuccess={handleSuccess}></lightning-record-form>
            </div>
        </lightning-card>
    </template>
    <template if:false={propertyId}>
        <lightning-card title="Property for Account" icon-name="custom:custom85">
            <div slot="actions">
                <lightning-button label="New Property" onclick={handleNewRelatedRecord}>
                </lightning-button>
            </div>
            <div class="slds-m-around_medium">
                <lightning-record-form object-api-name='Account' record-id={recordId} fields={accountFields} columns="1"
                    mode="view"></lightning-record-form>
            </div>
        </lightning-card>
    </template>
</template>

**************JS***************

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { NavigationMixin } from 'lightning/navigation';

import LGA_FIELD from '@salesforce/schema/Property__c.LGA__c';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import OWNER_FIELD from '@salesforce/schema/Property__c.OwnerId';
import BASEPRICE_FIELD from '@salesforce/schema/Property__c.BasePrice__c';
import DESCRIPTION_FIELD from '@salesforce/schema/Property__c.Description__c';
import CLOSED_FIELD from '@salesforce/schema/Property__c.Date_Closed__c';
import CURRENCY_FIELD from '@salesforce/schema/Property__c.CurrencyIsoCode';
import BEDS_FIELD from '@salesforce/schema/Property__c.Beds__c';
import PROPERTY_FIELD from '@salesforce/schema/Account.PrimaryProperty__c'

const ACCOUNT_FIELDS = [PROPERTY_FIELD];

export default class accountPropertyRecord extends NavigationMixin(LightningElement) {
    @api recordId; //Account ID
    @wire(getRecord, { recordId: '$recordId', fields: ACCOUNT_FIELDS })
    acct;

    get propertyId() {
        return getFieldValue(this.acct.data, PROPERTY_FIELD);
    }

    propertyFields = [NAME_FIELD, OWNER_FIELD, DESCRIPTION_FIELD, BEDS_FIELD, BASEPRICE_FIELD, CURRENCY_FIELD, LGA_FIELD, CLOSED_FIELD];
    accountFields = [PROPERTY_FIELD]

    handleSubmit(event) {
        debugger;
        event.preventDefault();
        const fields = event.detail.fields;
        fields.Beds__c = 1; // Set Default Field Value on Save
        this.template.querySelector('lightning-record-form').submit(fields);
    }

    handleSuccess() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'view'
            }
        });
    }

    handleNewRelatedRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Property__c',
                actionName: 'new'
            }
        })
    }
}

Issues:

  • It is slower to save and refresh on the screen than the RRC
  • It is not re-usable code at this stage.
  • It looks different to the RRC.

Questions:

  • Are there any improvements you can suggest?
  • Am I wasting my time with trying to re-create standard functionality with custom?
  • Creating a New Property returns to the Property record on save, do you know of a way to change the finish location of a modal yet so it can return to the Account page?
  • Is there a way of creating the new Property record and saving it back to the Account record at the same time (using standard lightning-record-edit)?
  • 2
    Not an answer, just an opinion, on your second question: make use of standard functionality, with its limitations, because then you don't have to spend the time writing and maintaining it yourself - Salesforce does it for you. Sure, it can be really frustrating when there's a gap, but get your stakeholders to understand the cost of plugging that gap and persuade them to live with it if possible. – Phil W Apr 29 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.