How to change colour of Grid Layout Label to match with the UI Header Button Layout colour?

Question

vimalkumars · Answer

Hi naidubabut0001 , 
 Grid Instruction color cannot be changed but you can use the Rich Textfield to achieve a similar UI. 
 Here is the sample code which might be helpful. 
 a!localVariables(
 local!items: {
 {
 item: "Item 1",
 qty: 1,
 unitPrice: 10
 },
 {
 item: "Item 2",
 qty: 2,
 unitPrice: 20
 }
 },
 {
 a!richTextDisplayField(
 label: "Products",
 value: a!richTextItem(
 text: {
 "Update the item name, quantity, or unit price."
 },
 color: "#6aa84f"
 )
 ),
 a!gridLayout(
 labelPosition: "COLLAPSED",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Item"
 ),
 a!gridLayoutHeaderCell(
 label: "Qty",
 align: "RIGHT"
 ),
 a!gridLayoutHeaderCell(
 label: "Unit Price",
 align: "RIGHT"
 ),
 a!gridLayoutHeaderCell(
 label: "Total",
 align: "RIGHT"
 )
 },
 rows: {
 a!gridRowLayout(
 contents: {
 a!textField(
 value: local!items[1].item,
 saveInto: local!items[1].item
 ),
 a!integerField(
 value: local!items[1].qty,
 saveInto: local!items[1].qty,
 align: "RIGHT"
 ),
 a!floatingPointField(
 value: local!items[1].unitPrice,
 saveInto: local!items[1].unitPrice,
 align: "RIGHT"
 ),
 a!textField(
 value: dollar(
 tointeger(
 local!items[1].qty
 ) * todecimal(
 local!items[1].unitPrice
 )
 ),
 readOnly: true,
 align: "RIGHT"
 )
 }
 ),
 a!gridRowLayout(
 contents: {
 a!textField(
 value: local!items[2].item,
 saveInto: local!items[2].item
 ),
 a!integerField(
 value: local!items[2].qty,
 saveInto: local!items[2].qty,
 align: "RIGHT"
 ),
 a!floatingPointField(
 value: local!items[2].unitPrice,
 saveInto: local!items[2].unitPrice,
 align: "RIGHT"
 ),
 a!textField(
 value: dollar(
 tointeger(
 local!items[2].qty
 ) * todecimal(
 local!items[2].unitPrice
 )
 ),
 readOnly: true,
 align: "RIGHT"
 )
 }
 )
 },
 rowHeader: 1
 )
 }
)