Display Generic sObject in Lightning Web Components

In Lightning dynamic sObject binding is not supported, same goes with Lightning Web Components (LWC). If you want to display generic sObject in Lightning or want to use sObject in Lightning, you can check here. or if you want to study about Lightning Web Components (LWC) and want to get hands-on experience then you can check here.

Today in this post we will check how we can use Display Generic sObject in Lightning Web Components (LWC).

We can also display parent fields value using this. The code is similar as we have used in lightning, the only change is when we first get the sObject list we also need to convert it into object array else LWC throw an exception error it requires an array-like object, not 'null' or 'undefined'. AS LWC doesn’t support dynamic binding so we will do that part in JavaScript. In JavaScript we will get and set the value in the field.

Now we will check the code part. First we will create apex class in which we will query the records to display them in LWC.

public with sharing class LwcSObjectIterationController {
    @AuraEnabled(cacheable=true)
    public static List<sobject> getsObjectDetails(String objName) {
        String query = 'Select Id, Name, Owner.Name FROM '+objName+' LIMIT 10';
        return Database.query(query);
    }
}

lwcDisplaySobject.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Display Dynamic sObject in Lightning Web Components
        </h3>
        <div slot="footer">
                
        </div>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
                <thead>
                    <tr class="slds-text-title_caps">
                        
                        <th scope="col">
                            <div title="Key">Record Id</div>
                        </th>
                        <th scope="col">
                            <div title="Value">Record Name</div>
                        </th>
                        <th scope="col">
                            <div title="Value">Owner Name</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={dySobject} for:item="sobKey">
                        <tr key={sobKey.key}>
                            <th scope="col">
                                <c-lwcs-object key={sobKey.key} sobject={sobKey.value} field-name="Id"></c-lwcs-object>
                            </th>
                            <th scope="col">
                                <c-lwcs-object key={sobKey.key} sobject={sobKey.value} field-name="Name"></c-lwcs-object>
                            </th>
                            <th scope="col">
                                <c-lwcs-object key={sobKey.key} sobject={sobKey.value} field-name="Owner.Name"></c-lwcs-object>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
    </lightning-card>
</template>

lwcDisplaySobject.js

import { LightningElement, wire, track } from 'lwc';
import getsObjectDetails from '@salesforce/apex/LwcSObjectIterationController.getsObjectDetails';

export default class LwcDisplaySobject extends LightningElement {
    @track dySobject= [];
    @wire(getsObjectDetails, { objName: 'Account' })
    wiredResult(result) { 
        if (result.data) {
            //mapData = [];
            var conts = result.data;
            for(var key in conts){
                this.dySobject.push({value:conts[key], key:key}); //Here we are creating the array to show on UI.
            }
        }
    }
}

First we have fetch the value from controller using wire method. Then we have stored that result in an object array. You can also pass Object Name and Field Names dynamic. We have created another component lwcsObject (c-lwcs-object) child component in which we will pass sobject as value and field name in attributes. As the variable name is fieldName so when we refer it in parent component we use it as field-name because LWC support this naming conventions. IN Lightning Web Components we don’t have attribute, we use @api decorator instead of attributes.

lwcsObject.html

<template>
    {data}
</template>

lwcsObject.js

import { LightningElement,api, track } from 'lwc';
 
export default class LwcsObject extends LightningElement {
    @api sobject;
    @api fieldName;
    @track data = '';

    renderedCallback() {
        if(!this.fieldName.includes('.')) {
            this.data = this.sobject[this.fieldName];
        }
        else {
            this.data = this.sobject[this.fieldName.split(".")[0]][this.fieldName.split(".")[1]]; //Here we are fetching data from parent field
        }
    }
}

You can easily use the lwcsObject component in your existing component. Just pass the sObject and field name. Rest it will handle. As dynamic sObject binding is always required so this component will help us save time. We have also used renderedCallback() to get the value in JavaScript and then assign it to variable.

Did you like this post or want to add anything, let me know in comments section. Happy Programming 🙂