Skip to main content
saidivyam
July 15, 2025
Question

Read only Grid

  • July 15, 2025
  • 2 replies
  • 0 views

Hello Everyone,

I have a read only grid component with  20 rows of data and  displays 5 rows for each page with id and product price.

How can we add a logic to display the sum of the data  display on bottom of the page for read only grid for each page.

a!map(id:1,price:1234),
a!map(id:2,price:1243,
a!map(id:3,price:1234),
a!map(id:4,price:1243),
a!map(id:5,price:1234),
a!map(id:6,price:1243),
a!map(id:7,price:1234),
a!map(id:8,price:1243),
a!map(id:9,price:1234),
a!map(id:10,price:1243)

In grid ,we need to display the values  for sum of 1st page  1-5 values, 2nd page  6-10 values ,3rd page 11-15 values. 

Thanks

Saidivya Minna,

2 replies

mikes0011
Brainy
July 15, 2025

The solution is probably to do some tricky post-processing on your local variable that holds your paged data set, inserting a fake row at the end for each page that contains the calculated value.  I haven't tried this approach (at least not recently) so it may be more tricky and/or clunky than it's worth for you, but it's probably worth a try.

shubhama926776
July 15, 2025

We have implemented similar requirement i made few changes as per your need.

Let me know if that works for you.



a!localVariables(
  /* Your complete dataset */
  local!allData: {
    a!map(id: 1, price: 1234),
    a!map(id: 2, price: 1243),
    a!map(id: 3, price: 1234),
    a!map(id: 4, price: 1243),
    a!map(id: 5, price: 1234),
    a!map(id: 6, price: 1243),
    a!map(id: 7, price: 1234),
    a!map(id: 8, price: 1243),
    a!map(id: 9, price: 1234),
    a!map(id: 10, price: 1243),
    a!map(id: 11, price: 1500),
    a!map(id: 12, price: 1600),
    a!map(id: 13, price: 1700),
    a!map(id: 14, price: 1800),
    a!map(id: 15, price: 1900),
    a!map(id: 16, price: 2000),
    a!map(id: 17, price: 2100),
    a!map(id: 18, price: 2200),
    a!map(id: 19, price: 2300),
    a!map(id: 20, price: 2400)
  },

  /* Grid configuration */
  local!pageSize: 5,

  /* Initialize paging */
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: local!pageSize
  ),

  /* Create data subset for grid using todatasubset() */
  local!dataSubset: todatasubset(
    arrayToPage: local!allData,
    pagingConfiguration: local!pagingInfo
  ),

  /* DYNAMIC CALCULATION LOGIC */
  /* Calculate which items are on current page */
  local!currentPageItems: if(
    a!isNullOrEmpty(local!dataSubset.data),
    {},
    local!dataSubset.data
  ),

  /* Calculate sum of current page items */
  local!pageSum: sum(
    a!forEach(
      items: local!currentPageItems,
      expression: if(
        a!isNullOrEmpty(fv!item.price),
        0,
        tointeger(fv!item.price)
      )
    )
  ),

  /* Calculate current page number for display */
  local!currentPageNumber: ceiling(local!pagingInfo.startIndex / local!pageSize),

  /* Calculate range for display */
  local!rangeStart: local!pagingInfo.startIndex,
  local!rangeEnd: min(
    local!pagingInfo.startIndex + length(local!currentPageItems) - 1,
    length(local!allData)
  ),

  {
    /* Main Grid */
    a!gridField(
      label: "Product Price Grid",
      labelPosition: "ABOVE",
      data: local!dataSubset,
      columns: {
        a!gridColumn(
          label: "ID",
          value: fv!row.id,
          align: "CENTER",
          width: "ICON_PLUS"
        ),
        a!gridColumn(
          label: "Product Price",
          value: a!currency(
            isoCode: "USD",
            value: fv!row.price
          ),
          align: "END"
        )
      },
      pagingSaveInto: {
        local!pagingInfo,
        /* Update data subset using todatasubset() */
        a!save(
          local!dataSubset,
          todatasubset(
            arrayToPage: local!allData,
            pagingConfiguration: local!pagingInfo
          )
        ),
        /* Update current page items */
        a!save(
          local!currentPageItems,
          if(
            a!isNullOrEmpty(local!dataSubset.data),
            {},
            local!dataSubset.data
          )
        ),
        /* Recalculate sum */
        a!save(
          local!pageSum,
          sum(
            a!forEach(
              items: local!currentPageItems,
              expression: if(
                a!isNullOrEmpty(fv!item.price),
                0,
                tointeger(fv!item.price)
              )
            )
          )
        ),
        /* Update page number */
        a!save(
          local!currentPageNumber,
          ceiling(local!pagingInfo.startIndex / local!pageSize)
        ),
        /* Update range */
        a!save(
          local!rangeStart,
          local!pagingInfo.startIndex
        ),
        a!save(
          local!rangeEnd,
          min(
            local!pagingInfo.startIndex + length(local!currentPageItems) - 1,
            length(local!allData)
          )
        )
      },
      borderStyle: "LIGHT",
      shadeAlternateRows: true,
      spacing: "DENSE",
      rowHeader: 1
    ),

    /* Page Sum Display */
    a!boxLayout(
      label: "",
      contents: {
        a!sideBySideLayout(
          items: {
            a!sideBySideItem(
              item: a!richTextDisplayField(
                value: {
                  a!richTextIcon(
                    icon: "calculator",
                    color: "ACCENT"
                  ),
                  a!richTextItem(
                    text: concat(
                      " Page ",
                      local!currentPageNumber,
                      " Sum (Items ",
                      local!rangeStart,
                      "-",
                      local!rangeEnd,
                      "):"
                    ),
                    size: "MEDIUM"
                  )
                }
              ),
              width: "AUTO"
            ),
            a!sideBySideItem(
              item: a!richTextDisplayField(
                value: {
                  a!richTextItem(
                    text: a!currency(
                      isoCode: "USD",
                      value: local!pageSum
                    ),
                    size: "LARGE",
                    style: "STRONG",
                    color: "POSITIVE"
                  )
                },
                align: "RIGHT"
              )
            )
          },
          alignVertical: "MIDDLE"
        )
      },
      style: "INFO",
      marginAbove: "STANDARD"
    ),

    /* Additional Information */
    a!richTextDisplayField(
      value: {
        a!richTextItem(
          text: "Total Records: ",
          color: "SECONDARY"
        ),
        a!richTextItem(
          text: length(local!allData),
          style: "STRONG"
        ),
        a!richTextItem(
          text: " | Grand Total: ",
          color: "SECONDARY"
        ),
        a!richTextItem(
          text: a!currency(
            isoCode: "USD",
            value: sum(
              a!forEach(
                items: local!allData,
                expression: tointeger(fv!item.price)
              )
            )
          ),
          style: "STRONG"
        )
      },
      align: "CENTER",
      marginAbove: "STANDARD"
    )
  }
)