Highlight a row based on value change in gridRowLayout

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"?

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:

Hi Mike,

Thanks for your response. Please see the below information.

I have a readonly Grid with 5 columns (1^st UI rule) in it. The last column is configured as richtextfield , when the user clicked on that link we will display a new UI with detailed information (2^nd UI Rule). When the user updates a value in this detailed information screen and hits on submit, he will come back to the main Grid (1^st UI). Now, the requirement is when use updated a value in the updated a value in 2^nd UI and comes back to the 1^st  UI, The specific row that he clicked on a link should be highlighted to indicate the last updated row in the grid (similar to when you select a row in a grid layout).

Hi chrish, Thanks for the response

I have implemented similar functionality. Highlighted all fields in the row with color whenever there is a change in the data points. I just want to check if there is any Appian functionality that can highlight the entire row.


Thanks

Unfortunately we do not have the capability within a!gridLayout() to highlight specific rows at this time.

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.

He mentioned in his reply to me that the main grid is read-only, and upon double checking, it does seem like we can utilize selected-row-highlighting while selection is plainly disabled.

That is an interesting theory, to spoof the row selection to take advantage of selectionStyle ROW_HIGHLIGHT (which I admittedly do not use often).

Same sample setup as my post above, swap this in for the main interface, you can check for differences right in the selectionValue parameter:

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"}, expression: a!gridLayoutHeaderCell(label: fv!item)),
            selectable: true,
            selectionValue: fn!reject(
              fn!isnull,
               a!forEach(
                 items: local!data,
                 expression: if(
                   fv!item<>ri!data[fv!index],
                   fv!index,
                   null
                 )
               )
            ),
            selectionStyle: "ROW_HIGHLIGHT",
            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!columnLayout()
    }
  )
)

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}
)