Introduction

Orenda Grids component Extended Related Lists (or XRL) allows Salesforce Users to define and optimize the Salesforce data views such as Related Lists as required by the user.

The ability to format columns for improved data visualization and analysis is one of the main advantages of the Orenda Grids XRL. In order to customize the view to meet your unique needs, we will look at how to leverage the XRL capability to give you a tailored appearance and behavior of Related Lists. 

Customizations using advanced section include:

Dynamic Field Value Manipulation:

• Delve into the intricacies of the "formatter" function within XRL JSON.
• Learn how to save and present field values with a custom code, offering a tailored representation for each record.
• Explore real-world examples where values are transformed or augmented to meet specific requirements.

Visual Styling for Enhanced Presentation:

• Harness the power of the "customStyle" function to apply dynamic styling to individual cells or entire rows in your related list.
• Experiment with background colors, text formatting, and other styling options to create a visually appealing and cohesive display.

Conditional Data Filtering:

• Leverage the "whereCondition" attribute to implement intelligent data filtering within your related lists.
• Walk through scenarios where you can selectively display records based on specific conditions, enhancing the relevance and focus of your data.

Advanced Callback Functions:

• Uncover the potential of the "optionsCallback" function to dynamically generate options for users within your related lists.
• Implement callback functions to create interactive elements, such as dropdown menus, providing users with a seamless and intuitive experience.

Beyond Basic Customization:

• Explore additional use cases for related list customization, such as adding custom buttons with specific actions, and integrating external data sources for a holistic view.
• Understand how XRL JSON code can be extended to achieve complex customization scenarios that go beyond the basics.

Limitations in Salesforce Data Views (Related Lists)

Uniform Styling Across Records:

• The default styling options in standard related lists might not cater to the diverse visual requirements of different records. As a result, you might miss out on important insights and trends or spend lot of time to reach out to specific conclusions.

Cumbersome Data Representation:

• For complex business scenarios, the default related lists may struggle to represent data in a way that aligns with unique business processes. This limitation can lead to a disconnect between the application's capabilities and the organization's operational needs.

Recognizing these limitations underscores the significance of advanced customization features like XRL JSON. By leveraging the power of XRL, developers can overcome these challenges, providing users with a more tailored, visually appealing, and interactive experience. 

Procedure

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 Fields Settings tab. Under the Fields Selection drop-down, select the field you want to customize. i.e., Case Origin in the given example. 

Step 3: Hide columns

The "Hide this column" feature allows users to hide columns in Orenda Grids XRL. This feature is useful when a user only needs to focus on specific columns and does not want to see unnecessary data in the related list view. Please note that this column will be hidden if it is configured in the view. By default, all the configured columns are visible in the Related List view.

Step 4: Is column filterable

This setting allows you to enable column filter in the configured columns. To learn more about column-filters in XRL, click here.

Step 5: Is column sortable

This setting allows you to enable sorting in real time in XRL view. 

Step 6: Is column editable

This setting allows you to enable inline editing of a field in the XRL view. Learn more about this feature here.

Step 7: Wrap column content

The "wrap column content" is a feature in many table/grid interfaces that allows text within a cell or column to wrap to multiple lines instead of overflowing or being truncated. This can be especially helpful when dealing with long entries or descriptions that don't fit in a single line.

Step 8: Width

The width feature in field settings allows you to adjust the width of a field when it appears in a column layout on a page. This can be useful for controlling the layout of page sections, ensuring that fields fit neatly into columns without being cut off or overlapping with other fields. You can use % or px for the definition. In the example below, let us give 20px or 5% width for the Description field.

Step 9: Advanced Section Settings

In this tab, you can configure  JSON code that allows you to seamlessly configure custom formatting, styling, and callback functions. Within the "formatter," "customStyle," and "optionsCallback" functions, you'll encounter parameters such as row, col, and val, representing the row number, column number, and the current cell value, respectively.

Using this custom code, you can dynamically modify the data such that:

"formatter" Function:

• The "formatter" function appends the string '123' to the original cell value, specifically for the rows where the "FirstName" field is 'Tim'. This results in a modified cell value, enhancing the displayed data.

"customStyle" Function:

• The "customStyle" function sets the text color to red for the specified rows where the "FirstName" field is 'Tim'. This creates a visual distinction by applying a unique style to the corresponding cells.

"optionsCallback" Function:

• The "optionsCallback" function dynamically generates options for a dropdown menu associated with the "Phone" column. It provides users with a selectable option labeled "Phone," contributing to an interactive and user-friendly experience.

{
	"referencedObject": {
		"fields": ["Id", "Name", "FirstName"],
		"whereCondition": "FirstName= 'Tim'"
	},
      "formatter":function(scope,libs,row,col,val){  val = val + '123';  return val;},
      "customStyle": function(scope,libs,row,col,val){  return 'color:red;';},


   "optionsCallback":function(scope,libs,column,record){
	return [{label:"Phone",value:"Phone"}];
    }
}

The above formatting results in data in Case Type column to look like below.

Example 2: 

Using Advanced settings, you can also modify other representation criteria such as background color. Using the code snippet below, you can modify the background color of text in a given column, provided. For example, in the Case Type field, we can customize the background color of columns where the Case Type value is Structural.

{

	"customStyle": function(row, col, val) {
		if (val === "Structural") {
			return 'background-color: yellow;';
		} else {
			return ''; // No specific styling for other cases
		}
	},
	"optionsCallback": function(scope, libs, column, record) {
		return [{ label: "Web", value: "Web" }];
	}
}

Results

Thus, following the steps above result in Case Origin field values to be presented in a different format. You also get customized column view where the background color of the value has turned yellow if the Case Type value is Structural.

Orenda Grids Extended Related Lists (XRL) present a powerful avenue for Salesforce users to redefine and optimize their views such as Related Lists and List views. The customization capabilities offered by XRL empowers you to go beyond the standard configurations and tailor your data presentation according to unique needs.


To learn about row customizations, visit our article on How to Enhance Data Representation through Advanced Row Settings.