topic Re: Row striping in Table widget with Advanced Formatting in ArcGIS Dashboards Questions

Row striping in Table widget with Advanced Formatting

RhettZufelt — Thu, 29 Sep 2022 22:24:21 GMT

I am trying to make some Pivot Tables in Dashboard with Table widget.

there is a default options to toggle on row striping and it alternates the color of the rows:

However, if you choose Advanced Formatting for the values, the arcade overrides all the row striping, and I can't find any example/method to turn that back on with arcade.

Is this possible? Any samples out there similar to this?

Thanks,

Re: Row striping in Table widget with Advanced Formatting

Kepa — Wed, 01 Feb 2023 15:02:35 GMT

Hi there,

I don't know if you finally figured this out but in case someone needs it you can use a simple logic before the return statement to check $rowindex value using module operator:

var color = '' if ($rowindex %2 == 0) { color = '#3ff6f6' } else { color = '#ffffff' }

And then you just set color variable to background property. You can see the result in the attachment png.

Hope this helps anyone out there.

Regards.

Re: Row striping in Table widget with Advanced Formatting

RhettZufelt — Wed, 01 Feb 2023 15:50:19 GMT

Thank you @Kepa , but yes, I did figure this out.

However, came up with the same solution, so will mark your post as the answer.

Re: Row striping in Table widget with Advanced Formatting

JerrySneary — Mon, 17 Jul 2023 19:23:35 GMT

Hi @Kepa ,

This is my code for row striping and it works but now I noticed that I can't do individual background cell color. Is there a way within the for loop to do individual cell color and row color?

var bgColor = When($rowindex %2 == 0, '#ffffff', '#F8F8F8'); for (var cell in row.cells) { row.cells[cell].backgroundColor = bgColor; }

Re: Row striping in Table widget with Advanced Formatting

steven — Fri, 17 Jan 2025 00:02:11 GMT

Kepa's method is working only need to change the code a little bit.

create a variable color and in the code put color after backgroundColor like below:

backgroundColor: color,

please see my whole code example follow:

var color = ''

if ($rowindex %2 == 0) {

color = '#E5E4E2'

}

else {

color = '#ffffff'

}

return {

cells: {

Agency_Serial_ID: {

displayText : Text($datapoint.Agency_Serial_ID),

textColor: '',

backgroundColor: color,

textAlign: 'right',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

Facility_Serial_ID: {

displayText : Text($datapoint.Facility_Serial_ID),

textColor: '',

backgroundColor: color,

textAlign: 'right',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

Agency: {

displayText : $datapoint.Agency,

textColor: '',

backgroundColor: color,

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

Full_Address: {

displayText : $datapoint.Full_Address,

textColor: '',

backgroundColor: color,

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

Contract_Number: {

displayText : $datapoint.Contract_Number,

textColor: '',

backgroundColor: color,

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

}