Question

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

Forum|Forum|4 years ago
September 16, 2021
5 replies
3 views

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

stefanhelzle0001

Brainy

Currently not. Assuming you want to highlight certain conditions per row, did you think about coloured icons of larger sizes?

manjunathb0904Author

Yes, We have similar implementation in place currently, But business users looking for capabilities similar to excel [emoticon:c4563cd7d5574777a71c318021cbbcc8] in editable grid.

stefanhelzle0001

Brainy

Got it. If this is a must, you could replicate a grid using card layouts. They can have any colour you want.

N

nitesht9652

Participating Frequently

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

A

avinashv252039

a!localVariables(
  local!red: true,
  local!green:true,
  
  local!data:{
    a!map(name:"avinash",country:"India",Gender:"Male",address:"1-48 kollamaddi,pincode:505304"),
    a!map(name:"anvesh",country:"Russia",Gender:"Male",address:"2-21 kothapalli,pincode:5034567"),
    a!map(name:"naveen",country:"China",Gender:"Male",address:"1-32 kamareddy,pincode:5034564")
  },
  

  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  value:a!richTextItem(
                    text:"Name",
                    style: "STRONG"
                  ),
                  align:"CENTER"
                )
              },
              style: "NAVY_SCHEME"
            )

          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  value:a!richTextItem(
                    text:"Country",
                    style: "STRONG"
                  ),
                  align:"CENTER"
                )
              },
              style: "NAVY_SCHEME",


              marginBelow: "NONE"
            ),

          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  value:a!richTextItem(
                    text:"Gender",
                    style: "STRONG"
                  ),
                  align:"CENTER"
                )
              },
              style: "NAVY_SCHEME",
              marginBelow: "NONE"
            ),

          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  value:a!richTextItem(
                    text:"Address",
                    style: "STRONG"
                  ),
                  align:"CENTER"
                )
              },
              style: "NAVY_SCHEME",
              
              marginBelow: "NONE"
            ),

          },
          width: "NARROW_PLUS"
        ),
        a!columnLayout(
          width:"EXTRA_NARROW",
          contents:a!cardLayout(
            contents: {
              a!richTextDisplayField(
                value:a!richTextItem(
                  text:"",
                  style: "STRONG"
                ),
                align:"LEFT"
              )
            },
            style: "NAVY_SCHEME",

            marginBelow: "NONE"
          )
        )

      },
     
      showDividers: true,
      spacing: "NONE"
    ),
    a!forEach(
      local!data,
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!textField(
                   value: fv!item.name,
                   saveInto: fv!item.name
                  )
                },
                height: "EXTRA_SHORT",
                style: "NONE",
                marginBelow: "NONE"
              ),

            },
            width: "NARROW"
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!dropdownField(
                    placeholder: "--select a country--",
                    choiceLabels: {"India","Pak","China","Russia"},
                    choiceValues: {"India","Pak","China","Russia"},
                    value:fv!item.country,
                    saveInto: fv!item.country
                  )
                },
                height: "EXTRA_SHORT",
                style: if(local!red,"ERROR","NONE"),
                marginBelow: "NONE"
              ),

            },
            width: "NARROW"
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!radioButtonField(
                    choiceLabels: {"Male","Female"},
                    choiceValues:{"Male","Female"} ,
                    choiceLayout: "COMPACT",
                    value:fv!item.gender,
                    saveInto: fv!item.gender
                  )
                },
                height: "EXTRA_SHORT",
                style: if(local!green,"SUCCESS","NONE"),
                marginBelow: "NONE"
              ),

            },
            width: "NARROW"
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!paragraphField(
                     value:fv!item.address,
                     saveInto:fv!item.address
                  )
                },
                height: "EXTRA_SHORT",
                style: "NONE",
                marginBelow: "NONE"
              ),

            },
            width: "NARROW_PLUS"
          ),
          a!columnLayout(
            width:"EXTRA_NARROW",
            contents:a!richTextDisplayField(
             
                  value:a!richTextIcon(
                    icon:"Remove",
                    caption: "click to remove item",
                    color:"NEGATIVE",
                    size:"MEDIUM",
                    link: a!dynamicLink(
                      value:fv!index,
                      saveInto: a!save(local!data,remove(local!data,save!value))
                    )
                  ),
                  align:"CENTER"
                )
              
              
            )
          

        },
        spacing: "NONE",
        showDividers: true
      )
    ),
    a!linkField(
      links:a!dynamicLink(
        label:"click here to add row",
        value:  a!map(name:"",country:"",Gender:"",address:""),
        saveInto: a!save(local!data,append(local!data,save!value))
        
      )
    )
  }
)

hi manjunath you can try this code once by replacing the localvariables defined by me in code with the conditions that u want to show colors within grid column

this code is in extension with code mentioned by nitesh tiwari

Sign up

Login with SSO

Login to the community

Login with SSO