Merge Cells In a column

GautamShenoy

Certified Senior Developer

3 months ago

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 ?

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle 3 months ago +1
Certified Lead Developer

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…

Parents

0 Kumar Agniwesh 3 months ago

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: {})
      }
    )
  }
)

Reply

0 Kumar Agniwesh 3 months ago

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: {})
      }
    )
  }
)

Children

0 GautamShenoy
Certified Senior Developer
3 months ago in reply to Kumar Agniwesh

Thanks for this, but need to show like a grid
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

0 Kumar Agniwesh 3 months ago in reply to GautamShenoy

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