collapsible editable grid with selection check boxes

Question

hi I am trying to implement an editable grid , which should have collapsible rows 
 
 I am trying to avoid nested loops and wanted a check box option for all the rows . Any coding examples will help. Thank you

Konduru Chaitanya · Accepted Answer

Please take a look at the code below. I have made minor changes and also update local!selectedvalues using the variable where you want to save the values. Please make sure you save only the primary keys of the child data to avoid any duplicates and issues in the code. 
 
 a!localVariables(
 local!prs: {
 a!map(id: 1, summary: "PR1"),
 a!map(id: 2, summary: "PR2"),
 a!map(id: 3, summary: "PR3"),
 
 },
 local!items: {
 a!map(
 id: 1,
 summary: "item 1",
 qty: "2",
 unitPrice: "100",
 purchaseRequestid: 1
 ),
 a!map(
 id: 2,
 summary: "item 4",
 qty: "3",
 unitPrice: "200",
 purchaseRequestid: 1
 ),
 a!map(
 id: 3,
 summary: "item 7",
 qty: "2",
 unitPrice: "250",
 purchaseRequestid: 3
 ),
 a!map(
 id: 4,
 summary: "item 11",
 qty: "2",
 unitPrice: "30",
 purchaseRequestid: 2
 ),
 a!map(
 id: 5,
 summary: "item 31",
 qty: "6",
 unitPrice: "220",
 purchaseRequestid: 2
 )
 },
 local!selectedValues,
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label: ""),
 a!gridLayoutHeaderCell(label: "Summary"),
 a!gridLayoutHeaderCell(label: "Qty", align: "RIGHT"),
 a!gridLayoutHeaderCell(label: "Unit Price", align: "RIGHT"),
 a!gridLayoutHeaderCell(label: "Total Price", align: "RIGHT")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "ICON"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
 },
 rowHeader: 1,
 rows: a!forEach(
 items: local!prs,
 expression: a!localVariables(
 local!expanded: false,
 local!itemsForPr: index(
 local!items,
 /* Must cast to integer because a!queryEntity() returns a dictionary */
 wherecontains(
 tointeger(fv!item.id),
 local!items.purchaseRequestid
 ),
 {}
 ),
 local!totalPrice: sum(
 a!forEach(
 items: local!itemsForPr,
 expression: tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)
 )
 ),
 {
 a!gridRowLayout(
 contents: {
 a!textField(value: null, readOnly: true),
 a!richTextDisplayField(
 label: "Summary " & fv!index,
 value: {
 if(
 length(local!itemsForPr) = 0,
 fv!item.summary,
 a!richTextItem(
 text: if(local!expanded, "-", "+") & " " & fv!item.summary,
 link: a!dynamicLink(
 value: not(local!expanded),
 saveInto: local!expanded
 )
 )
 )
 }
 ),
 a!textField(label: "Qty " & fv!index, readOnly: true),
 a!textField(
 label: "Unit Price " & fv!index,
 readOnly: true
 ),
 a!textField(
 label: "Total Price " & fv!index,
 value: a!currency(isoCode: "USD", value: local!totalPrice),
 readOnly: true,
 align: "RIGHT"
 )
 }
 ),
 if(
 local!expanded,
 a!forEach(
 items: local!itemsForPr,
 expression: a!gridRowLayout(
 contents: {
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: if(
 contains(
 tointeger(local!selectedValues),
 fv!item.id
 ),
 "check-square",
 "square-o"
 ),
 link: a!dynamicLink(
 value: fv!item.id,
 saveInto: if(
 contains(
 tointeger(local!selectedValues),
 fv!item.id
 ),
 a!save(
 local!selectedValues,
 remove(
 local!selectedValues,
 wherecontains(fv!item.id,local!selectedValues)
 )
 ),
 a!save(
 local!selectedValues,
 append(local!selectedValues, fv!item.id)
 )
 )
 ),
 linkStyle: "STANDALONE"
 )
 ),
 a!richTextDisplayField(
 label: "Item Summary " & fv!index,
 value: a!richTextBulletedList(items: fv!item.summary)
 ),
 a!integerField(
 label: "Item Qty " & fv!index,
 value: fv!item.qty,
 readOnly: true,
 align: "RIGHT"
 ),
 a!textField(
 label: "Item Unit Price " & fv!index,
 value: a!currency(isoCode: "USD", value: fv!item.unitPrice),
 readOnly: true,
 align: "RIGHT"
 ),
 a!textField(
 label: "Item Total Price " & fv!index,
 value: a!currency(
 isoCode: "USD",
 value: tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)
 ),
 readOnly: true,
 align: "RIGHT"
 )
 }
 )
 ),
 {}
 )
 }
 )
 )
 )
)

collapsible editable grid with selection check boxes

Top Replies