read only grid

RE: read only grid

Mike Schmitt — Mon, 20 May 2024 16:03:51 GMT

Here's a self-contained proof of concept that reproduces your original data set pretty much 1:1 --

a!localVariables(
  local!myData: {
    {
      name: "abc",
      customer: "parle",
      avgAmount: 63546,
      maxAmount: 2465,
      avgMM: 363,
      maxMM: 6575,
      avgBond: 6,
      maxBond: 9,
      avgInvest: 24723,
      maxInvest: 76435
    },
    {
      name: "xyz",
      customer: "samsung",
      avgAmount: 438534,
      maxAmount: 7345,
      avgMM: 57683,
      maxMM: 7534,
      avgBond: 4,
      maxBond: 5,
      avgInvest: 7384,
      maxInvest: 45554
    },
  },
  
  a!sectionLayout(
    contents: {
      a!gridField(
        data: local!myData,
        spacing: "DENSE",
        columns: {
          a!gridColumn(
            label: "Name",
            value: fv!row.name
          ),
          a!gridColumn(
            label: "Customer",
            value: fv!row.customer
          ),
          a!gridColumn(
            label: "Amount",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgAmount
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxAmount
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Money Market",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgMM
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxMM
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Bond",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgBond
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxBond
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Investment",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgInvest
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxInvest
                  }
                )
              }
            )
          ),

        }
      )
    }
  )
)

RE: read only grid

Mike Schmitt — Mon, 20 May 2024 14:52:51 GMT

Generally instead of trying to re-invent the wheel, I'd suggest one of 2 potential approaches here (both being a compromise from your original design but accomplishing *most* of it)

just add the discrete columns, and make the names slightly more "wordy". Instead of "Avg" and "Max" under the combined column "amount", just have "avg amount" / "max amount", and so-on for the other "combined" columns
alternatively, add only the "combined" column headers, and put both values for that row in the same cell, utilizing Rich Text and some formatting, it can look really nice - so for the "Amount" column, the row-cell will have 2 lines, saying i.e. "Avg: 63546", then "Max: 7465". This version works and looks great (from having done similar myself in the past), with the caveat that it isn't really sortable.

RE: read only grid

Stefan Helzle — Mon, 20 May 2024 14:34:13 GMT

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.

RE: read only grid

Konduru Chaitanya — Mon, 20 May 2024 14:09:24 GMT

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.

RE: read only grid

KM — Mon, 20 May 2024 10:14:16 GMT

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)

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

RE: read only grid

Konduru Chaitanya — Mon, 20 May 2024 10:04:14 GMT

Please share the complete code and also your data sample

RE: read only grid

KM — Mon, 20 May 2024 09:44:21 GMT

i have tried with card layout and grid, but am getting scroll bar which will not know for which header which data is. given width as well but no use.

i have to display 12 columns

RE: read only grid

Konduru Chaitanya — Sun, 19 May 2024 16:03:48 GMT

Just to add on what others have mentioned, you would need to reconstruct your data into a map to differentiate your data and then use the cards and columns within the data, you can run this in a foreach and minimize your code.

RE: read only grid

Karumuru Abhishek — Sun, 19 May 2024 15:00:24 GMT

Hi,KM As Stefan Helzle mentioned, the grid would not support cell merging, if you try to do it with some richtextfileds in the grid it would be very complex. It would be easier if you would change your approach to cards/column layouts

RE: read only grid

Stefan Helzle — Sun, 19 May 2024 14:36:13 GMT

Read only grids in Appian do not support cell merging.

Depending on your use case, an option could be to re-create a grid using columns layouts and card layouts.