Updating grid data when a selected row is changed

I have a grid (in SAIL) that displays a number of rows.  When one row is selected, the details for that row are displayed below.  Any edits the user makes to the details need to flow back to the grid and be displayed.  This grid is not tied to a record set, but CDT data obtained from other parts of my application.  NOTE:  An editable grid will not work for my scenario.

A greatly simplified version of my need is....

a!localVariables(
  local!data: {
    { name: "Springs", qty: 4, unitCost: 1.27 },
    { name: "Sprockets", qty: 1, unitCost: 2.50 },
    { name: "Gears", qty: 7, unitCost: 1.98 }
  },
  local!selection: null,
  {
    a!sectionLayout(
      label: "Order Summary",
      contents: a!gridField(
        data: local!data,
        columns: {
          a!gridColumn(label: "Qty", value: fv!row.qty),
          a!gridColumn(label: "Item Name", value: fv!row.name),
          a!gridColumn(label: "Unit Cost", value: fv!row.unitCost),
          a!gridColumn(label: "Line Total", value: fv!row.qty * fv!row.unitCost)
        },
        selectable: true,
        selectionstyle: "ROW_HIGHLIGHT",
        selectionSaveInto: {
          a!save(
            local!selection,
            index(fv!selectedRows, length(fv!selectedRows), null)
          )
        }
      )
    ),
    a!sectionLayout(
      label: "Line Item Detail",
      contents: {
        a!textField(
          label: "Item Name",
          value: local!selection.name,
          saveInto: local!selection.name
        ),
        a!textField(
          label: "Quantity",
          value: local!selection.qty,
          saveInto: local!selection.qty
        ),
        a!textField(
          label: "Unit Cost",
          value: local!selection.unitCost,
          saveInto: local!selection.unitCost
        )
      },
      showWhen: not(isnull(local!selection))
    )
  }
)

When the data is changed, I see the update in local!selection but how do I get that change back to the grid data source (local!data)?

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    You simply need a "save" button displayed with the editable fields, which saves that data back into the array at the original position you accessed it from.

  • I'm not sure what the original position in the data array is.  This data has no primary key.

    And I should add that the editable details are actually in a separate interface

    rule!XX_SomeDetailInterface(local!selection)

    Does any of this change the solution?

  • 0
    Certified Lead Developer
    in reply to stevenh6272

    You can store the selected position from the array by "save!value" which, when there's no PK identifier, will save the row number into the save target.

  • +1
    Certified Lead Developer
    in reply to stevenh6272

    A working example is attached:

    a!localVariables(
      local!data: {
        { name: "Springs", qty: 4, unitCost: 1.27 },
        { name: "Sprockets", qty: 1, unitCost: 2.50 },
        { name: "Gears", qty: 7, unitCost: 1.98 }
      },
      local!rowSelected: null(),
      local!selection: null(),
      
      {
        a!sectionLayout(
          label: "Order Summary",
          contents: {
            a!gridField(
              data: local!data,
              columns: {
                a!gridColumn(label: "Qty", value: fv!row.qty),
                a!gridColumn(label: "Item Name", value: fv!row.name),
                a!gridColumn(label: "Unit Cost", value: fv!row.unitCost),
                a!gridColumn(label: "Line Total", value: fv!row.qty * fv!row.unitCost)
              },
              selectable: true,
              selectionstyle: "ROW_HIGHLIGHT",
              selectionValue: local!rowSelected,
              disableRowSelectionWhen: a!isNotNullOrEmpty(local!rowSelected),
              selectionSaveInto: {
                a!save(
                  local!rowSelected,
                  index(reverse(save!value), 1, null())
                ),
                a!save(
                  local!selection,
                  index(fv!selectedRows, length(fv!selectedRows), null())
                )
              }
            )
          }
        ),
        a!sectionLayout(
          label: "Line Item Detail",
          contents: {
            a!textField(
              label: "Item Name",
              value: local!selection.name,
              saveInto: local!selection.name
            ),
            a!textField(
              label: "Quantity",
              value: local!selection.qty,
              saveInto: local!selection.qty
            ),
            a!textField(
              label: "Unit Cost",
              value: local!selection.unitCost,
              saveInto: local!selection.unitCost
            ),
            a!buttonLayout(
              primaryButtons: {
                a!buttonWidget(
                  label: "Save",
                  style: "PRIMARY",
                  saveInto: {
                    a!save(
                      local!data,
                      a!update(
                        data: local!data,
                        index: local!rowSelected,
                        value: local!selection
                      )
                    ),
                    a!save(
                      {local!rowSelected, local!selection},
                      null()
                    )
                  }
                )
              },
              secondaryButtons: {
                a!buttonWidget(
                  label: "Cancel",
                  style: "SECONDARY",
                  saveInto: {
                    a!save(
                      {local!rowSelected, local!selection},
                      null()
                    )
                  }
                )
              }
            )
          },
          showWhen: not(isnull(local!selection))
        )
      }
    )

Reply
  • +1
    Certified Lead Developer
    in reply to stevenh6272

    A working example is attached:

    a!localVariables(
      local!data: {
        { name: "Springs", qty: 4, unitCost: 1.27 },
        { name: "Sprockets", qty: 1, unitCost: 2.50 },
        { name: "Gears", qty: 7, unitCost: 1.98 }
      },
      local!rowSelected: null(),
      local!selection: null(),
      
      {
        a!sectionLayout(
          label: "Order Summary",
          contents: {
            a!gridField(
              data: local!data,
              columns: {
                a!gridColumn(label: "Qty", value: fv!row.qty),
                a!gridColumn(label: "Item Name", value: fv!row.name),
                a!gridColumn(label: "Unit Cost", value: fv!row.unitCost),
                a!gridColumn(label: "Line Total", value: fv!row.qty * fv!row.unitCost)
              },
              selectable: true,
              selectionstyle: "ROW_HIGHLIGHT",
              selectionValue: local!rowSelected,
              disableRowSelectionWhen: a!isNotNullOrEmpty(local!rowSelected),
              selectionSaveInto: {
                a!save(
                  local!rowSelected,
                  index(reverse(save!value), 1, null())
                ),
                a!save(
                  local!selection,
                  index(fv!selectedRows, length(fv!selectedRows), null())
                )
              }
            )
          }
        ),
        a!sectionLayout(
          label: "Line Item Detail",
          contents: {
            a!textField(
              label: "Item Name",
              value: local!selection.name,
              saveInto: local!selection.name
            ),
            a!textField(
              label: "Quantity",
              value: local!selection.qty,
              saveInto: local!selection.qty
            ),
            a!textField(
              label: "Unit Cost",
              value: local!selection.unitCost,
              saveInto: local!selection.unitCost
            ),
            a!buttonLayout(
              primaryButtons: {
                a!buttonWidget(
                  label: "Save",
                  style: "PRIMARY",
                  saveInto: {
                    a!save(
                      local!data,
                      a!update(
                        data: local!data,
                        index: local!rowSelected,
                        value: local!selection
                      )
                    ),
                    a!save(
                      {local!rowSelected, local!selection},
                      null()
                    )
                  }
                )
              },
              secondaryButtons: {
                a!buttonWidget(
                  label: "Cancel",
                  style: "SECONDARY",
                  saveInto: {
                    a!save(
                      {local!rowSelected, local!selection},
                      null()
                    )
                  }
                )
              }
            )
          },
          showWhen: not(isnull(local!selection))
        )
      }
    )

Children