Lightning Web Component - Display value of lookup(parent) records using Lightning Data Table

SCENARIO :

While working on one of the requirements for a health sector project for a client based out of Melbourne, Australia there was a requirement to display records with its lookup object fields in the lightning data table.

APPROACH : 

As the requirement is pretty straightforward, The client wants an LWC to display contact records with its related Account record(Parent) value on Lightning Data Table. 

Salesforce standard Lightning Data table is the most excellent table that is ready to utilize to show the record with interactive UI.

There are some limitations to using the standard Lightning Data table like we can not have a lookup field to directly resemble to display in the column.

In this blog, We will see how we can display Lookup fields in Lightning Data Table.

Let's jump with the example, Here we will display the Contact object records with the lookup object field Account Name.  

DataTableLwcController.cls

public without sharing class DataTableLwcController {
    
    @AuraEnabled(cacheable=true)
    public static list<Contact> getRecords(){
        return [SELECT Id,Name,AccountId,Account.Name,Phone,Email 
                       FROM contact WHERE AccountId != null LIMIT 10 ];
    }
        
}

The response that we will get from the apex method is a nested object. The response looks as below.

{
    "Id": "0032x000004N3PxAAK",
    "Name": "Rose Gonzalez",
    "Phone": "(512) 757-6000",
    "Email": "rose@edge.com",
    "AccountId": "0012x000006F1iAAAS",
    "Account": {
      "Name": "Edge Communications",
      "Id": "0012x000006F1iAAAS"
    }
}

To display lookup object fields, we need to resemble the response in the same object as below.

{
    "Id": "0032x000004N3PxAAK",
    "Name": "Rose Gonzalez",
    "Phone": "(512) 757-6000",
    "Email": "rose@edge.com",
    "AccountId": "0012x000006F1iAAAS",
    "AccountName": "Edge Communications",
    "ContactLink":"/0032x000004N3PxAAK",
    "AccountLink":"/0012x000006F1iAAAS",
    "Account": {
      "Name": "Edge Communications",
      "Id": "0012x000006F1iAAAS"
    }
}

Okay! Let's see in the js code how we can resemble the response.

