Highlight a row based on value change in gridRowLayout

Question

Hi All, 
 I am using gridRowLayout to display data in UI. The requirement is I have to highlight a row when the user changed a value in that interface rule. Any suggestions to achieve this. 
 Thanks.

Chris · Accepted Answer

I'm also not exactly clear on the use case either, but unfortunately we can't modify grid layout row highlighting other than shading alternate rows. 
 Assuming you want to flag the row when a user edits any of the data points in it, one option is to have an "Edited" type column which alerts that a change has been made by showing something such as a rich text icon. 
 That can be accomplished by creating a non-refreshing copy of the data as it initially arrives, and comparing it to the data being saved (rule input). 
 For this example, open a new interface and add a rule input "data" of "Any Type". 
 Set the Test Input for 'data' to: 
 {
 a!map(field1: "test a", field2: "test b", field3: "test c"),
 a!map(field1: "test a", field2: "test b", field3: "test c"),
 a!map(field1: "test a", field2: "test b", field3: "test c")
} 
 And add this in the interface code: 
 a!localVariables(
 local!data: a!refreshVariable(
 value: ri!data,
 refreshOnReferencedVarChange: false
 ),
 
 a!columnsLayout(
 columns: {
 a!columnLayout(),
 a!columnLayout(
 contents: {
 a!gridLayout(
 headerCells: a!forEach(items: {"Col 1","Col 2","Col 3","Edited"}, expression: a!gridLayoutHeaderCell(label: fv!item)),
 rows: a!forEach(
 items: ri!data,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!textField(
 value: fv!item.field1,
 saveInto: ri!data[fv!index].field1
 ),
 a!textField(
 value: fv!item.field2,
 saveInto: ri!data[fv!index].field2
 ),
 a!textField(
 value: fv!item.field3,
 saveInto: ri!data[fv!index].field3
 ),
 a!richTextDisplayField(
 value: a!richTextIcon(
 showWhen: local!data[fv!index]<>ri!data[fv!index],
 icon: "edit",
 size: "MEDIUM",
 color: "NEGATIVE"
 )
 )
 }
 )
 )
 )
 }
 ),
 a!columnLayout()
 }
 )
) 
 Test, and when you change any if the values, you will see a red icon appear in the "Edited" column:

Mike Schmitt · Answer

Could you clarify what exactly you're referring to with this? 
 sharathp0003 said: when the user changed a value 
 What specific value? Any value in a row? Something else? What sort of behavior are you expecting when you say "highlight a row"?

Mike Schmitt · Answer

I think the only way to utilize the built-in "row highlight" functionality is by allowing rows to actually be selectable. 
 You might be able to get away with setting it to "selectable" but setting "disable row selection when" to be always "TRUE()", and simply controlling the "selection value" parameter to point to an array of identifiers where the data has been updated. You could initially set a local variable i.e. "local!editedRows" to empty ("{}"), and pass it into the editing interface along with the data from the row to be edited, and if changes are completed on it, append its identifier to the array of editedRows. Then set the grid's "selectionValue" to local!editedRows. Note that this might start making the grid a bit hard to read.

Mike Schmitt · Answer

Yeah, i'd verified myself with a tiny test interface first - this one is stupid simple by comparison of course. OP would need to beef this up quite a bit to fill their use case but probably very doable - though it might start looking cluttery with various row highlights enabled. a!gridField(
 data: {
 {name: "mike", id: 1},
 {name: "chris", id: 2}
 },
 
 columns: {
 a!gridColumn(value: fv!row.name)
 },
 selectionStyle: "ROW_HIGHLIGHT",
 selectable: true(),
 disableRowSelectionWhen: true(),
 selectionValue: {2}
)

Highlight a row based on value change in gridRowLayout

Top Replies