read only grid

KM 2 months ago

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

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle 2 months ago +2
Certified Lead Developer

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.
Abhishek Karumuru 2 months ago +1
Certified Senior Developer

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…
Mike Schmitt 1 month ago +1 suggested
Certified Lead Developer

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…

Parents

0 KM 1 month ago

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
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Konduru Chaitanya
Certified Senior Developer
1 month ago in reply to KM

Please share the complete code and also your data sample
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

0 KM 1 month ago in reply to Konduru Chaitanya

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

0 Konduru Chaitanya

Certified Senior Developer

1 month ago 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.

Reply

0 Konduru Chaitanya

Certified Senior Developer

1 month ago 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.

Children

No Data