Skip to main content
saitoy6477
September 13, 2024
Question

change the color of rows in a grid

  • September 13, 2024
  • 3 replies
  • 1 view

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,

3 replies

subhad
September 13, 2024

Hi [mention:00e6688d68c542b99c8c455359d12cd4:e9ed411860ed4f2ba0265705b8793d05]  

You can try using heat map pattern here. Instead of putting a condition on each cell. You can try adding the condition  on the background color based on the row index value. 
Refer - docs.appian.com/.../grid-with-heatmap-pattern.html

konduruc733182
September 13, 2024

Hello [mention:00e6688d68c542b99c8c455359d12cd4:e9ed411860ed4f2ba0265705b8793d05] ,

I hope the backgroundColor parameter in the gridColumn() will be your friend. You can set the color for all the columns on a conditional basis and display for the alternate rows.

September 13, 2024

As suggested by [mention:c24da45aa00143ea998137ca547c0506:e9ed411860ed4f2ba0265705b8793d05]  and [mention:2df2892a4df7486f9775b4d2f0e405fd:e9ed411860ed4f2ba0265705b8793d05] , 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: {})
    }
  )
}