0

I have a requirement where I need to show some images based on field values . The fields and object is obtained from design attributes.

import { getRecord } from 'lightning/uiRecordApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
         
@api recordId;

//Variables used as design attributes - start
@api objectApiName;
@api field1ApiName;
@api field2ApiName;
@api field3ApiName;
//Variables used as design attributes - end

fieldArray = [];
@track recordsList = [];

connectedCallback() {
    if (this.objectApiName != undefined) {
        if (this.field1ApiName != undefined && this.field1ApiName != null)
            this.fieldArray.push(this.objectApiName + '.' + this.field1ApiName);
        if (this.field2ApiName != undefined && this.field2ApiName != null)
            this.fieldArray.push(this.objectApiName + '.' + this.field2ApiName);
        if (this.field3ApiName != undefined && this.field3ApiName != null)
            this.fieldArray.push(this.objectApiName + '.' + this.field3ApiName); 
 }}


@wire(getObjectInfo, { objectApiName: '$objectApiName' })
accountInfo({ data, error }) {
if (data) {
if (this.field1ApiName != undefined && this.field1ApiName != null) {
 let record = {};
                record["key"] = this.field1ApiName;
                record["fieldLabel"] = data.fields[this.field1ApiName].label;
                this.recordsList.push(record);
     }
   if (this.field2ApiName != undefined && this.field2ApiName != null) {
   let record = {};
                record["key"] = this.field2ApiName;
                record["fieldLabel"] = data.fields[this.field2ApiName].label;
                this.recordsList.push(record);
     }
   if (this.field3ApiName != undefined && this.field3ApiName != null) {
   let record = {};
                record["key"] = this.field3ApiName;
                record["fieldLabel"] = data.fields[this.field3ApiName].label;
                this.recordsList.push(record);
     }
 }

  @wire(getRecord, { recordId: '$recordId', fields: '$fieldArray' })
  wiredAccount({ error, data }) {
  if(data)
 {
   if (this.recordsList != null && this.recordsList.length > 0) {
                for (var i = 0; i < this.recordsList.length; i++) {
                    if (this.field1ApiName != undefined && this.field1ApiName != null && 
  this.recordsList[i].key === this.field1ApiName) {
   let record = this.recordsList[i];
   record["fieldValue"] = data.fields[this.field1ApiName].value;
    this.recordsList[i] = record;
 }

if (this.field2ApiName != undefined && this.field2ApiName != null && 
  this.recordsList[i].key === this.field2ApiName) {
   let record = this.recordsList[i];
   record["fieldValue"] = data.fields[this.field2ApiName].value;
    this.recordsList[i] = record;
 }

if (this.field3ApiName != undefined && this.field3ApiName != null && 
  this.recordsList[i].key === this.field3ApiName) {
   let record = this.recordsList[i];
   record["fieldValue"] = data.fields[this.field3ApiName].value;
    this.recordsList[i] = record;
 }
 }
 }

I have recordsList in the below format

       [{"key":"Field1 API Name","fieldLabel":"Field1 Label","fieldValue":Field1 value},
       {"key":"Field2 API Name","fieldLabel":"Field2 Label","fieldValue":Field2 value},
       {"key":"Field3 API Name","fieldLabel":"Field3 Label","fieldValue":Field3 value}]

So in the first wire method getObjectInfo, I am passing object and with the returned data, I am creating an object and assigning key and fieldLabel properties(based on data from getObjectInfo) and pushing that object to an array recordsList.

In the second wire method getRecord, I am getting the field values.Iterating the recordsList array and populating the property "fieldValue"

The issue here is sometimes the wire property getObjectInfo executes first and sometimes getRecord executes first.Is there any way to make the wire methods to execute in a particular order? Or in getRecord method, is it possible to get label of the field?

2

A wire is invoked as soon as all its dynamic/reactive properties have non-undefined values. To satisfy this in your case you want to ensure that the this.fieldArray property is initialized to undefined rather than an empty array. This will prevent the getRecord wire from being invoked until you are ready. You then simply ensure that you build the array content as required and finally assign this.fieldArray to the built array detail when you are ready for getRecord to be invoked.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.