Read only Grid

Question

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,

Shubham Aware · Answer

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

Mike Schmitt · Answer

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.

Read only Grid

Top Replies