UI Builder component to show the table with the sum of the column rows in the header

[P-Rudenko-SN]

Dear Team, I need to build the table in the custom configurable workspace, where in the table header, for the integer or decimal fields, the sum of rows in the specific column is shown. This would be a sort of Excel-style view, something like this (see the screenshot).

I was wondering if this could be achieved with the "Record List" component. I see it's possible to freeze the header, but it's not clear how to enable the sum there. Perhaps there are other ideas on how this can be achieved.

Many thanks in advance!

[jai281997]

Hi @P-Rudenko-SN 
I am trying to build the tables with rows and columns which is similar to your issue, could you please share the steps if you have build a table with rows and columns.

Thank you! 

[SivaniG]

Hello,

You can achieve it by using client scripts in ui builder

Here are the steps to follow:

1. Use the "Record List" Component.

2. In the Component - > Under the "Config" Tab there is subtitle input (initially it shows last refresdhed information) we will use this.

3. When we selected the "Record List" ui component. A list controller is automatically added to data resources.

This List control stores all the information related to list.

4. By using the information provided we will extract the one field information and sum the all values of it presented in a list page.

5. We will write a client script to sum the values:

Here is the code:

/**

* @Param {params} params

* @Param {api} params.api

* @Param {any} params.event

* @Param {any} params.imports

* @Param {ApiHelpers} params.helpers

*/

function handler({

api,

event,

helpers,

imports

}) {

var rows = api.data.list_controller.rowDefinitions.rows || [];

var totalReassignmentCount = 0;

rows.forEach(function(row) {

if (row.cells && row.cells.reassignment_count && row.cells.reassignment_count.value) {

var value = parseInt(row.cells.reassignment_count.value, 10);

if (!isNaN(value)) {

totalReassignmentCount += value;

}

}

});

var reassignString="Reassignment Count : "+totalReassignmentCount

api.setState('reassignCount',reassignString);

//console.log("Total reassignment count:", totalReassignmentCount);

}

6. Now this Client script will be executed whenever list is refreshed we have to 3 events here.

 --> when page is ready refresh the data resource(list controller):

     

---> When current page updated refresh the data resource:

---> and finally when list is refreshed execute the client script 

add last two event to List Controller - Data Resource.

Finally, add the client state parameter to subititle field as shown in first image 

RESULT: