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
Hi saitoy6477 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
Hello saitoy6477 ,
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.
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: {}) } ) }