Is there any way we can configure color of the a!gridRowLayout() in case of Editable grid

manjunathb0904

Certified Associate Developer

over 2 years ago

Hi,

We have a requirement to change the background color of the grid row based on certain conditions.

Looking for something like a!gridRowLayout(color:"POSITIVE", contents:{}).

Any suggestions?

Note: Not the text color using a!richtextdispaly field().

Thanks,

Manjunath

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle over 2 years ago in reply to manjunathb0904 +2
Certified Lead Developer

Got it. If this is a must, you could replicate a grid using card layouts. They can have any colour you want.
Stefan Helzle over 2 years ago +1
Certified Lead Developer

Currently not. Assuming you want to highlight certain conditions per row, did you think about coloured icons of larger sizes?
niteshtwri over 2 years ago +1
Certified Lead Developer

Hi Manju, I quite liked the idea given by Stefan here to create custom coloured grid with the help of card layout. If you wanna give a try, below is the code to try it out: a!localVariables( local…

Parents

0 niteshtwri

Certified Lead Developer

over 2 years ago

Hi Manju,

I quite liked the idea given by Stefan here to create custom coloured grid with the help of card layout. If you wanna give a try, below is the code to try it out:

a!localVariables(
  local!red: true,
  local!green:true,
  
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: if(local!red,"ERROR","NONE"),
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: if(local!green,"SUCCESS","NONE"),
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        )
      },
      spacing: "NONE",
      showDividers: true
    )
  }
)

Reply

0 niteshtwri

Certified Lead Developer

over 2 years ago

Hi Manju,

I quite liked the idea given by Stefan here to create custom coloured grid with the help of card layout. If you wanna give a try, below is the code to try it out:

a!localVariables(
  local!red: true,
  local!green:true,
  
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: if(local!red,"ERROR","NONE"),
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: if(local!green,"SUCCESS","NONE"),
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            ),
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "NONE",
              marginBelow: "NONE"
            )
          },
          width: "NARROW"
        )
      },
      spacing: "NONE",
      showDividers: true
    )
  }
)

Children

No Data