editable grid

A Score Level 1

hi ,

i need to created a grid in which data is coming from a table in DB.

The user can update any column value from that grid. On click of submit , the new column values will be saved into DB.

User should be able to delete a row or any column value from the grid also. Those should also be saved into Db on submit. How to pursue this using editable grid ?

Update 1:

 Grid data is visible , Values are coming from the DB.

 But whenever I try to change any column values , for example producer code , data doesnt persists, same value comes on clicking elsewhere.

Texfiled values are saved into local variable , saveinto is an Ri mapping of that table type . 

Attached the updated Code.

load(
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 20,
    sort: a!sortInfo(
      field: "prdcr_cde",
      ascending: false()
    )
  ),
  local!showLink,
  local!tableDetails: rule!APAC_SGP_getProducercodeAHmapDetails(
    pagingInfo: local!pagingInfo
  )a!sectionLayout(
    contents: {
      a!gridLayout(
        label: "",
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Account Handler User "
          ),
          a!gridLayoutHeaderCell(
            label: "Producer Code",
            
          ),
          a!gridLayoutHeaderCell(
            label: "Is Active",
            
          ),
          a!gridLayoutHeaderCell(
            label: "",
            
          )
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        rows: {
          a!forEach(
            items: local!tableDetails,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  value:  local!tableDetails[fv!index].ah_id,
                  saveInto:  local!tableDetails[fv!index].ah_id
                ),
                a!textField(
                  value:  local!tableDetails[fv!index].prdcr_cde,
                  saveInto:  local!tableDetails[fv!index].prdcr_cde
                ),
                a!textField(
                  value:  local!tableDetails[fv!index].is_active,
                  saveInto:  local!tableDetails[fv!index].is_active
                ),
                a!imageField(
                  label: "Delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "REMOVE"
                    ),
                    altText: "Remove Data",
                    caption: "Remove ",
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        a!save(
                          local!tableDetails,
                          remove(
                            local!tableDetails,
                            save!value
                          )
                        )
                      }
                    )
                  ),
                  size: "ICON"
                )
              }
            )
          )
        },
        addRowlink: a!dynamicLink(
          label: "Add Rows",
          value: {
            startDate: today() + 1
          },
          saveInto: {
            a!save(
              local!tableDetails,
              append(
                local!tableDetails,
                save!value
              )
            )
          }
        ),
        rowHeader: 1,
        /*showWhen: toboolean(*/
        /*local!showLink*/
        /*) = true(),*/
        
      ),
      a!buttonLayout(
        primaryButtons: {
          a!buttonWidgetSubmit(
            label: cons!APAC_TEXT_ACTIONS[1],
            confirmMessage: "Are you sure you want to submit?",
            value: cons!APAC_TEXT_ACTIONS[1],
            saveInto: {
              ri!buttonAction,
              
            },
            style: "PRIMARY",
            skipValidation: true()
          )
        },
        secondaryButtons: {
          a!buttonWidgetSubmit(
            label: cons!APAC_TEXT_ACTIONS[2],
            value: cons!APAC_TEXT_ACTIONS[2],
            saveInto: ri!buttonAction,
            style: "DESTRUCTIVE",
            skipValidation: true()
          )
        }
      )
    }
  )
)

Ri mapping is of the producer table type and array type.  Kindly help.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0
    A Score Level 1
    in reply to Stefan Helzle

    Grid isnt visible Attached the code.

    rule!APAC_SGP_getProducercodeAHmapDetails() this contains table values .

    load(
      local!pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: 20,
        sort: a!sortInfo(
          field: "prdcr_cde",
          ascending: false()
        )
      ),
      local!showLink,
      local!tableDetails: rule!APAC_SGP_getProducercodeAHmapDetails()
      a!sectionLayout(
        contents: {
          a!gridLayout(
            label: "",
            headerCells: {
              a!gridLayoutHeaderCell(
                label: "Account Handler User "
              ),
              a!gridLayoutHeaderCell(
                label: "Producer Code",
                
              ),
              a!gridLayoutHeaderCell(
                label: "Is Active",
                
              ),
              a!gridLayoutHeaderCell(
                label: "",
                
              )
            },
            columnConfigs: {
              a!gridLayoutColumnConfig(
                width: "DISTRIBUTE",
                weight: 3
              ),
              a!gridLayoutColumnConfig(
                width: "DISTRIBUTE",
                weight: 3
              ),
              a!gridLayoutColumnConfig(
                width: "DISTRIBUTE",
                weight: 3
              ),
              a!gridLayoutColumnConfig(
                width: "ICON"
              )
            },
            rows: {
              a!forEach(
                items: local!tableDetails,
                expression: a!gridRowLayout(
                  contents: {
                    a!textField(
                      value: local!tableDetails[fv!index].prdcr_cde,
                      saveInto: local!tableDetails[fv!index].prdcr_cde
                    ),
                    a!textField(
                      value: local!tableDetails[fv!index].ah_id,
                      saveInto: local!tableDetails[fv!index].ah_id
                    ),
                    a!textField(
                      value: local!tableDetails[fv!index].is_active,
                      saveInto: local!tableDetails[fv!index].is_active
                    ),
                    a!imageField(
                      label: "Delete " & fv!index,
                      images: a!documentImage(
                        document: a!iconIndicator(
                          "REMOVE"
                        ),
                        altText: "Remove Data",
                        caption: "Remove ",
                        link: a!dynamicLink(
                          value: fv!index,
                          saveInto: {
                            a!save(
                              local!tableDetails,
                              remove(
                                local!tableDetails,
                                save!value
                              )
                            )
                          }
                        )
                      ),
                      size: "ICON"
                    )
                  }
                )
              )
            },
            addRowlink: a!dynamicLink(
              label: "Add Rows",
              value: {
                startDate: today() + 1
              },
              saveInto: {
                a!save(
                  local!tableDetails,
                  append(
                    local!tableDetails,
                    save!value
                  )
                )
              }
            ),
            rowHeader: 1,
            showWhen: toboolean(
              local!showLink
            ) = true(),
            
          ),
          a!buttonLayout(
            primaryButtons: {
              a!buttonWidgetSubmit(
                label: cons!APAC_TEXT_ACTIONS[1],
                confirmMessage: "Are you sure you want to submit?",
                value: cons!APAC_TEXT_ACTIONS[1],
                saveInto: {
                  ri!buttonAction,
                  
                },
                style: "PRIMARY",
                skipValidation: true()
              )
            },
            secondaryButtons: {
              a!buttonWidgetSubmit(
                label: cons!APAC_TEXT_ACTIONS[2],
                value: cons!APAC_TEXT_ACTIONS[2],
                saveInto: ri!buttonAction,
                style: "DESTRUCTIVE",
                skipValidation: true()
              )
            }
          )
        }
      )
    )

  •  rule!APAC_SGP_getProducercodeAHmapDetails() is this rule returns data subset or dictionary ,if its data subset then  you need to do like rule!APAC_SGP_getProducercodeAHmapDetails().data

  • 0
    A Score Level 3
    in reply to ST07

    There is a comma missing in line 11

    local!tableDetails[fv!index].prdcr_cde as in line 56 will not work. Please have a look at the recipe.

    Your showWhen is  hides the grid instead of the link

  • this rules returns dictionary values, already used .data in the rule.

  • 0
    A Score Level 1
    in reply to Stefan Helzle

    Yes i have commented the show when line, it shows the grid now .