RE: Separating rows with specific data

Shubham Aware — Thu, 18 Sep 2025 06:30:29 GMT

Agree with you!
Use the original data directly in the grid and add minimal visual indicators that work with fv!row.

RE: Separating rows with specific data

Goddati Venkatesh — Thu, 18 Sep 2025 03:48:06 GMT

Hello Harsh Kumar Agarwal ,Thank you for your time. Yes, going for customization can really break the existing functionalities of OOTB features.

RE: Separating rows with specific data

Goddati Venkatesh — Thu, 18 Sep 2025 03:45:07 GMT

Hello Shubham Aware

Thank you for your efforts and time. The interface is really looking good. However, if we use this, the default features of the grid like search and user filter will not work.

RE: Separating rows with specific data

Harsh Kumar Agarwal — Wed, 17 Sep 2025 08:12:11 GMT

There’s always an ongoing debate between using customization versus out-of-the-box (OOTB) features. In my opinion, customization is sometimes necessary. it can enhance usability and make the application more intuitive and visually appealing for the end user.

However, we must also consider important factors such as scalability and maintainability. For example, if you implement a custom feature in one place, users may start expecting the same functionality across all similar components, like every grid in the application. This can quickly become difficult to manage and maintain.

If there’s no OOTB feature that exactly meets the requirement, I would generally recommend avoiding customization unless absolutely necessary. Instead, consider workarounds. For instance, you could use a rich text display field to show the supplier name and apply distinct colors to each supplier to make them visually distinguishable. This approach keeps things simple, avoids heavy customization, and still improves the user experience.

RE: Separating rows with specific data

Shubham Aware — Wed, 17 Sep 2025 07:05:06 GMT

You can achieve this with multiple approach i tried 2 approach.
Let's have a look at it.

