editable grid

Hi 

I have a editable grid where I am showing list of users with edit and delete icon. We don't want inline editing. Hence when person click on edit icon another interface appear where text box, dropdown, and checkboxes needs to pre-filled and selected and checked based on database data. For textbox and dropdown I got the solution but for checkbox I am still struggling. For first time when I click on edit icon right data populate but another time when I click some other record old record data appears. Please help me out in this regards.

= load(
  local!users: a!queryEntity(
    entity: cons!OR_VW_USER,
    query: a!query(
      filter: a!queryFilter(
        field: "role_id",
        operator: "<>",
        value: 1
      ),
      pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: - 1
      )
    )
  ).data,
  ri!actionEvent: "listUsers",
  a!formLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              rule!OR_addUpdateUser(
                userDetails: ri!userDetails,
                userPropertyInfo: ri!userPropertyInfo,
                userId: ri!userId,
                actionEvent: ri!actionEvent
              )
            },
            showwhen: ri!actionEvent = "saveUser"
          )
        }
      ),
      a!sectionLayout(
        label: "List of Users",
        contents: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!textField(
                  labelPosition: "COLLAPSED",
                  placeholder: "Search Users"
                )
              ),
              a!sideBySideItem(
                item: a!buttonArrayLayout(
                  buttons: {
                    a!buttonWidget(
                      label: "Add User",
                      saveInto: {
                        a!save(
                          target: ri!actionEvent,
                          value: "saveUser"
                        )
                      },
                      size: "SMALL",
                      style: "PRIMARY"
                    )
                  },
                  marginBelow: "NONE"
                ),
                width: "MINIMIZE"
              )
            },
            alignVertical: "MIDDLE",
            spacing: "DENSE"
          )
        },
        showwhen: ri!actionEvent = "listUsers",
        marginbelow: "NONE"
      ),
      a!gridLayout(
        totalCount: count(
          local!users
        ),
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "User Name"
          ),
          a!gridLayoutHeaderCell(
            label: "Role"
          ),
          a!gridLayoutHeaderCell(
            label: "Email"
          ),
          a!gridLayoutHeaderCell(
            label: "Status"
          ),
          /* For the "Edit" column */
          a!gridLayoutHeaderCell(
            label: ""
          ),
          /* For the "Re-invite" column */
          /*a!gridLayoutHeaderCell(
            label: ""
          ),*/
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(
            label: ""
          )
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 2
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          ),
         /* a!gridLayoutColumnConfig(
            width: "ICON"
          ),*/
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        rows: a!forEach(
          items: local!users,
          expression: a!gridRowLayout(
            id: fv!item.user_id,
            contents: {
              /* For the User Name Column*/
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "User Name",
                value: fv!item.first_name & " " & fv!item.last_name,
                required: true,
                readOnly: true()
              ),
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "role ",
                value: fv!item.role_name,
                required: true,
                readOnly: true()
              ),
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "email ",
                value: fv!item.primary_email,
                required: true,
                readOnly: true()
              ),
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "status ",
                value: fv!item.user_status,
                required: true,
                readOnly: true()
              ),
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "edit",
                  caption: "Edit",
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      a!save(
                        target:ri!userId,
                        value: fv!item.user_id
                      ),
                      a!save(
                        target: ri!actionEvent,
                        value: "saveUser"
                      )
                    }
                  ),
                  color: "#ffa200"
                ),
                align: "CENTER"
              ),
              /*a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "reply",
                  caption: "Re-invite",
                  link: a!dynamicLink(),
                  color: "#3eaf63"
                ),
                align: "CENTER"
              ),*/
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "remove",
                  caption: "Delete",
                  link: a!dynamicLink(
                    /*value: fv!index,
                    saveInto: {
                      a!save(local!users, remove(local!users, save!value)),
                      a!save(ri!actionEvent, "deleteUser")
                    }*/
                  ),
                  color: "#dc2d39"
                ),
                align: "CENTER"
              )
            }
          )
        ),
        showwhen: or(ri!actionEvent = "listUsers", ri!actionEvent = "deleteUser"),
        selectable: false,
        addRowlink: {},
        rowHeader: 1
      )
    }
  )
)

  Discussion posts and replies are publicly visible

  • It's a little difficult to tell from what you've provided what the pattern is you're aiming for. If you're aiming to accumulate the changes in the interface and then commit  those changes to the database in a process (as is suggested by the fact that you have rule inputs, but counter-suggested by the fact that your screen shot contains no 'Submit' button) OR you want to apply any changes made immediately (for which you have no apparent functionality in the interface to do this e.g. no a!writeToDatstore() function). Can you clarify what the pattern is you're aiming at and then perhaps we can explore options to fulfil this.

  • 0
    Certified Associate Developer

    Hello Hussain,

    How you are taking data that is being displayed on the click of edit button? I can see that you are saving userId when user clicks on edit button. Are you querying again based on this user id to get respective details? Have you checked the userId variable value? Is it taking the correct number?

  • Yes I am queriying based on userid. And userId is filled with appropriate value alos

  • 0
    Certified Associate Developer
    in reply to husaina0001

    Can it be possible for you to send the code of 

    rule!OR_addUpdateUser() ?

  • Submission happens at OR_addUpdateUser. There are two interfaces 

    1. OR_userManagement

    2. OR_addUpdateUser

    Under OR_userManagement  I am calling OR_addUpdateUser by clicking edit icon using following code:

    rule!OR_addUpdateUser(
    userDetails: ri!userDetails,
    userPropertyInfo: ri!userPropertyInfo,
    userId: ri!userId,
    actionEvent: ri!actionEvent
    )

    So when OR_addUpdateUser calls we are hiding OR_userManagement contents temporary and display existing user details.So when the person click on edit icon it would display existing user's and its associate properties (multiple) information. Multiple properties are displayed in editable grid with checkbox selection. In edit mode checkboxes are checked based on property associate with user. 

     

  • = load(
      local!existingUserPropertyMappingInfo: if(
        isnull(
          ri!userId
        ),
        {},
        a!queryEntity(
          entity: cons!OR_USER_PROPERTY_INFO,
          query: a!query(
            filter: a!queryFilter(
              field: "user_id",
              operator: "=",
              value: ri!userId
            ),
            pagingInfo: a!pagingInfo(
              startIndex: 1,
              batchSize: - 1
            )
          )
        ).data
      ),
      local!existingUserPropertyIds: {
        a!forEach(
          items: local!existingUserPropertyMappingInfo,
          expression: fv!item.property_id
        )
      },
      local!gridSelection: a!gridSelection(
        selected: local!existingUserPropertyIds,
        pagingInfo: a!pagingInfo(
          startIndex: 1,
          batchSize: - 1,
          sort: a!sortInfo(
            field: "property_name",
            ascending: true
          )
        )
      ),
      local!properties: a!queryEntity(
        entity: cons!OR_PROPERTY_INFO,
        query: a!query(
          pagingInfo: local!gridSelection.pagingInfo
        ),
        fetchTotalCount: true
      ),
      a!sectionLayout(
        contents: {
          with(
            local!userDetails: if(
              isnull(
                ri!userId
              ),
              null,
              a!queryEntity(
                entity: cons!OR_USER,
                query: a!query(
                  filter: a!queryFilter(
                    field: "user_id",
                    operator: "=",
                    value: ri!userId
                  ),
                  pagingInfo: a!pagingInfo(
                    startIndex: 1,
                    batchSize: - 1
                  )
                )
              ).data
            ),
            a!boxLayout(
              label: "ADD NEW USER",
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "First Name",
                          labelPosition: "ABOVE",
                          placeholder: "First name",
                          value: if(
                            isnull(
                              local!userDetails
                            ),
                            ri!userDetails.first_name,
                            local!userDetails.first_name
                          ),
                          saveInto: ri!userDetails.first_name,
                          refreshAfter: "UNFOCUS",
                          required: true,
                          requiredmessage: "Please enter first name",
                          validations: {}
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Last Name",
                          labelPosition: "ABOVE",
                          placeholder: "Last name",
                          value: if(
                            isnull(
                              local!userDetails
                            ),
                            ri!userDetails.last_name,
                            local!userDetails.last_name
                          ),
                          saveInto: ri!userDetails.last_name,
                          refreshAfter: "UNFOCUS",
                          required: true,
                          requiredmessage: "Please enter last name",
                          validations: {}
                        )
                      }
                    )
                  }
                ),
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Email",
                          labelPosition: "ABOVE",
                          placeholder: "Email",
                          value: if(
                            isnull(
                              local!userDetails
                            ),
                            ri!userDetails.primary_email,
                            local!userDetails.primary_email
                          ),
                          saveInto: ri!userDetails.primary_email,
                          refreshAfter: "UNFOCUS",
                          required: true,
                          requiredmessage: "Please enter email",
                          validations: {}
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!dropdownField(
                          label: "Role",
                          labelPosition: "ABOVE",
                          placeholderLabel: "--- Select a Role ---",
                          choiceLabels: {
                            "Owner",
                            "Manager",
                            "Resident"
                          },
                          choiceValues: {
                            cons!OWNER_ROLE_ID,
                            cons!MANAGER_ROLE_ID,
                            cons!RESIDENT_ROLE_ID
                          },
                          value: if(
                            isnull(
                              local!userDetails
                            ),
                            ri!userDetails.role_id,
                            local!userDetails.role_id
                          ),
                          saveInto: ri!userDetails.role_id,
                          required: true,
                          requiredmessage: "Please select role",
                          validations: {}
                        )
                      }
                    )
                  }
                )
              },
              style: "STANDARD",
              marginBelow: "STANDARD"
            )
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    label: "",
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextHeader(
                        text: "Select Properties"
                      )
                    }
                  ),
                  a!gridField(
                    label: "Select Properties" & local!gridSelection,
                    labelPosition: "COLLAPSED",
                    totalCount: local!properties.totalCount,
                    columns: {
                      a!gridTextColumn(
                        label: "Property Name",
                        field: "property_name",
                        data: index(
                          local!properties.data,
                          "property_name",
                          {}
                        )
                      ),
                      a!gridTextColumn(
                        label: "Address",
                        field: "address_line1",
                        data: index(
                          local!properties.data,
                          "address_line1",
                          {}
                        )
                      )
                    },
                    identifiers: local!properties.identifiers,
                    value: local!gridSelection,
                    saveInto: {
                      local!gridSelection,
                      a!save(
                        ri!userPropertyInfo,
                        a!forEach(
                          items: local!gridSelection.selected,
                          expression: {
                            property_id: fv!item,
                            is_active: 1,
                            user_property_status: 1
                          }
                        )
                      )
                    },
                    selection: true,
                    selectionStyle: "CHECKBOX",
                    shadeAlternateRows: true,
                    rowHeader: 1
                  ),
                  a!textField(
                    label: "Selected Property IDs",
                    value: if(
                      length(
                        local!gridSelection.selected
                      ) = 0,
                      "No Property selected",
                      joinarray(
                        local!gridSelection.selected,
                        ", "
                      )
                    ),
                    readOnly: true
                  )
                }
              )
            }
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!buttonArrayLayout(
                    buttons: {
                      a!buttonWidget(
                        label: "Cancel",
                        style: "NORMAL",
                        saveInto: {
                          a!save(
                            target: ri!actionEvent,
                            value: "listUsers"
                          ),
                          a!save(
                            target: ri!userId,
                            value: null
                          )                    
                        }
                      ),
                      a!buttonWidget(
                        label: "Save",
                        submit: true,
                        style: "PRIMARY",
                        disabled: false
                      )
                    },
                    align: "END"
                  )
                }
              )
            }
          )
        }
      )
    )

  • Thanks all for your help. This problem is solved now. Instead of using load()  I replaced it with a!localVariables(). This will update local variables every time when OR_addUpdateUser interface called.