Get Related List Metadata and Records data | uiRelatedListApi Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil September 10, 2022

Using uiRelatedListApi you can get information about metadata and records data of related lists.

There are 6 related list apis are available in it, I have created a separate component for each of them to demonstrate the functionality and output.

In below example I will be getting information about Account object related lists. In my account object I am having 2 records in Contact and 1 record in Opportunity related list.


Example 1

getRelatedListCount - Get the related list records count.

HTML

1
2
3
4
5
6
7
8
9
<template>
  <lightning-card title="wireGetRelatedListCount">
    <template if:true={responseData}>
      <div class="slds-m-around_medium">
        <p key={responseData.count}>Related List Count: {responseData.count}</p>
      </div>
    </template>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { LightningElement, wire, api } from "lwc";
import { getRelatedListCount } from "lightning/uiRelatedListApi";

export default class GetRelatedListCount extends LightningElement {
  @api recordId;
  error;
  responseData;
  @wire(getRelatedListCount, {
    parentRecordId: "$recordId",
    relatedListId: "Opportunities"
  })
  const({ error, data }) {
    if (data) {
      this.responseData = data;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.responseData = undefined;
    }
  }
}


Output




Example 2

getRelatedListInfo - Get metadata of related list.


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <lightning-card title="wireGetRelatedListInfo">
    <template if:true={displayColumns}>
      <div class="slds-m-around_medium">
        <template for:each={displayColumns} for:item="col">
          <p key={col.fieldApiName}>{col.label}</p>
        </template>
      </div>
    </template>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { LightningElement, wire } from "lwc";
import { getRelatedListInfo } from "lightning/uiRelatedListApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";

export default class GetRelatedListInfo extends LightningElement {
  error;
  displayColumns;
  @wire(getRelatedListInfo, {
    parentObjectApiName: ACCOUNT_OBJECT.objectApiName,
    relatedListId: "Contacts"
    // recordTypeId: "Value" // optional
  })
  const({ error, data }) {
    if (data) {
      this.displayColumns = data.displayColumns;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.displayColumns = undefined;
    }
  }
}


Output


Example 3

getRelatedListInfoBatch - Get metadata for a batch of related lists.


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <template if:true={results}>
    <div class="slds-m-around_medium">
      <template for:each={results} for:item="result">
        <lightning-card
          key={result.result.fieldApiName}
          title={result.result.label}
        >
          <template for:each={result.result.displayColumns} for:item="col">
            <p key={col.fieldApiName}>{col.label}</p>
          </template>
        </lightning-card>
      </template>
    </div>
  </template>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { LightningElement, wire } from "lwc";
import { getRelatedListInfoBatch } from "lightning/uiRelatedListApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";

export default class GetRelatedListInfoBatch extends LightningElement {
  error;
  results;
  @wire(getRelatedListInfoBatch, {
    parentObjectApiName: ACCOUNT_OBJECT.objectApiName,
    relatedListNames: ["Contacts", "Opportunities"]
  })
  const({ error, data }) {
    if (data) {
      this.results = data.results;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.results = undefined;
    }
  }
}


Output



Example 4

getRelatedListsInfo - Get metadata of related lists in an object's default layout.

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <lightning-card title="wireGetRelatedListsInfo">
    <template if:true={relatedLists}>
      <div class="slds-m-around_medium">
        <template for:each={relatedLists} for:item="relatedList">
          <p key={relatedList.label}>{relatedList.label}</p>
        </template>
      </div>
    </template>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { LightningElement, wire } from "lwc";
import { getRelatedListsInfo } from "lightning/uiRelatedListApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";

export default class GetRelatedListsInfo extends LightningElement {
  error;
  relatedLists;
  @wire(getRelatedListsInfo, {
    parentObjectApiName: ACCOUNT_OBJECT.objectApiName
    // recordTypeId: "value" //optional
  })
  const({ error, data }) {
    if (data) {
      this.relatedLists = data.relatedLists;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.relatedLists = undefined;
    }
  }
}


Output



Example 5

getRelatedListRecords - Get related list records. 

Parameters 
  • parentRecordId—(Required) The ID of the parent record that you want to get related lists for, like an Account ID.
  • relatedListId—(Required) The API name of a related list object, like Contacts, Opportunities, or Cases.
  • fields—(Optional) The API names of the related list’s column fields.
  • optionalFields—(Optional) The API names of additional fields in the related list.
  • pageSize—(Optional) The number of list records to return per page.
  • sortBy—(Optional) An array of field API names to sort the related list by. Accepts only one value per request.
  • where—(Optional) The filter to apply to related list records, in GraphQL syntax.

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <lightning-card title="wireGetRelatedListRecords">
    <template if:true={records}>
      <div class="slds-m-around_medium">
        <template for:each={records} for:item="rec">
          <p key={rec.fields.Id.value}>{rec.fields.Name.value}</p>
        </template>
      </div>
    </template>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { LightningElement, wire, api } from "lwc";
import { getRelatedListRecords } from "lightning/uiRelatedListApi";

export default class GetRelatedListRecords extends LightningElement {
  @api recordId;
  error;
  records;
  @wire(getRelatedListRecords, {
    parentRecordId: "$recordId",
    relatedListId: "Contacts",
    fields: ["Contact.Id", "Contact.Name"],
    where: '{ and:[{Name:{like:"Test%"}}]}'
  })
  const({ error, data }) {
    if (data) {
      this.records = data.records;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.records = undefined;
    }
  }
}


Output



Example 6

getRelatedListRecordsBatch - Get records for a batch of related lists.


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <template for:each={results} for:item="result">
    <lightning-card
      key={result.result.listReference.relatedListId}
      title={result.result.listReference.relatedListId}
    >
      <template if:true={result.result.count}>
        <div class="slds-m-around_medium">
          <template for:each={result.result.records} for:item="rec">
            <p key={rec.fields.Name.value}>{rec.fields.Name.value}</p>
          </template>
        </div>
      </template>
    </lightning-card>
  </template>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { LightningElement, wire, api } from "lwc";
import { getRelatedListRecordsBatch } from "lightning/uiRelatedListApi";

export default class GetRelatedListRecordsBatch extends LightningElement {
  @api recordId;
  error;
  results;
  @wire(getRelatedListRecordsBatch, {
    parentRecordId: "$recordId",
    relatedListParameters: [
      {
        relatedListId: "Contacts",
        fields: ["Contact.Name", "Contact.Id"],
        sortBy: ["Contact.Name"]
      },
      {
        relatedListId: "Opportunities",
        fields: ["Opportunity.Name", "Opportunity.Amount"],
        sortBy: ["Opportunity.Amount"]
      }
    ]
  })
  const({ error, data }) {
    if (data) {
      this.results = data.results;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.results = undefined;
    }
  }
}


Output




Checkout complete video tutorial below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Tags:

Post a Comment

0 Comments