collapsible editable grid with selection check boxes

RE: collapsible editable grid with selection check boxes

Konduru Chaitanya — Fri, 22 Nov 2024 06:32:14 GMT

Paging Control

    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: {
        a!richTextIcon(
          icon: "angle-left-bold",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!paging.startIndex,
                local!paging.startIndex - local!paging.batchSize
              )
            }
          ),
          linkstyle: "STANDALONE",
          showWhen:local!paging.startIndex > local!paging.batchSize,
          color: if(
            local!paging.startIndex > local!paging.batchSize,
            "ACCENT",
            "SECONDARY"
          ),
          size: "MEDIUM"
        ),
        a!richTextItem(
          text: concat(
            "  ",
            local!paging.startIndex,
            " to ",
            if(
              (local!paging.startIndex + local!paging.batchSize) - 1 >length(local!data),
              concat(length(local!items), " "),
              concat((local!paging.startIndex + local!paging.batchSize) - 1, " ")
            )
          ),
          style: { "STRONG" }
        ),
        a!richTextItem(
          text: concat("of ", length(local!data), "  "),
          color: "SECONDARY",
          style: {}
        ),
        a!richTextIcon(
          icon: "angle-right-bold",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!paging.startIndex,
                local!paging.startIndex + local!paging.batchSize
              )
            }
          ),
          linkstyle: "STANDALONE",
          showwhen: (local!paging.startIndex + local!paging.batchSize) - 1 < length(local!data),
          color: "ACCENT",
          size: "MEDIUM"
        )
      },
      showWhen: length(local!data) > 0,
      align: "CENTER"
    )

Local Variables

  local!data:{
    a!map(id: 1, summary: "PR1"),
    a!map(id: 2, summary: "PR2"),
    a!map(id: 3, summary: "PR3"),
    a!map(id: 4, summary: "PR4"),
    a!map(id: 5, summary: "PR5"),
    a!map(id: 6, summary: "PR6"),
  },
  local!paging:a!map(startIndex:1,batchSize:3),
  local!prs: {
    todatasubset(
      arrayToPage:local!data,
      pagingConfiguration: a!pagingInfo(
        startIndex: local!paging.startIndex, 
        batchSize: local!paging.batchSize,
        sort: a!sortInfo(field: "id",ascending: true)
      )
    ).data
  }

Please redo if needed. You can also move the length(local!data) to a local as well.

RE: collapsible editable grid with selection check boxes

fxzrqjzztrmy — Thu, 21 Nov 2024 07:35:30 GMT

How to page this grid?

RE: collapsible editable grid with selection check boxes

Konduru Chaitanya — Tue, 23 Jul 2024 01:53:37 GMT

You can simply use a button placed over the grid to achieve that. In the buttonWidget use a!save(local!selectedValues,null)

RE: collapsible editable grid with selection check boxes

kowsalyavijayan — Mon, 22 Jul 2024 23:01:22 GMT

, is there a way to reset the check boxes , upon button click , I have a requirement like, after selecting rows, I will update that in my data base, I wanted to refresh the grid upon button click which should also reset the check boxes.

RE: collapsible editable grid with selection check boxes

kowsalyavijayan — Mon, 22 Jul 2024 12:46:42 GMT

thanks . this is what I was expecting

RE: collapsible editable grid with selection check boxes

Karumuru Abhishek — Mon, 22 Jul 2024 04:29:55 GMT

hi kowsalyavijayan (kowsalyav7826) I still need to know your requirements, may I know why are you trying to show data grid-tree format?

RE: collapsible editable grid with selection check boxes

Konduru Chaitanya — Sun, 21 Jul 2024 19:55:32 GMT

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

RE: collapsible editable grid with selection check boxes

kowsalyavijayan — Fri, 19 Jul 2024 21:23:05 GMT

I am trying to implement the same thing mentioned here https://docs.appian.com/suite/help/24.2/recipe-expand-collapse-rows-in-a-tree-grid.html but i wanted to add selection checkboxes for the sub items only.

RE: collapsible editable grid with selection check boxes

kowsalyavijayan — Fri, 19 Jul 2024 13:10:03 GMT

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.

RE: collapsible editable grid with selection check boxes

Konduru Chaitanya — Fri, 19 Jul 2024 08:31:06 GMT

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.