Introduction

Using Orenda Grids- Extended Related List component ( XRL), the power user can customize the columns displayed by restricting certain columns to always appear in the Related List view and group them together on specific column to organize the data better. XRL also allows efficient and quick browsing of the Related List data with pagination which gets rid of endless scrolling to view records.

This article will explain how to: 

• Lock columns/fields so that the standard user cannot edit them during configuration
• Group the records according to the field name
• Enable checkboxes
• Enable/Disable pagination 

Limitations of the Salesforce Views

In Salesforce data views such as Related Lists, there is no flexibility of organizing and viewing records fit for individual user. 
The Related List columns are configured by admin and a regular user can't modify the records and columns in the Grid. Moreover, in Related Lists, a user has no idea about how many records are there, and to browse through records, they need to endlessly scroll through the Related List to view each record.

Locked Fields

This functionality ensures that the Related List view always contains specific fields which are locked by a power user. Whenever users need to modify the view, they can't remove the locked fields in the view.

Procedure

Follow these steps to understand how to lock columns during the configuration of the Orenda Grids XRL. We will work with the Cases XRL example to walk you through the steps.

Step 1: Click on the settings dropdown on the right and click on Configure option.

Step 2: The configuration wizard is displayed. Click on the Locked Fields tab. On the left sidebar, you will see a list of all the available fields for the Cases Related List. Select any field you want to lock and click on the arrow icon and it will be visible under the Locked Fields section.

Step 3: To change the order of the fields, simply click on the up and down arrows. Click Save to update the current view. Click Save As to save the view under a new name.

Results

The above-mentioned procedure results in the fields being locked as shown below. After enabling locked fields, any standard user who gets access to this view, will not be able to remove the locked field from the Related List view.

Grouped Records

This feature allows you to organize and manage the data logically in a Related List view by grouping the records based on any column. 

Procedure

Follow these steps to group records according to the field name in the XRL configuration. We will work with the Cases XRL example to walk you through the steps.

Step 1: Click on the settings dropdown on the right and click on Configure option.

Step 2: The configuration wizard is displayed. Click on the Table Settings tab. 

Step 3: Under the Field name to group records drop-down, select the field name by which the records will be grouped. 

Step 4: Under the Grouping Orders field, select whether you want to group the records in Ascending or Descending order.

Step 5: Click Save to save the configuration. Click Save As to save the configuration under a new name.

Results

By grouping, the records in the above-mentioned procedure result in the records being grouped as shown below.

Enable Record Selection and Bulk Actions

The Related List view in XRL gives the option to perform bulk actions on the records.  To be able to perform the bulk actions or record selection, it is a prerequisite to enable record selection by enabling checkboxes in the Related List view. By default, the record selection checkboxes will appear in the views. However, a power user can choose to turn off this functionality.

Procedure

Orenda Grids makes it simple to edit multiple records at once and quickly saves the revised view. This column helps the user to perform methods on specific rows or all rows at once. Follow these steps to add a checkbox to a table in the XRL configuration. This makes the process a lot quicker and easier.
We will work with the Cases XRL example to walk you through the steps.

Step 1: Click on the settings dropdown on the right and click on Configure option.

Step 2: The configuration wizard is displayed. Click on the Table Settings tab. 

Step 3: Select the options Enable numeration and Enable checkboxes to add a numbering and checkboxes column to a table. 

Step 5: Click Save to save the configuration. Click Save As to save the configuration under a new name. 

Results

By enabling the numeration and checkboxes, you can see that a column is added to the table as shown below. Instead of individually selecting a single record, you can select multiple records and perform bulk actions such as filtering, deleting, and saving the data. This allows the standard user to perform multiple actions at one time. 

For example, if you (a standard user) want to delete multiple records at the same time, simply select all the checkboxes and click on the delete icon.

Enable Pagination

The pagination feature allows you to efficiently browse through thousands of records, unlike Salesforce Related Lists where you need to do infinite scrolling to go through records. With no summary of records in the Related List, you become clueless and waste many minutes to go through the records and find the required data.

Procedure

Pagination allows users to quickly and efficiently browse tens of thousands of records with a few clicks. Users of Orenda Grids can choose to display up to 200 records on a single page and can view a summary of the records. Follow these steps to add a top and bottom pagination to a table in the XRL configuration. 
We will work with the Cases XRL example to walk you through the steps.

Step 1: Click on the settings dropdown on the right and click on Configure option.

Step 2: The configuration wizard is displayed. Click on the Table Settings tab. 

Step 3: Select the options Enable Top Pagination and Enable Bottom Pagination to add pagination to a table. 