let tempRecords = JSON.parse(JSON.stringify(data));
tempRecords = tempRecords.map(row => {
return { ...row,
         AccountName: row.Account.Name,                      
         ContactLink:'/'+row.Id,
         AccountLink:'/'+row.AccountId
       };

Below is our Lightning web Component

dataTableLwcExample.html

<template>
    <lightning-card title="Contacts" icon-name="standard:contact">
        <lightning-datatable 
            data={contacts} 
            columns={columns} 
            key-field="Id" 
            hide-checkbox-column='true' 
            show-row-number-column="true">
        </lightning-datatable>
    </lightning-card>
</template>

dataTableLwcExample.js

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

export default class DataTableLwcExample extends LightningElement {
    @track contacts;
    @track columns = [
        { 
            label: 'Name', 
            fieldName: 'ContactLink',
            type: 'url' ,
            typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}
        },
        { 
            label: 'Phone',
            fieldName: 'Phone',
            type: 'phone' 
        },
        { 
            label: 'Email',
            fieldName: 'Email',
            type: 'Email' 
        },
        { 
            label: 'Account',
            fieldName: 'AccountLink',
            type: 'url',
            typeAttributes: {label: { fieldName: 'AccountName' }, target: '_blank'},
            cellAttributes: { iconName: 'standard:account' } 
        }    
              
    ];
    //wiring an apex method to a function
    @wire(getRecords)
    WireAssignmentRecords({ data }) {
        if (data) {
            
            let tempRecords = JSON.parse(JSON.stringify(data));
            console.log(tempRecords);
            //binding the data into the same object
            tempRecords = tempRecords.map(row => {
                return { ...row,
                         AccountName: row.Account.Name,  
                         ContactLink:'/'+row.Id,         // Creating URL for Contact
                         AccountLink:'/'+row.AccountId   // Creating URL for Account
                       };
            }) 
            //Assign tempRecords to the contacts
            this.contacts = tempRecords;
            
        }
    }
}

Our Lightning Web Component looks like as below,

Output:-

If you have any questions you can reach out our Salesforce Consulting team here.

Create custom report types in Salesforce

INTRODUCTION

As we have already learned about the Report Types, Custom report types, and their features in our previous blog, let's take a quick look at custom report types. The first step in creating a report in Salesforce is to choose a report type and Salesforce has a lot of pre-defined Report Types.

You can not change Salesforce's predefined Report Types. When standard report types are not able to fulfil custom requirements, custom report types are developed to meet the end user goal. Salesforce administrator or a user with the permission to "Manage Custom Report Types" build Custom Reports. Let's see how we can create  our own custom report type…

MAKE YOUR OWN REPORT TYPES 

Select the primary object that your new report would serve, then give it a name and a brief summary. Mark it as "in development" before you are ready to let users to build reports with it. 

Follow below mentioned steps to create custom report type.

STEP 1. DEFINE custom REPORT Type

1. Go to Setup, using the setting in the top right corner.
2. Enter Report Types in the Quick Find box in Setup, then choose Report Types. 
3. Click on New Custom Report Type. 
   
   
   
   
4. For your custom report type, choose the Primary Object.
   
5. Fill out the Report Type Label and Report Type Name fields. 
6. Give your custom report type a description. 
7. Give users a clear understanding of can data is available for reports by including a meaningful summary. As an illustration: Display Account which is connected with at least one contact. 
8. Choose the category where you want the custom report type to be saved. Select a Status for Deployment.
    a. During design, testing, and editing, select In Development.
    b. When you're ready to give all users access to the report type, choose Deployed.
   
9. Click Next.
   
   
   
   

Step 2. Define Report Records Set

1. Under the Primary object, Click on "Click to relate another object" Link.
   
   
   
   
2. Choose a child object to work with. Only objects that are related to each other are shown. 
3. Choose one of the following conditions for each child object: 
     a.  Each "A" record must have at least one related "B" record. 
     b.  "A" records may or may not have related "B" records. 
4. Click Save. 
   

STEP 3. design the field layout

1. In the Fields Available for Reports section, click Edit Layout.
   
   
   
   
   
2. Drag and drop fields from the right-hand box to a segment on the left. 
3. Click Add fields related via lookup. From here, you can add fields to the object selected in the View dropdown list through the lookup relationship it has with other objects. 
4. Arrange fields on pages that you want users to see. When users create reports using this report type, fields that have not been dragged into a section are inaccessible. 
5. To decide the fields are included on the layout added to the report by default and added to the layout through a lookup relationship, click Preview Layout and use the legend. 
   
   
   
   
   
6. Select one or more fields and press Edit Properties to rename or set which fields are selected by default for users. 
    a. Next to one or more fields, select the Checked by Default checkbox.
    b. In the Display As field next to the field you want to rename, change the  text. 
    c. The Right mark icon appears on the field layout of the custom report type when fields are selected by default.    
   
   
   
   
   
   
7. Click Edit next to an existing section to rename it, or create a new section by clicking Create New Section. 

Thus, we have made a new custom report type here. You can now generate a new report with this report type. We've also looked at how to change the layout of a section, as well as how to render a field default and rename it. 

conclusion

Custom Report Types are an incredibly simple way to produce complex, interactive reports that go beyond and beyond traditional Salesforce reports. A report type can be thought of as a blueprint or structure that instructs Salesforce on which objects/relationships to investigate and fields to collect. 

If you have any questions you can reach out to our Salesforce Consulting team here.

CUSTOM REPORT TYPES NEEDS AND FEATURES

INTRODUCTION 

A report is a list of records that meet your defined requirements. It can be sorted, clustered, or shown in a graphical map in Salesforce and is shown in rows and columns. 

Each report is kept in its own folder. Folders can be made public, secret, or exchanged, and read-only or read/write and permissions can be set. Based on roles, permissions, public groups, and license types, you can control who has access to the contents of the folder. You may render a folder public or private so that only the owner has access to it. 

Every report is built around a specific report type. Only records that meet the requirements specified in the report type are shown in reports. One of the most crucial steps in creating a report is deciding on the appropriate report type. You choose the records and fields that will appear in your report when you choose a report type. Let's see what Report Type has to offer...… 

WHAT IS REPORT TYPE ?

A report type is similar to a prototype that simplifies reporting. When making a report, the report type decides which fields and records are accessible. The relationships between a primary object and its associated objects are the basis for this. 

The report type dictates the records are included in the report. When creating a report, the report type is chosen first. A primary object and one or more related objects exist for each report type. All of these items must be linked, either directly or indirectly. 

In Salesforce, there are two forms of report types:- 

1. Standard Report Types
   

   Standard Report Types are included by default for standard objects and custom objects that have the “Allow Reports” checkbox selected. Standard Report Types are not customizable and contain standard and custom fields for each object within the report type by default. When an object and/or a relationship are created, standard report forms are created as well. 

   As an example, the primary object in the 'Contacts & Accounts' report type is 'Contacts,' and the associated object is 'Accounts.' 
   
   

   
   

2. Custom Report Types
   

   Custom report types are reporting models that have been designed to make the reporting process more effective. An administrator or a user with the permission to "Manage Custom Report Types" may build Custom Reports. 

   We may define items that will be available in a specific report in custom report types. Custom Report Types can endorse the following object relationships: 

• Each "A" record must have at least one related "B" record. 
• "A" records may or may not have related "B" records. 
  
  

The following are described by Report Types: 

• Objects: Which Objects Can Be Seen by the Report 
• Object Relationship 
• Field layout 
• Default Field 
• Field name 

• 
  

WHY WE NEED CUSTOM REPORT TYPE 

The first step in creating a report in Salesforce is to choose a report type. Salesforce has a lot of pre-defined Report Types, which is awesome, but they don't always have exactly what we need. Standard report types cannot often have visibility through all the records or fields we need, or standard report types may be too difficult to use effectively.

You can't change Salesforce's predefined Report Types because they must be consistent with all orgs. Salesforce, fortunately, allows you to build custom report types. When standard report types can't determine which records will be available on reports, custom report types are developed. 

FEATURES OF CUSTOM REPORT TYPES 

Custom Report Types make creating nuanced, interactive reports that go beyond traditional Salesforce reports a breeze. We'll need to create custom report styles if we want to create reports that aren't normal. In comparison to regular report types, custom report types provide a number of advantages. Let's look at the features of custom report types in more detail... 
 

1. Rename the field section folder name 

The field panel in Salesforce's report builder does a good job of grouping fields, but some fields belong in a separate folder area. It's possible that a completely new custom folder section would be needed. 

We can change the folder name that grouped all the fields while creating a report.

 

2. Lookup Fields are a great way to add more fields 

You can not only add or delete fields related to the objects in the report type, but you can also add additional fields from related objects to the report. 

Under the object pick list, you'll see a connection that says Add fields related through lookup. When you click this, all of the objects that are connected to the selected object will appear. 

Now using this feature, we can get value from the related objects. 

 

Set Default Fields 

Salesforce will fill the report with a few default fields when you choose a regular report form. This makes the task of creating reports a lot simpler. 

Users must take some extra precautions when using custom report types since no data has defaulted. However, you can give the report some immediate value by defaulting fields to the report form, giving users a report prototype to work with right away. 

This allows the user to create a default layout by creating default fields. 

 

3. Reports with specific fields hidden 

We may also specify which fields can be recorded using custom report types. 

Have any old fields you don't want users to be able to access in a report? Perhaps you just want to reduce the number of fields you can report on in order to speed up the report development process. It's possible! 

Although fields may be omitted, it's worth noting that fields can need to be added to the report form at times. When you add new fields to an item, they don't always appear in the report because they haven't been added to the report type. 

 

WE'LL LEARN HOW TO CREATE CUSTOM REPORT TYPES AND SET FIELD LAYOUT FOR REPORTS IN OUR NEXT BLOG. 

If you have any questions you can reach out our Salesforce Consulting team here.