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

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

vimalkumars — Tue, 06 Aug 2019 17:11:06 GMT

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
    )
  }
)

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

naidubabut0001 — Mon, 05 Aug 2019 11:46:46 GMT

Actually , I need to change the font colour of instruction value in grid layout

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

naidubabut0001 — Mon, 05 Aug 2019 11:46:04 GMT

Can you please suggest me on how to add a rich text component

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

davel001150 — Fri, 01 Jun 2018 12:48:56 GMT

Would UI Header Button Layout Color be "Accent" color?

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

anushas0002 — Fri, 01 Jun 2018 08:51:40 GMT

Thanks All

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

TJ — Fri, 01 Jun 2018 06:49:41 GMT

I agree with other practitioners and currently there seems only one way i.e. by adding a rich text component.

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

deviratnamv — Fri, 01 Jun 2018 06:07:10 GMT

Hi Anusha,

I agree with vimal kumar, might be below code will help for you.

{
a!richTextDisplayField(
label: "",
value: a!richTextItem(
text: "Grid Label",
style: "POSITIVE"
)

),
a!gridLayout(
label: "",
labelPosition: "ABOVE",
headerCells: {
a!gridLayoutHeaderCell(label: "Header Cell")
},
columnConfigs: {},
rows: {},
selectionSaveInto: {},
validations: {},
shadeAlternateRows: true
)
}

Thanks
Devi

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

vimalkumars — Mon, 28 May 2018 00:15:19 GMT

Hi anushas0002,

Grid Layout Label color cannot be changed.
May be you can use the rich text component to show the text based with the available styles above the grid and pass empty value for the grid label - docs.appian.com/.../Rich_Text_Component.html

Also, I am not able get the "UI Header Button Layout colour".