read only grid

can someone suggest how to implement like this table in the interface. displaying headers only not getting.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • this is the requirement and data will be all integer value except first column 

    for the first header i have used like

    card layout

      side by side layout

          side by side item

      read only grid

    Name of Borrower  CIF Trade Paper Limit (TPL) Money Market Investments (Bonds) FX Derivatives IRS Derivatives (FX, Commodities) Manual Derivatives Manual IRS Total CEE Limit FX (Delivery/ Settlement)
        Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date Maximum OS Average As of date
  • 0
    Certified Senior Developer
    in reply to KM

    I would prefer what Mike has mentioned below. But If this works for you, you can use the below code

    a!localVariables(
      local!data: rule!KS_getRecordToDetlete(),
      {
        a!forEach(
          items: local!data,
          expression: {
            a!columnsLayout(
              spacing: "NONE",
              marginBelow: "NONE",
              marginAbove: "NONE",
              columns: {
                a!columnLayout(
                  width: "NARROW_PLUS",
                  contents: a!cardLayout(
                    marginAbove: "NONE",
                    marginBelow: "NONE",
                    padding: "NONE",
                    contents: {
                      a!richTextDisplayField(
                        value: a!richTextItem(
                          text: "",
                          style: "STRONG",
                          showWhen: fv!isFirst
                        ),
                        align: "CENTER"
                      ),
                      a!gridField(
                        data: fv!item,
                        columns: a!gridColumn(
                          label: if(fv!isFirst, "Name of Borrower", ""),
                          value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{6436f9d3-5bce-4f75-b74a-ffa968c3ce41}name'],
                          align: "CENTER",
                          width: "NARROW"
                        )
                      )
                    }
                  )
                ),
                a!columnLayout(
                  width: "NARROW_PLUS",
                  contents: a!cardLayout(
                    marginAbove: "NONE",
                    marginBelow: "NONE",
                    padding: "NONE",
                    contents: {
                      a!richTextDisplayField(
                        value: a!richTextItem(
                          text: "",
                          style: "STRONG",
                          showWhen: fv!isFirst
                        ),
                        align: "CENTER"
                      ),
                      a!gridField(
                        data: fv!item,
                        columns: a!gridColumn(
                          label: if(fv!isFirst, "CIF", ""),
                          value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2c5fe606-38cb-47bf-8e46-a8df08483640}CIF'],
                          align: "CENTER",
                          width: "NARROW"
                        )
                      )
                    }
                  )
                ),
                a!columnLayout(
                  contents: a!cardLayout(
                    padding: "NONE",
                    marginAbove: "NONE",
                    marginBelow: "NONE",
                    contents: {
                      a!richTextDisplayField(
                        marginAbove: "NONE",
                        value: a!richTextItem(
                          text: "Trade Paper Limit",
                          style: "STRONG",
                          showWhen: fv!isFirst
                        ),
                        align: "CENTER"
                      ),
                      a!gridField(
                        data: fv!item,
                        columns: {
                          a!gridColumn(
                            label: if(fv!isFirst, "Max", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{e9cfe8d7-31c2-49a6-8daa-6b82905d4b67}tplMax'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "Avg", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d6f465f9-6a96-493f-b254-f63c3529fce3}tplAvg'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "As Of Date", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{392f0d4c-1dbe-4ea0-b538-954940158be2}tplAsOfDate'],
                            align: "CENTER",
                            width: "NARROW"
                          )
                        }
                      )
                    }
                  )
                ),
                a!columnLayout(
                  contents: a!cardLayout(
                    padding: "NONE",
                    marginAbove: "NONE",
                    marginBelow: "NONE",
                    contents: {
                      a!richTextDisplayField(
                        marginAbove: "NONE",
                        value: a!richTextItem(
                          text: "Money Market",
                          style: "STRONG",
                          showWhen: fv!isFirst
                        ),
                        align: "CENTER"
                      ),
                      a!gridField(
                        data: fv!item,
                        columns: {
                          a!gridColumn(
                            label: if(fv!isFirst, "Max", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2b4a6db7-9591-42bf-bc5b-9f5075d49060}MMMax'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "Avg", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d98039c2-6865-4298-b23b-1aa4e5fd53fd}MMAvg'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "As Of Date", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{9ff4d628-7700-4dd0-96a9-08153cb1f0af}MMAsOfDate'],
                            align: "CENTER",
                            width: "NARROW"
                          )
                        }
                      )
                    }
                  )
                ),
                a!columnLayout(
                  contents: a!cardLayout(
                    padding: "NONE",
                    marginAbove: "NONE",
                    marginBelow: "NONE",
                    contents: {
                      a!richTextDisplayField(
                        marginAbove: "NONE",
                        value: a!richTextItem(
                          text: "Investment(Bonds)",
                          style: "STRONG",
                          showWhen: fv!isFirst
                        ),
                        align: "CENTER"
                      ),
                      a!gridField(
                        data: fv!item,
                        columns: {
                          a!gridColumn(
                            label: if(fv!isFirst, "Max", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{00c5c4d7-939c-4b65-92cb-1b28e05e56d3}IBMax'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "Avg", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{0de1c7be-2690-412e-a7f8-160f8150e509}IbAvg'],
                            align: "CENTER",
                            width: "NARROW"
                          ),
                          a!gridColumn(
                            label: if(fv!isFirst, "As Of Date", ""),
                            value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{b7d943b2-3c9d-4586-8468-c671b0afd2c2}IBAsOfDate'],
                            align: "CENTER",
                            width: "NARROW"
                          )
                        }
                      )
                    }
                  )
                )
              }
            )
          }
        )
      }
    )

    Replace the local!data with your data and the fields with your respective fields.

  • 0
    Certified Lead Developer
    in reply to KM

    This will not work as it works like two independent components. You need to replace the whole read only grid with a nested columns/card construct, including your two header rows.

    But, this looks like business forces you to rebuilt Excel. In my world, I try hard to push back such requirements, and try to deliver a more compelling and modern UI.