Skip to main content
kavyam0002
kavyam0002
May 19, 2024
Question

read only grid

  • May 19, 2024
  • 10 replies
  • 0 views

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

    10 replies

    stefanhelzle0001
    stefanhelzle0001
    Brainy
    May 19, 2024

    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.

    karumurua531442
    karumurua531442
    May 19, 2024

    Hi,[mention:bd2e537916fe4b31980bfba549754efc:e9ed411860ed4f2ba0265705b8793d05]  As [mention:a11f77a729fb4db2af76b09948583328:e9ed411860ed4f2ba0265705b8793d05]  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

    konduruc733182
    konduruc733182
    May 19, 2024

    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.

    kavyam0002
    kavyam0002Author
    May 20, 2024

    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 

    konduruc733182
    konduruc733182
    May 20, 2024

    Please share the complete code and also your data sample

    kavyam0002
    kavyam0002Author
    May 20, 2024

    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
    mikes0011
    mikes0011
    Brainy
    May 20, 2024

    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)

    1. 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
    2. 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.
    The Expression Guru
    mikes0011
    mikes0011
    Brainy
    May 20, 2024

    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
                  }
                )
              }
            )
          ),

        }
      )
    }
  )
)

    The Expression Guru
    Terms & ConditionsAccessibility statement