Best way to change UITableRow backgroundcolor when selected?

Scriptable
1

I’m struggeling with this:
I created a table and the dismissOnSelect property for rows is set to false to keep it open.

Now I want to set the backgroundcolor of the selected row to a different color.
If the user selects a new row the previous row color should be turned back to normal, and the new one’s backgroundcolor should change.

My current solution is to redraw the whole table(remove all rows,add all rows again) every time and then reload() this new table.
I’m curious, if the might be a better approach to change the backgroundColor property of a single row
in an already presented table.

2

I haven’t tested it, but maybe if you keep the reference to all rows in an array and then set the background color of the corresponding row instance. A table refresh will be probably needed afterwards… Just an idea!

1 Like
3

Thanks for the reply.

If I don’t misunderstand you, that’s basically the method I’m currently using.
When I first create the row, I create an additional array with all UITableRow elements called “rows”.
When changing the color I call rows change the color there, remove all rows and create the table from this array again.

One main gripe taht I can’t figure out with my limited JS knowledge:
how to keep the original “rows” array untouched, so that I only need to change one background color instead of changing one to the new value and reverting the last selected back to the original value.
My idea was to create a copy of the original array called “new_rows” on every call, but everything I tried created a reference that will also make all changes in “new_rows” in the original “rows” array.

4

There is no need to reassign all the rows to the UITable. I meant like this:

const ui = new UITable()
// create an array to store all row instances
let rows = [];

for (let i = 0; i < 10; i++) {
	// create a row
	let row = new UITableRow()
	row.addText("" + i).centerAligned()
	row.dismissOnSelect = false
	row.onSelect = (number) => {
		// set the background of every row to null (default)
		rows.forEach((r) => r.backgroundColor = null)
		// set the current row to have a green background
		// we can use the variable i here, because it is bound to the function
		// we could also use the number variable that the function from row.onSelect recieves
		// the only thing is that we need to get the correct UITableRow instance
		rows[i].backgroundColor = Color.green()
		// reload the ui
		ui.reload()
	}
	// add the row to the ui and our array
	ui.addRow(row)
	rows.push(row)
}
ui.present()
1 Like
5

Wow, way simpler.
Thank you very much!