A Component for changing an existing user’s account information
Begin by creating the Component from a template.
- Create a new UX Component using the template SecurityFramework-EditAccountForExistingUser.
- Above the closing tag of FRAME_1, add a Checkbox control for updating the user’s “Inactive” status.
- 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).
- Click the Menu button, choose Arguments, and insert a new argument (of type
- Character) that we will use to select which user to edit.
- Name the argument whatUser.
- Under Argument Binding, select Set value at Run-time. Click OK.
- In the left-side pane, click Data Binding.
- Bind the controls to the userparms table:
- Delete the RegisteredUsers table.
- Change the SQL connection string to secsys.
- Add the userparms table.
- When you try to finish adding the table, you may see this warning:
Click OK.
- Re-map the controls to the userparms fields as before (changing Table Alias from RegisteredUsers to Userparms as needed.)
- Save the Component; use file name EditUser.
Along with the instructor, examine and edit the Events for editing the user’s account.
- In the left-side panel, click Server-side.
- Click the onDialogInitialize Event.
- In line 4, change the variable assignment so that the variable takes its value from the whatUser argument, as shown here:
- 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.)
- Look at line 19. This call brings data values to the control from the userparms table to the controls.
- 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:
- Click anywhere in line 22 and click the button, and choose Edit action.
- The window appears. Click to edit the setting Find by Value Source.
- 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:
- Click OK to save this new setting, and then again to return to Event editing.
- Save the Component.
- Click the dialogValidate Event. As you saw in the NewUser Component:
- Lines 53 and 54, the lines that begin dialogValidate, handle messages for errors validating security.
- Line 57, the line in green, validates values from the controls against the security tables.
- Click the afterDialogValidate Event.
- Look at line 7. Via data binding, this Event saves updated values to the userparms table.
- Look at line 11. This Event saves updated values to the rest of the websecurity tables.
- After updating a user’s account, the application should make the list of users available again.
- 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.
- Save the Component.
Edit the List control so that the security application user can select an account to edit.
- In the UserList Component, choose the userList control.
- For that control, open the List Builder, and then click the List Properties tab.
- Locate the OnClick Event, and then click the smart button to edit its Action.
- The window appears.
Click the button, and choose to Create/edit JavaScript Action.
- Add a new action; give the new action the name EditThisUser.
- Edit the EditThisUser Action, and select the Action JavaScript.
Open a UX Component to Edit Current Record in List Control in a UX. - 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:
- Save the Action, and enter the comment Load one user from the list into the editing Component.
- Add another Action that will Set Active Panel to PANELCARD_2.
- Save the Action, and enter the comment Make PANELCARD_2 active, with user account ready to edit.
- You have defined two Actions, as shown here:
Click Save.
- Returning to the window, click OK.
- Returning to the window;
- Place the cursor anywhere in the script window.
- Click the Run a JavaScript Action link.
- Choose the EditThisUser Action.
- The Action appears in the script window, as shown here:
Click OK at the bottom of the window.
- Click OK again to exit the List Builder.
- Save the Component.