• State Not Answered
  • Replies 5 replies
  • Subscribers 9 subscribers
  • Views 2688 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

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

manjunathb0904
Certified Associate Developer

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

  • 0
    Certified Lead Developer

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

  • 0
    Certified Associate Developer
     in reply to Stefan Helzle

    Yes, We have similar implementation in place currently,  But business users looking for capabilities similar to excel Slight smile in editable grid.

  • 0
    Certified Lead Developer
     in reply to manjunathb0904

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

  • 0
    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!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
    )
  }
)
     

  • 0
    Certified Associate Developer
     

    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

© 2024 Appian. All rights reserved.