a!localVariables(
  /* Sample data matching your structure */
  local!data: {
    a!map(meetingName: "Meeting A", supplierName: "Supplier A", data: 23),
    a!map(meetingName: "Meeting A", supplierName: "Supplier A", data: 87),
    a!map(meetingName: "Meeting A", supplierName: "Supplier B", data: 56),
    a!map(meetingName: "Meeting A", supplierName: "Supplier B", data: 7),
    a!map(meetingName: "Meeting B", supplierName: "Supplier A", data: 45),
    a!map(meetingName: "Meeting B", supplierName: "Supplier A", data: 456),
    a!map(meetingName: "Meeting B", supplierName: "Supplier B", data: 56),
    a!map(meetingName: "Meeting B", supplierName: "Supplier B", data: 56)
  },

  /* Sort data by Meeting Name, then Supplier Name */
  local!sortedData: todatasubset(
    local!data,
    a!pagingInfo(
      startIndex: 1,
      batchSize: -1,
      sort: {
        a!sortInfo(field: "meetingName", ascending: true),
        a!sortInfo(field: "supplierName", ascending: true)
      }
    )
  ).data,

  /* Add index and previous supplier info to each row */
  local!dataWithIndex: a!forEach(
    items: local!sortedData,
    expression: a!map(
      meetingName: fv!item.meetingName,
      supplierName: fv!item.supplierName,
      data: fv!item.data,
      index: fv!index,
      isNewSupplier: or(
        fv!index = 1,
        fv!item.supplierName <> index(local!sortedData, fv!index - 1, {}).supplierName
      )
    )
  ),

  {
    a!sectionLayout(
      label: "",
      contents: {
        /* Approach 1: Using Horizontal Line Separators */
        a!cardLayout(
          contents: {
            a!richTextDisplayField(
              label: "Approach 1: Line Separators",
              labelPosition: "ABOVE",
              value:{}
            ),
            a!gridField(
              label: "",
              labelPosition: "COLLAPSED",
              data: local!dataWithIndex,
              columns: {
                a!gridColumn(
                  label: "Meeting Name",
                  value: a!richTextDisplayField(
                    value: {
                      if(
                        and(
                          fv!row.index > 1,
                          fv!row.isNewSupplier
                        ),
                        {
                          a!richTextItem(
                            text: "────────────────────",
                            color: "SECONDARY",
                            size: "SMALL"
                          ),
                          a!richTextItem(
                            text: char(10),
                            size: "SMALL"
                          )
                        },
                        {}
                      ),
                      a!richTextItem(
                        text: fv!row.meetingName,
                        style: if(
                          fv!row.isNewSupplier,
                          "STRONG",
                          "PLAIN"
                        )
                      )
                    }
                  ),
                  width: "AUTO"
                ),
                a!gridColumn(
                  label: "Supplier Name",
                  value: a!richTextDisplayField(
                    value: {
                      if(
                        and(
                          fv!row.index > 1,
                          fv!row.isNewSupplier
                        ),
                        {
                          a!richTextItem(
                            text: "────────────────────",
                            color: "SECONDARY",
                            size: "SMALL"
                          ),
                          a!richTextItem(
                            text: char(10),
                            size: "SMALL"
                          )
                        },
                        {}
                      ),
                      if(
                        fv!row.isNewSupplier,
                        {
                          a!richTextItem(
                            text: "▼ ",
                            color: "ACCENT",
                            size: "MEDIUM"
                          ),
                          a!richTextItem(
                            text: fv!row.supplierName,
                            style: "STRONG",
                            color: "ACCENT"
                          )
                        },
                        a!richTextItem(
                          text: "   " & fv!row.supplierName,
                          size: "STANDARD"
                        )
                      )
                    }
                  ),
                  width: "AUTO"
                ),
                a!gridColumn(
                  label: "Data",
                  value: a!richTextDisplayField(
                    value: {
                      if(
                        and(
                          fv!row.index > 1,
                          fv!row.isNewSupplier
                        ),
                        {
                          a!richTextItem(
                            text: "────────",
                            color: "SECONDARY",
                            size: "SMALL"
                          ),
                          a!richTextItem(
                            text: char(10),
                            size: "SMALL"
                          )
                        },
                        {}
                      ),
                      a!richTextItem(
                        text: fv!row.data,
                        style: if(
                          fv!row.isNewSupplier,
                          "STRONG",
                          "PLAIN"
                        )
                      )
                    }
                  ),
                  width: "AUTO",
                  align: "END"
                )
              },
              rowHeader: 1,
              height: "AUTO",
              borderStyle: "LIGHT",
              shadeAlternateRows: false,
              spacing: "DENSE"
            )
          },
          style: "NONE",
          padding: "STANDARD",
          marginBelow: "STANDARD"
        ),

        /* Approach 2: Using Colored Text and Icons */
        a!cardLayout(
          contents: {
            a!richTextDisplayField(
              label: "Approach 2: Colored Indicators",
              labelPosition: "ABOVE",
              value: {}
            ),
            a!gridField(
              label: "",
              labelPosition: "COLLAPSED",
              data: local!dataWithIndex,
              columns: {
                a!gridColumn(
                  label: "",
                  value: a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: if(
                          fv!row.isNewSupplier,
                          "●",
                          ""
                        ),
                        color: "POSITIVE",
                        size: "LARGE",
                        style: "STRONG"
                      )
                    }
                  ),
                  width: "ICON"
                ),
                a!gridColumn(
                  label: "Meeting Name",
                  value: a!richTextDisplayField(
                    value: a!richTextItem(
                      text: fv!row.meetingName,
                      style: if(
                        fv!row.isNewSupplier,
                        "STRONG",
                        "PLAIN"
                      ),
                      size: if(
                        fv!row.isNewSupplier,
                        "MEDIUM",
                        "STANDARD"
                      )
                    )
                  ),
                  width: "AUTO"
                ),
                a!gridColumn(
                  label: "Supplier Name",
                  value: a!richTextDisplayField(
                    value: {
                      if(
                        fv!row.isNewSupplier,
                        {
                          a!richTextItem(
                            text: "► ",
                            color: "POSITIVE",
                            style: "STRONG",
                            size: "MEDIUM"
                          ),
                          a!richTextItem(
                            text: fv!row.supplierName,
                            style: "STRONG",
                            color: "POSITIVE",
                            size: "MEDIUM"
                          )
                        },
                        a!richTextItem(
                          text: fv!row.supplierName,
                          color: "SECONDARY"
                        )
                      )
                    }
                  ),
                  width: "AUTO"
                ),
                a!gridColumn(
                  label: "Data",
                  value: a!richTextDisplayField(
                    value: a!richTextItem(
                      text: fv!row.data,
                      style: if(
                        fv!row.isNewSupplier,
                        "STRONG",
                        "PLAIN"
                      ),
                      size: if(
                        fv!row.isNewSupplier,
                        "MEDIUM",
                        "STANDARD"
                      )
                    )
                  ),
                  width: "AUTO",
                  align: "END"
                )
              },
              rowHeader: 1,
              height: "AUTO",
              borderStyle: "LIGHT",
              shadeAlternateRows: true,
              spacing: "DENSE"
            )
          },
          style: "NONE",
          padding: "STANDARD",
          marginBelow: "STANDARD"
        ),

      }
    )
  }
)