Read only Grid

Certified Associate Developer

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,

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    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.

  • 0
    Certified Lead Developer

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