Step 5: Click Save to save the configuration. Click Save As to save the configuration under a new name.

Results

By enabling the pagination, you can see that the page number is displayed on the top and bottom of the page. 

• Click on the numbered drop-down to display the number of records on one page. 
• Click on the next arrow to move to the next page.
• Click on this arrow to move to the last page.

Enable Drag and Drop of Records in XRL view

The grouping and reordering feature in XRL allows you to organize records within the grid by simply dragging and dropping them. By configuring the recordsDragDropCallback in the advanced table settings, you can rearrange records hierarchically. For instance, dragging one record onto another and releasing the mouse creates a parent-child relationship, which can then be saved to the database. This intuitive, real-time grouping functionality simplifies the process of managing relationships between records directly within the grid.

Limitations in Salesforce Views

1. No Hierarchical Grouping: Salesforce views don’t support creating or displaying parent-child relationships dynamically.
2. Static Record Order: Records can’t be reordered interactively, only sorted by fixed criteria.
3. No Drag-and-Drop: Salesforce lacks drag-and-drop functionality for managing record relationships.
4. Manual Updates: Changing relationships requires navigating to individual records or using external tools.

This feature streamlines these processes, allowing real-time updates directly in the grid.

Procedure

Step 1: Click on the gear icon on the right and click on Configure option.

 Step 2: The configuration wizard is displayed. Click on the Table Settings tab. 

Step 3: Go to Advanced section in the table settings and configure the code as mentioned in the snippet below.

{ 

    "afterloadTransformation": function(scope,libs,records){ 

       const recordMap = new Map(); 

       records.forEach(record => { 

         const { Id, ReportsToId } = record; 
     

         if (!recordMap.has(Id)) { 

           if(record.childRecords){ 

             recordMap.set(Id, { ...record}); 

           }else{ 

             recordMap.set(Id, { ...record, childRecords: [] }); 

           } 

         } 

      

         if (ReportsToId !== undefined) { 

           if (!recordMap.has(ReportsToId)) { 

               let r = libs.getGlobalVar(scope.name).originalRecords.find(r1 => r1.Id === ReportsToId); 

               if(r.childRecords){ 

                 recordMap.set(ReportsToId, { ...r}); 

               }else{ 

                 recordMap.set(ReportsToId, { ...r, childRecords: [] }); 

               } 

           } 

           recordMap.get(ReportsToId).childRecords.push(recordMap.get(Id)); 

         } 

       }); 

      

       const topLevelRecords = Array.from(recordMap.values()).filter(record => (record.ReportsToId === undefined && record.Id !== undefined)); 

       return topLevelRecords; 

     }, 

   "recordsDragDropCallback": function(scope,library,records,draggedRecord,futureParentRecord) { 

     draggedRecord.ReportsToId = futureParentRecord.Id; 

   console.log('check',library.getGlobalVar(scope.cfg)._changedRecords); 

   if(library.getGlobalVar(scope.cfg)._changedRecords !== undefined){ 

   console.log('defined'); 

   }else{ 

   library.getGlobalVar(scope.cfg)._changedRecords = []; 

   } 

   library.getGlobalVar(scope.cfg)._changedRecords.push(JSON.parse(JSON.stringify(draggedRecord))); 

    let r = records.find((rec) => rec.Id === draggedRecord.Id); 

    r=draggedRecord; 

       const recordMap = new Map(); 

      

       records.forEach(record => { 

         const { Id, ReportsToId } = record; 

      

         if (!recordMap.has(Id)) { 

           if(record.childRecords){ 

             recordMap.set(Id, { ...record}); 

           }else{ 

             recordMap.set(Id, { ...record, childRecords: [] }); 

           } 

         } 

      

         if (ReportsToId !== undefined) { 

           if (!recordMap.has(ReportsToId)) { 

               let r = records.find(r1 => r1.Id === ReportsToId); 

               if(r.childRecords){ 

                 recordMap.set(ReportsToId, { ...r}); 

               }else{ 

                 recordMap.set(ReportsToId, { ...r, childRecords: [] }); 

               } 

           } 

           recordMap.get(ReportsToId).childRecords.push(recordMap.get(Id)); 

         } 

       }); 

     
       const topLevelRecords = Array.from(recordMap.values()).filter(record => (record.ReportsToId === undefined && record.Id !== undefined)); 

       return topLevelRecords; 

     } 

   } 

Step 4: Click on Save to update the current view or Save As to create a new view with updated settings.

Step 5: You can now drag and drop records to group in desired sequence.

Results

 As shown in the above snippet, you are able to drag and drop records to form a certain group based on required criteria or use cases.