Skip to main content
gautams4173
gautams4173
Known Participant
Aug 22, 2024 12:50 PM UTC
Question

Merge Cells In a column

Hi 

I want to achieve such a grid, wherein there will be 1 value in the left row and can have multiple values in the right row denoting that values Mango -> Cherry belong to fruit type 

Can this be achieved using any of the grid components available ?

10 replies

stefanhelzle0001
stefanhelzle0001
Brainy
Aug 22, 2024 1:05 PM UTC

None of the grids does directly support cell fusion. But you can either build your own grid, using columns and cards, or you can tailor your data in a way it looks like fused cells. Rows with null values, and cell background color comes to my mind.

    gautams4173
    gautams4173Author
    Known Participant
    Aug 23, 2024 4:07 AM UTC

    Hmm Ill give this a try [emoticon:5ce50ea3f9eb49809e861e8733750338]

    Thanks

    mikes0011
    mikes0011
    Brainy
    Aug 22, 2024 3:49 PM UTC

    Echoihng what Stefan said - my personal preference would be to utilize Rich Text to build all of this into one cell, with a "heading followed by bullet points" approach (one benefit here would be, you wouldn't necessarily be limited to a particular length of array here), like:

    Fruits

    • Mango
    • Banana
    • Apple
    • Kiwi
    • Guava
    • Cherry

    e.g.

    The Expression Guru
    gautams4173
    gautams4173Author
    Known Participant
    Aug 23, 2024 4:09 AM UTC

    Yeah, this would be a much simpler approach .. but the requirement was to put it in a grid

    mikes0011
    mikes0011
    Brainy
    Aug 23, 2024 2:21 PM UTC

    the code i gave you can go in a grid cell.  the point is it would all go in a single grid cell (which is the closest thing you'll get to "merged rows" in an appian grid).  subsequent rows would be other items with different sub-items, or whatever the overall shape of your data is.

    The Expression Guru
    kumara0180
    kumara0180
    Participating Frequently
    Aug 23, 2024 4:07 AM UTC

    Adding on what Mike has shared, if you want to make it look bit more fancy use this

    a!localVariables(
  local!fruits: { "Apple", "Banana", "Cherry" },
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextItem(
                  text: { "Fruits" },
                  size: "MEDIUM",
                  style: { "STRONG" }
                )
              }
            ),
            a!forEach(
              items: local!fruits,
              expression: a!cardLayout(
                contents: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: a!richTextItem(text: fv!item)
                ),
                height: "AUTO",
                style: "TRANSPARENT",
                shape: "SEMI_ROUNDED",
                marginAbove: "NONE",
                marginBelow: "EVEN_LESS",
                showShadow: true
              )
            )
          },
          width: "NARROW_PLUS"
        ),
        a!columnLayout(contents: {}),
        a!columnLayout(contents: {})
      }
    )
  }
)

    gautams4173
    gautams4173Author
    Known Participant
    Aug 23, 2024 4:33 AM UTC

    Thanks for this, but need to show like a grid [emoticon:7001ca6adc474a82b3fba88f98f15573]

    kumara0180
    kumara0180
    Participating Frequently
    Aug 23, 2024 4:43 AM UTC

    a!localVariables(
  local!fruits: { "Apple", "Banana", "Cherry" },
  {
    a!cardLayout(
      contents: a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: concat(char(10), { "Fruits" }),
                    size: "MEDIUM",
                    style: { "STRONG" }
                  )
                },
                align: "CENTER"
              )
            },
            width: "NARROW"
          ),
          a!columnLayout(
            contents: {
              a!forEach(
                items: local!fruits,
                expression: a!cardLayout(
                  contents: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: a!richTextItem(text: fv!item)
                  ),
                  height: "AUTO",
                  style: "TRANSPARENT",
                  shape: "SQUARED",
                  marginAbove: "NONE",
                  marginBelow: "NONE",
                  showShadow: false(),
                  showBorder: false(),
                  decorativeBarPosition: "BOTTOM",
                  decorativeBarColor: "#111111"
                )
              )
            },
            width: "NARROW"
          ),
          a!columnLayout(contents: {})
        },
        spacing: "NONE",
        showDividers: true()
      ),
      padding: "NONE"
    )
  }
)

    konduruc733182
    konduruc733182
    Inspiring
    Aug 23, 2024 4:51 PM UTC

    [mention:33794ebc39034be6a8166212f1b53ddb:e9ed411860ed4f2ba0265705b8793d05] 

    What is your data structure? I guess that would help all of us to think of a work-around. You mentioned what you want but did not mention what you have.

    mikes0011
    mikes0011
    Brainy
    Aug 23, 2024 4:56 PM UTC

    agreed, we need a "bigger picture" view of the whole data structure - i.e. what the entire grid would be expected to look like, not just one cell after a "merge".

    The Expression Guru
    Terms & ConditionsAccessibility statement