Skip to main content
August 8, 2022
Solved

Highlight a row based on value change in gridRowLayout

  • August 8, 2022
  • 9 replies
  • 0 views

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.

Best answer by csteward

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:

9 replies

mikes0011
Brainy
August 8, 2022

Could you clarify what exactly you're referring to with this?

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

The Expression Guru
August 8, 2022

Hi Mike,

Thanks for your response. Please see the below information.

I have a readonly Grid with 5 columns (1st 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 (2nd 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 (1st UI). Now, the requirement is when use updated a value in the updated a value in 2nd UI and comes back to the 1st  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).

mikes0011
Brainy
August 9, 2022

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.

The Expression Guru
csteward
cstewardAnswer
August 8, 2022

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:

August 8, 2022

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

csteward
August 9, 2022

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