Introduction

Using HyperGrid XRL, the Power user can use conditional formatting of rows for applying formatting rules to rows in a HyperGrid XRL based on certain conditions. You can, for example, highlight rows where a certain value is greater than a specified value or where the value equals a specific text. This allows you to quickly identify the most important data in your list without having to manually filter or sort it. It is a must-have feature for power users who need to process data quickly and efficiently.

This article delves into the advanced row settings provided by XRL, demonstrating how users can leverage JavaScript and JSON code to enhance row interactions, improve data visualization, and customize the overall appearance of related lists.

Limitations in Salesforce Related Lists

Before diving into the advanced row settings, it's essential to acknowledge the limitations in standard Salesforce row configurations:

• Limited Row Interaction Customization: Standard Salesforce rows often lack the flexibility for users to define custom interactions or callbacks.
• Uniform Styling Challenges: The default styling options for rows may not cater to diverse visual requirements, limiting the ability to highlight or differentiate rows effectively.

Procedure

Follow these steps to understand how to use conditional formatting to format rows. 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: Advanced Section Tab

Advanced Section in Table Settings is a feature in Salesforce HyperGrid XRL that allows you to customize the appearance, behavior, and functioning  of rows and their data values depending on any condition. You can also leverage these settings to control the update operations in records through rollback or call back functions. This can further enhance the Related List data quality in the view and database. For example in the code snippet mentioned below, you can customize the following row settings:

Disable Select All:

• isSelectAlllDisabled: true ensures that users cannot select all rows simultaneously, adding control to row selection.

Tooltip for Row Callback:

• rowCallbackTooltipText: "Rowcallback enabled" sets a tooltip text for rows, providing additional information when interacting with them.

Row Callback Function:

• rowCallback is a function that triggers an action when interacting with rows. In this case, it logs "Hello" to the console.

Conditional Row Background Color:

• rowCss function dynamically sets the background color of rows based on a condition. If the row number (sl) is even, the background color is red; otherwise, it's green.

After Load Transformation:

• afterloadTransformation function executes after loading records, logging "Hello from after Load" to the console and returning the records.

Before Delete Validation:

• beforeDeleteValidation function returns false to prevent deletion, offering a pre-validation step.

Before Save Validation:

• beforeSaveValidation function returns false to prevent saving, allowing for pre-save validation.

Grouping Function Transformation:

• groupingFunction transforms group titles by appending '123' to each, providing additional information.

Records Drag and Drop Callback:

• recordsDragDropCallback defines custom actions when dragging and dropping records, returning an empty array in this example.

After Edit Callback:

• afterEditCallback logs "Hello From After Edit" to the console after editing records, enhancing post-edit actions.

Show List View Dropdown Callback:

• showListViewDropdownCallback returns true to display the list view dropdown, controlling its visibility.

Show Configure Callback:

• isShowConfigureCallback returns true to show the configure option, allowing users to configure related lists.

{
	"isSelectAlllDisabled":true,
	"rowCallbackTooltipText": "Rowcallback enabled",
"rowCallback":function(scope,libs,column){
console.log('Hello');
},
	"rowCss": function(row) {
		if (row.sl % 2 === 0) {
			return 'background-color:red;'
		}
		
	},
	"afterloadTransformation":function(scope,libs,records){
  		console.log('Hello from afterLoad');
  		return records;
},
"beforeDeleteValidation":function(scope,libs,record){  return false;},
"beforeSaveValidation":function(scope,libs,record){  return false;},
"groupingFunction":function(scope,libs,groups){ 
       groups.forEach((el) => {
      el.title = el.title+'123';
});
 	return groups;
},
"recordsDragDropCallback":function(scope,library,records,draggedRecord,futureParentRecord) {    
const topLevelRecords = [];  
return topLevelRecords;
},
"afterEditCallback":function(scope,libs,records){
console.log('Hello From AfterEdit',records);
return records;
},

"showListViewDropdownCallback": function(scope,libs,listViews,currentSelectedListView){
return true;
},
"isShowConfigureCallback":function(scope,libs){
 return true;
}

}

To achieve the desired result, paste this code into the Advanced Settings tab as shown in the screenshot.

Results

Thus using above procedure, you can see:
1.  The Related List view has changed to show even numbered rows highlighted in red colour. 

2. When you apply the grouping of records based on specific column, say Case Reason, the records will be grouped together based on the reason and each reason is renamed by appending ‘123’. For example, Performance is modified to Performance123.

Similarly, there are callback function will work as established through the code in the block.