Object Information in Lightning Web Component

Lightning Web Component 10 comments

Object metadata can be directly retrieved in Lightning Web Component by using wire adapter. We are going to build a Lightning Web Component to explore the Object information in Lightning Web Component.

getObjectInfo:- Use this wire adapter to get metadata about a specific object. The response includes metadata describing fields, child relationships, record type, and theme.

getObjectInfo – Syntax

import { LightningElement, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {
    //objectApiName -a (Required) parameter
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    propertyOrFunction;
}

Let’s create a Lightning Web Component with Name wireGetObjectInfo. It will have the three file by default.

Object metadata can be directly retrieved in Lightning Web Component by using wire adapter. We are going to build a Lightning Web Component to explore the metadata information about the object inside a Lightning Web Component.

wireGetObjectInfo.html

The below html file have following:-

  • A text field to type Object Api Name and look for Object Information in Lightning Web Component.
  • A picklist field to select the field to see the specific information about a particular field
  • Another picklist field to select the child relationship Object Name to see the metadata about it.
  • A list of interesting facts from the metadata information.
<template>
    <lightning-card title="WireGetObjectInfo" icon-name="custom:custom67">

        <lightning-layout multiple-rows>
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="12" large-device-size="12"
                padding="around-small">
                <div class="slds-m-horizontal_medium">
                    <lightning-input value={objectApiNameInputValue} placeholder="Enter object API name"
                        onchange={objectNameChange} label="Search"></lightning-input>
                    <p class="slds-p-vertical_small">
                        <lightning-button label="Get Object Info" onclick={handleBtnClick}></lightning-button>
                    </p>
                    <template if:true={objectInfo.data}>
                        <div class="scroller">
                            <pre>{objectInfoStr}</pre>
                        </div>
                        <lightning-combobox name="fieldApiName" label="Select Field To Get Informtion" value=""
                            placeholder="Select Field Api Name" options={fieldOptions} onchange={fieldNameChange}
                            required>
                        </lightning-combobox>
                        <p class="slds-p-vertical_small">
                            <lightning-button label="Get Field Info" onclick={handleFieldBtnClick}>
                            </lightning-button>
                        </p>
                        <template if:true={fieldInformation}>
                            <div class="scroller">
                                <pre>{fieldInformation}</pre>
                            </div>
                        </template>
                        <lightning-combobox name="childRelationShipApiName"
                            label="Select Relationship To Get Informtion" value=""
                            placeholder="Select child Relationship Api Name" options={childOptions}
                            onchange={childRelationNameChange} required>
                        </lightning-combobox>
                        <p class="slds-p-vertical_small">
                            <lightning-button label="Get Child Relationship Info" onclick={handleChildRelationBtnClick}>
                            </lightning-button>
                        </p>
                        <template if:true={childRelationshipInformation}>
                            <div class="scroller">
                                <pre>{childRelationshipInformation}</pre>
                            </div>
                        </template>
                    </template>
                </div>
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="12" large-device-size="12"
                padding="around-small">
                <div class="custom-box slds-box slds-p-around_medium slds-text-align_left">
                    <p>Total Number of Fields:-
                        <lightning-formatted-number value={numberOfFileds}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Custom Fields:-
                        <lightning-formatted-number value={totalCustomField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Standard Fields:-
                        <lightning-formatted-number value={totalStandardField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Record Types:-
                        <lightning-formatted-number value={numberOfRecordTypes}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Child relationship:-
                        <lightning-formatted-number value={numberOfChildRelationship}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Text(String) Fields:-
                        <lightning-formatted-number value={totalStringField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Reference Fields:-
                        <lightning-formatted-number value={totalReferenceField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Picklist Fields:-
                        <lightning-formatted-number value={totalPicklistField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Currency Fields:-
                        <lightning-formatted-number value={totalCurrencyField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Double Fields:-
                        <lightning-formatted-number value={totalDoubleField}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Address Fields:-
                        <lightning-formatted-number value={totalAddressFields}></lightning-formatted-number>
                    </p>
                    <p>Total Number of TextArea Fields:-
                        <lightning-formatted-number value={totalTextAreaFields}></lightning-formatted-number>
                    </p>
                    <p>Total Number of DateTime Fields:-
                        <lightning-formatted-number value={totalDateTimeFields}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Integer Fields:-
                        <lightning-formatted-number value={totalIntegerFields}></lightning-formatted-number>
                    </p>
                    <p>Total Number of Updateable Fields:-
                        <lightning-formatted-number value={totalUpdateableField}></lightning-formatted-number>
                    </p>
                    <p>Object key Prefix:- {ObjectkeyPrefix}</p>
                    <lightning-input type="checkbox" label="Searchable" name="Searchable" checked={isSearchable}
                        disabled></lightning-input>
                    <lightning-input type="checkbox" label="Queryable" name="Queryable" checked={isQueryable} disabled>
                    </lightning-input>
                    <lightning-input type="checkbox" label="Updateable" name="Updateable" checked={isUpdateable}
                        disabled>
                    </lightning-input>

                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

wireGetObjectInfo.js

In order to use getObjectInfo wire adaptor, you must import the it first from uiObjectInfoApi. It expect the Object Api Name as parameter and returns the object metadata. Once it returns the metadata information of the Object, we are performing some additional operation to find the information about each field and child relationship.

import { LightningElement, wire, track } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class WireGetObjectInfo extends LightningElement {
    objectApiNameInputValue = 'Account';
    objectApiName;
    @track objectInfo;

    fieldApiNameInputValue;
    fieldApiName;

    childRelationshipApiNameInputValue;
    childRelationShipApiName;

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    objectInfo;

    childRelationNameChange(event) {
        this.childRelationshipApiNameInputValue = event.target.value;
    }

    handleChildRelationBtnClick() {
        this.childRelationShipApiName = this.childRelationshipApiNameInputValue;
    }

    objectNameChange(event) {
        this.objectApiNameInputValue = event.target.value;
    }

    handleBtnClick() {
        this.objectApiName = this.objectApiNameInputValue;
    }

    fieldNameChange(event) {
        this.fieldApiNameInputValue = event.target.value;
    }
    handleFieldBtnClick() {
        this.fieldApiName = this.fieldApiNameInputValue;
    }

    get fieldOptions() {
        let fieldList = [];
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < Object.entries(this.objectInfo.data.fields).length; i++) {
                        fieldList.push({
                            label: Object.entries(this.objectInfo.data.fields)[i][0],
                            value: Object.entries(this.objectInfo.data.fields)[i][0]
                        });
                    }
                }
            }
        }
        return fieldList;
    }
    get childOptions() {
        var childRelationship = [];
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.childRelationships) {
                    for (var i = 0; i < this.objectInfo.data.childRelationships.length; i++) {
                        childRelationship.push({
                            label: this.objectInfo.data.childRelationships[i].childObjectApiName,
                            value: this.objectInfo.data.childRelationships[i].childObjectApiName
                        });
                    }
                }
            }
        }
        return childRelationship;
    }

    get childRelationshipInformation() {
        let childRelationInfo;
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < this.objectInfo.data.childRelationships.length; i++) {
                        if (this.objectInfo.data.childRelationships[i].childObjectApiName === this.childRelationShipApiName) {
                            childRelationInfo = this.objectInfo.data.childRelationships[i];
                            break;
                        }
                    }
                }
            }
        }
        return childRelationInfo
            ? JSON.stringify(childRelationInfo, null, 2)
            : '';
    }

    get fieldInformation() {
        let fieldInfo;
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < Object.entries(this.objectInfo.data.fields).length; i++) {
                        if (Object.entries(this.objectInfo.data.fields)[i][0] === this.fieldApiName) {
                            fieldInfo = Object.entries(this.objectInfo.data.fields)[i][1];
                            break;
                        }
                    }
                }
            }
        }
        return fieldInfo
            ? JSON.stringify(fieldInfo, null, 2)
            : '';
    }

    get ObjectkeyPrefix() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.keyPrefix) {
                    return this.objectInfo.data.keyPrefix;
                }
            }
        }
        return null;
    }

    get objectInfoStr() {
        return this.objectInfo
            ? JSON.stringify(this.objectInfo.data, null, 2)
            : '';
    }
    get numberOfChildRelationship() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.childRelationships) {
                    return this.objectInfo.data.childRelationships.length;
                }
            }
        }
        return null;
    }

    get numberOfFileds() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    return Object.keys(this.objectInfo.data.fields).length;
                }
            }
        }
        return null;
    }

    get numberOfRecordTypes() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.recordTypeInfos) {
                    return Object.keys(this.objectInfo.data.recordTypeInfos).length;
                }
            }
        }
        return null;
    }

    get isUpdateable() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                return this.objectInfo.data.updateable;
            }
        }
        return null;
    }

    get isQueryable() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                return this.objectInfo.data.queryable;
            }
        }
        return null;
    }

    get isSearchable() {
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                return this.objectInfo.data.searchable;
            }
        }
        return null;
    }

    get totalUpdateableField() {
        let count = 0;
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < Object.entries(this.objectInfo.data.fields).length; i++) {
                        if (Object.entries(this.objectInfo.data.fields)[i][1].updateable === true) {
                            count++;
                        }
                    }
                }
            }
        }
        return count;
    }

    get totalCustomField() {
        let count = 0;
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < Object.entries(this.objectInfo.data.fields).length; i++) {
                        if (Object.entries(this.objectInfo.data.fields)[i][1].custom === true) {
                            count++;
                        }
                    }
                }
            }
        }
        return count;
    }

    countNumberOfField(fieldType) {
        let count = 0;
        if (this.objectInfo) {
            if (this.objectInfo.data) {
                if (this.objectInfo.data.fields) {
                    for (var i = 0; i < Object.entries(this.objectInfo.data.fields).length; i++) {
                        if (Object.entries(this.objectInfo.data.fields)[i][1].dataType === fieldType) {
                            count++;
                        }
                    }
                }
            }
        }
        return count;
    }

    get totalIntegerFields() {
        return this.countNumberOfField('Int');
    }

    get totalDateTimeFields() {
        return this.countNumberOfField('DateTime');
    }

    get totalTextAreaFields() {
        return this.countNumberOfField('TextArea');
    }

    get totalAddressFields() {
        return this.countNumberOfField('Address');
    }

    get totalDoubleField() {
        return this.countNumberOfField('Double');
    }

    get totalCurrencyField() {
        return this.countNumberOfField('Currency');
    }

    get totalPicklistField() {
        return this.countNumberOfField('Picklist');
    }

    get totalReferenceField() {
        return this.countNumberOfField('Reference');
    }

    get totalStringField() {
        return this.countNumberOfField('String');
    }

    get totalStandardField() {
        return parseInt(this.numberOfFileds) - parseInt(this.totalCustomField);
    }
}

