User Interface

Hello All,

I have a requirement that, this type of grid has to be shown(each row has different mapping), the existing structure has the card layout on top of that how this can be done?

 

Let me once if anyone can find out solution or idea on this.

Thanks in advance.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Associate Developer

    a!localVariables(
      local!data: {
        {
          key1: "Current ROC",
          key2: "AVG_NET_ROC",
          Key3: "AVG_GROSS_ROC"
        },
        {
          key1: " ",
          key2: "AVG_NET_ROC",
          key3: "NET_ROC"
        },
        {
          key1: "NET ROC",
          key2: "AVG_NET_ROC",
          key3: "TARGET_NET_ROC"
        }
      },
      {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(value: a!richTextItem(text: " ")),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: " -", value: fv!row.key1)
                  }
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(text: "Individual")
                ),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: "Net ", value: fv!row.key2),
                    a!gridColumn(label: " Gross", value: fv!row.key3)
                  }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(text: "Group")
                ),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: "Net ", value: fv!row.key2),
                    a!gridColumn(label: " Gross", value: fv!row.key3)
                  }
                )
              }
            )
          },
          showDividers: true()
        )
      }
    )




Reply
  • 0
    Certified Associate Developer

    a!localVariables(
      local!data: {
        {
          key1: "Current ROC",
          key2: "AVG_NET_ROC",
          Key3: "AVG_GROSS_ROC"
        },
        {
          key1: " ",
          key2: "AVG_NET_ROC",
          key3: "NET_ROC"
        },
        {
          key1: "NET ROC",
          key2: "AVG_NET_ROC",
          key3: "TARGET_NET_ROC"
        }
      },
      {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(value: a!richTextItem(text: " ")),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: " -", value: fv!row.key1)
                  }
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(text: "Individual")
                ),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: "Net ", value: fv!row.key2),
                    a!gridColumn(label: " Gross", value: fv!row.key3)
                  }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(text: "Group")
                ),
                a!gridField(
                  data: local!data,
                  columns: {
                    a!gridColumn(label: "Net ", value: fv!row.key2),
                    a!gridColumn(label: " Gross", value: fv!row.key3)
                  }
                )
              }
            )
          },
          showDividers: true()
        )
      }
    )




Children
No Data