Begin by creating the Component from a template.

  1. Create a new UX Component using the template SecurityFramework-EditAccountForExistingUser.
  2. Above the closing tag of FRAME_1, add a Checkbox control for updating the user’s “Inactive” status.
  3. Copy the control from the AddNewUser Component, and be sure its Default value is blank (the control will display the value from the user’s account).
  4. Click the Menu button, choose Arguments, and insert a new argument (of type
  5. Character) that we will use to select which user to edit.
  6. Name the argument whatUser.
  7. Under Argument Binding, select Set value at Run-time. Click OK.
  8. In the left-side pane, click Data Binding.
  9. Bind the controls to the userparms table:
    1. Delete the RegisteredUsers table.
    2. Change the SQL connection string to secsys.
    3. Add the userparms table.
    4. When you try to finish adding the table, you may see this warning:

Click OK.

    1. Re-map the controls to the userparms fields as before (changing Table Alias from RegisteredUsers to Userparms as needed.)
  1. Save the Component; use file name EditUser.


Along with the instructor, examine and edit the Events for editing the user’s account.

  1. In the left-side panel, click Server-side.
  2. Click the onDialogInitialize Event.
  3. In line 4, change the variable assignment so that the variable takes its value from the whatUser argument, as shown here:

  1. Look at the variable declaration on line 7 and the variable assignment on line 10. These lines retrieve all of the Group names from the websecurity_groups table, and use them to populate the UserRoles control (so the security application user change a given user’s Group assignment.)
  2. Look at line 19. This call brings data values to the control from the userparms table to the controls.
  3. Look at line 22. This call uses values from the websecurity_users table to bring data values needed from the other security tables to the controls. However, this call needs an adjustment:
    1. Click anywhere in line 22 and click the button, and choose Edit action.
    2. The   window appears. Click to edit the setting Find by Value Source.
    3. In the template’s default setting, the call looks for a value from a local variable. Change the setting so that it uses the argument we defined before, as shown here:

    1. Click OK to save this new setting, and then again to return to Event editing.
  1. Save the Component.
  2. Click the dialogValidate Event. As you saw in the NewUser Component:
    1. Lines 53 and 54, the lines that begin dialogValidate, handle messages for errors validating security.
    2. Line 57, the line in green, validates values from the controls against the security tables.
  3. Click the afterDialogValidate Event.
    1. Look at line 7. Via data binding, this Event saves updated values to the userparms table.
    2. Look at line 11. This Event saves updated values to the rest of the websecurity tables.
    3. After updating a user’s account, the application should make the list of users available again.
    4. Move to line 61. Enter the text shown here:


Edit – on line 65 type “dim e.javascript as c”. This is to ensure that variable exists in case it was not set above.

  • Lines 61 through 64 (which execute after updating a user’s security account successfully), define the command to navigate back to the list of users.
  • As you saw in Section 1 of this course, the delimiter <<%txt% lets you place JavaScript in an Xbasic function so that the JavaScript can be passed back to the calling JavaScript event.
  • The “parent object” is the userList control, which is in PANELCARD_1.
  • In line 64, the e.javascript object sends the JavaScript back to the browser.
  1. Save the Component.


Edit the List control so that the security application user can select an account to edit.

  1. In the UserList Component, choose the userList control.
  2. For that control, open the List Builder, and then click the List Properties tab.
  3. Locate the OnClick Event, and then click the smart button to edit its Action.




  1. The                                                          window appears.

Click the                                 button, and choose to Create/edit JavaScript Action.

  1. Add a new action; give the new action the name EditThisUser.
  2. Edit the EditThisUser Action, and select the Action JavaScript.
    Open a UX Component to Edit Current Record in List Control in a UX.
  3. The   window appears.


Change the settings for Mode, List control id, UX name, Target, Target Panel, and Use cached component as shown here:


When you change UX name, map the argument whatUser to the userList Primary Key, as shown here:

  1. Save the Action, and enter the comment Load one user from the list into the editing Component.


  1. Add another Action that will Set Active Panel to PANELCARD_2.
  2. Save the Action, and enter the comment Make PANELCARD_2 active, with user account ready to edit.

  1. You have defined two Actions, as shown here:

Click Save.

  1. Returning to the   window, click OK.
  2. Returning to the window;
    1. Place the cursor anywhere in the script window.
    2. Click the Run a JavaScript Action link.
    3. Choose the EditThisUser Action.

  1. The Action appears in the script window, as shown here:

Click OK at the bottom of the window.

  1. Click OK again to exit the List Builder.
  2. Save the Component.