change the color of rows in a grid

saitoy6477 2 months ago

Hi all,

I am a beginner of Appian and I am required to change color of each rows in a grid.

Even though "Shade alternate rows" is enabled, the contrast is not vague, so I need to do a clear contrast...

I hope your help.

Best regards,

Discussion posts and replies are publicly visible

Top Replies

Yogi Patel 2 months ago +1
Certified Associate Developer

As suggested by subhad and Konduru Chaitanya , you can achieve this using the backgroundColor parameter. The following sample code might be helpful: { a!columnsLayout( columns: { a!columnLayout…

Parents

0 Yogi Patel

Certified Associate Developer

2 months ago

As suggested by subhad and Konduru Chaitanya , you can achieve this using the backgroundColor parameter. The following sample code might be helpful:

{
  a!columnsLayout(
    columns: {
      a!columnLayout(contents: {}),
      a!columnLayout(
        contents: {
          a!localVariables(
            local!energyData: {
              a!map(
                id: 1,
                month: "Jan",
                zone1: 5,
                zone2: 29,
                zone3: 13,
                zone4: 2,
                zone5: 14
              ),
              a!map(
                id: 2,
                month: "Feb",
                zone1: 3,
                zone2: 24,
                zone3: 9,
                zone4: 5,
                zone5: 13
              ),
              a!map(
                id: 3,
                month: "Mar",
                zone1: 5,
                zone2: 23,
                zone3: 6,
                zone4: 3,
                zone5: 21
              ),
              a!map(
                id: 4,
                month: "Apr",
                zone1: 6,
                zone2: 29,
                zone3: 9,
                zone4: 4,
                zone5: 20
              ),
              a!map(
                id: 5,
                month: "May",
                zone1: 5,
                zone2: 27,
                zone3: 17,
                zone4: 3,
                zone5: 9
              ),
              a!map(
                id: 6,
                month: "Jun",
                zone1: 4,
                zone2: 30,
                zone3: 16,
                zone4: 2,
                zone5: 3
              ),
              
            },
            local!extraHigh: "#417EAA",
            local!extraLow: "#E8F2F9",
            a!gridField(
              label: "Custom Alternate Rows",
              data: local!energyData,
              columns: {
                a!gridColumn(
                  label: "Month",
                  value: fv!row.month,
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  )
                ),
                a!gridColumn(
                  label: "Zone 1",
                  value: fv!row.zone1 & "%",
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  ),
                  align: "END"
                ),
                a!gridColumn(
                  label: "Zone 2",
                  value: fv!row.zone2 & "%",
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  ),
                  align: "END"
                )
              },
              shadeAlternateRows: false
            )
          )
        },
        width: "MEDIUM_PLUS"
      ),
      a!columnLayout(contents: {})
    }
  )
}

Reply

0 Yogi Patel

Certified Associate Developer

2 months ago

As suggested by subhad and Konduru Chaitanya , you can achieve this using the backgroundColor parameter. The following sample code might be helpful:

{
  a!columnsLayout(
    columns: {
      a!columnLayout(contents: {}),
      a!columnLayout(
        contents: {
          a!localVariables(
            local!energyData: {
              a!map(
                id: 1,
                month: "Jan",
                zone1: 5,
                zone2: 29,
                zone3: 13,
                zone4: 2,
                zone5: 14
              ),
              a!map(
                id: 2,
                month: "Feb",
                zone1: 3,
                zone2: 24,
                zone3: 9,
                zone4: 5,
                zone5: 13
              ),
              a!map(
                id: 3,
                month: "Mar",
                zone1: 5,
                zone2: 23,
                zone3: 6,
                zone4: 3,
                zone5: 21
              ),
              a!map(
                id: 4,
                month: "Apr",
                zone1: 6,
                zone2: 29,
                zone3: 9,
                zone4: 4,
                zone5: 20
              ),
              a!map(
                id: 5,
                month: "May",
                zone1: 5,
                zone2: 27,
                zone3: 17,
                zone4: 3,
                zone5: 9
              ),
              a!map(
                id: 6,
                month: "Jun",
                zone1: 4,
                zone2: 30,
                zone3: 16,
                zone4: 2,
                zone5: 3
              ),
              
            },
            local!extraHigh: "#417EAA",
            local!extraLow: "#E8F2F9",
            a!gridField(
              label: "Custom Alternate Rows",
              data: local!energyData,
              columns: {
                a!gridColumn(
                  label: "Month",
                  value: fv!row.month,
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  )
                ),
                a!gridColumn(
                  label: "Zone 1",
                  value: fv!row.zone1 & "%",
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  ),
                  align: "END"
                ),
                a!gridColumn(
                  label: "Zone 2",
                  value: fv!row.zone2 & "%",
                  backgroundColor: if(
                    mod(fv!row.id, 2),
                    local!extraLow,
                    local!extraHigh
                  ),
                  align: "END"
                )
              },
              shadeAlternateRows: false
            )
          )
        },
        width: "MEDIUM_PLUS"
      ),
      a!columnLayout(contents: {})
    }
  )
}

Children

No Data