Skip to main content
July 19, 2024
Solved

collapsible editable grid with selection check boxes

  • July 19, 2024
  • 10 replies
  • 0 views

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

    Best answer by konduruc733182

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

    10 replies

    konduruc733182
    July 19, 2024

    Need more details on your data structure. What variables the data should flow in on clicking the check boxes and also do you want it to be multiple selection. more details please.

    July 19, 2024

    the editable grid is connected to the record type, i wanted to save the entire row upon selection to commit back to the backend, yes, I  want multiple selection. I dont want selection on the row that has heading but only the sub items. 

    konduruc733182
    July 21, 2024

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