RE: regarding configuration of RAG status

Chris — Fri, 02 Oct 2020 15:26:24 GMT

The issue here is the restriction on components allowed within a!gridRowLayout(), Supported components include: Barcode, Checkboxes, Date, Date & Time, Dropdown, Decimal, Encrypted Text, File Upload, Image, Integer, Link, Multiple Dropdown, Paragraph, Pickers, Progress Bar, Radio Buttons, Rich Text, and Text.

So, if this must be displayed within a grid specifically, a few options are the a!imageField() as noted, or coloring a!richTextIcon() to match the selection. This is an example with a Rich Text field/icon to display your color choice:

a!localVariables(
  local!gridData: {{color: "#65fc32"},{color: "#fdf246"},{color: "#dd030e"}},
  a!columnsLayout(
    columns: {
      a!columnLayout(),
      a!columnLayout(
        contents: {
          a!gridLayout(
            headerCells: a!forEach(items: {"Select","Display"}, expression: a!gridLayoutHeaderCell(label: fv!item)),
            columnConfigs: a!forEach(items: {"DISTRIBUTE","ICON"}, expression: a!gridLayoutColumnConfig(width: fv!item)),
            addRowLink: a!dynamicLink(label: "Add a Row", saveInto: a!save(local!gridData,append(local!gridData,{color: null}))),
            rows: a!forEach(
              items: local!gridData,
              expression: a!gridRowLayout(
                it: fv!index,
                contents: {
                  a!dropdownField(
                    placeholderLabel: "-- Select --",
                    choiceLabels: {"Green","Yellow","Red"},
                    choiceValues: {"#65fc32","#fdf246","#dd030e"},
                    value: fv!item.color,
                    saveInto: fv!item.color
                  ),
                  a!richTextDisplayField(
                    align: "CENTER",
                    value: {
                      a!richTextIcon(
                        showWhen: not(rule!APN_isEmpty(fv!item.color)),
                        icon: "square",
                        color: fv!item.color,
                        size: "MEDIUM_PLUS"
                      )
                    }
                  )
                }
              )
            )
          )
        }
      ),
      a!columnLayout()
    }
  )
)

If you can display outside of a grid, you can expand your component usage to say a!cardLayout(), etc. Simple example:

[quote userid="47360" url="~/discussions/f/user-interface/19667/regarding-configuration-of-rag-status"]nterface) for RAG statuses ([/quote]

a!localVariables(
  local!gridData: {{color: "#65fc32"},{color: "#fdf246"},{color: "#dd030e"}},

  {
    a!forEach(
      items: local!gridData,
      expression: {
        a!columnsLayout(
          columns: {
            a!columnLayout(),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  placeholderLabel: "-- Select --",
                  choiceLabels: {"Green","Yellow","Red"},
                  choiceValues: {"#65fc32","#fdf246","#dd030e"},
                  value: fv!item.color,
                  saveInto: fv!item.color
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!cardLayout(
                  style: fv!item.color,
                  height: "SHORT"
                )
              }
            ),
            a!columnLayout()
          }
        )
      }
    ),
    a!linkField(
      links: {
        a!dynamicLink(
          label: "Add a Row", 
          saveInto: a!save(local!gridData,append(local!gridData,{color: null})),
        )
      }
    )
  }
)

RE: regarding configuration of RAG status

Vadivelan — Fri, 02 Oct 2020 11:42:02 GMT

Hi shilpak0002

I don't think its possible to color the entire cell in a grid field. You can try to add a image field next to the drop down field and show an icon in Green, Yellow or Red based on the drop-down value selected. You can change the icon values as per your need below.

a!imageField(
images: if(
    fv!item.status = cons!GREEN_COLOR,
    a!documentImage(
      document: a!iconIndicator(
        icon: "STATUS_OK"
      ),
      caption: "GREEN"
    ),
    if(
      fv!item.status = cons!YELLOW_COLOR,
      a!documentImage(
        document: a!iconIndicator(
          icon: "STATUS_OK"
        ),
        caption: "YELLOW"
      ),
      a!documentImage(
        document: a!iconIndicator(
          icon: "STATUS_NOTDONE"
        ),
        caption: "RED"
      )
    )
),
size: "ICON",
align: "CENTER"
)