Search code examples
google-app-maker

Is it possible to apply conditional formatting in Google App Maker?

I have a table in Google App Maker, I am wondering is it possible to apply conditional formatting to rows of the table.

Example: If the value of a drop down is "Yes" set that row's background colour to be red.

The documentation regarding this is useless as always and wasn't able to find any questions regarding this.

Image: enter image description here

Greyed out Image:

enter image description here

Solution

  • The secret is in your bindings. If you wish to retain the regular assigned styles like 'app-ListTableRow' and 'hoverAncestor' then do the following:

    Add a class in your Style Editor like this for example:

    .red {
  background: linear-gradient(to bottom, darkred, red);
}

    On your table row 'Display' - styles enter the following binding:

    @datasource.item.CertificateisRequired === 'Yes' ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']

    That will do it.

    If you have a dropdown in each row I would suggest to call it 'CertificateisRequired' instead of leaving a default name like 'DropDown1' or whatever App Maker assigns to it. Then adjust the binding in the row Display - styles to:

    @widget.descendants.CertificateisRequired.value === 'Yes' ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']