wireGetObjectInfo.js-meta.xml

The meta-xml defines the metadata configuration information of the component. As per below code the component can be used in record, home and application page in Salesforce Lightning Experience.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Object Metadata Explorer in Lightning Web Component

The below demo extend the simple object info component to give some insight about it. It allows you select the field from the object and also the child object to get the relationship info. It also tells some interesting number from the object info.

Object Information – References

10 comments

  2. Hi Sanket,

    This article is great!! one question, can we apply this solution for custom settings?

    Best,

    Reply
  3. Pingback: Reusable Dynamic Lightning Input with Field Level Security - Salesforce Diaries

  4. Hi,
    This code is not working it has error in js
    It has a error ( No MODULE named markup://c:viewSource found : [markup://c:wireGetObjectInfo)

    Reply

      1. hi
        thanks for the reply I have requirement can I get references for this
        1. Create an app to get custom field’s dependent components
        2. Create UI using LWC
        a. Dropdown to list all objects in the org
        b. Dropdown to list the custom fields of selected object
        c. Search button to show the results
        d. Show the result of the dependencies of selected custom fields
        i. Custom Field Name
        ii. Custom Field Type
        iii. Object
        iv. Dependent Component
        v. Dependent Component Type
        e. Use Apex code to get query results
        f. Create a button to get all dependencies of all the custom fields in the org
        i. Export the results to a CSV file
        3. Write Apex code to run SOQL queries
        a. Get all objects in the org
        b. Get all the custom fields of selected object
        c. Get the dependencies of the selected custom fields
        d. Get the dependencies of all custom fields

  5. Hi
    thanks for the reply
    I have a requirement
    1. Create an app to get custom field’s dependent components
    2. Create UI using LWC
    a. Dropdown to list all objects in the org
    b. Dropdown to list the custom fields of selected object
    c. Search button to show the results
    d. Show the result of the dependencies of selected custom fields
    i. Custom Field Name
    ii. Custom Field Type
    iii. Object
    iv. Dependent Component
    v. Dependent Component Type
    e. Use Apex code to get query results
    f. Create a button to get all dependencies of all the custom fields in the org
    i. Export the results to a CSV file
    3. Write Apex code to run SOQL queries
    a. Get all objects in the org
    b. Get all the custom fields of selected object
    c. Get the dependencies of the selected custom fields
    d. Get the dependencies of all custom fields

    For this can I have any references of yours

    Reply

  6. Great post on object information in Lightning Web Component!
    It’s impressive to see how much can be achieved with LWC and how easily you can access and manipulate object data. Your explanations and examples are clear and concise, making it easy for readers to follow along and implement in their own projects. Keep up the great work!

    Reply

Leave a Reply