Final section on Security Management will be the User registrations. This is a pretty hefty module also so have a little patience, it will be worth the effort.
- In Visual Studio
- Create a new Browse Screen
- Screen Name: UserRegistrationsBrowse
- Screen Data: LsSecurityData.UserRegistrations
- Edit the query
- Add a filter:
Where UserName <> leavemealone
- Click on the Details tab, and in properties, Edit PostRender Code
- Add the following code for showing the user name in the header
contentItem.dataBind("screen.UserRegistration.UserName", function (newValue) { contentItem.screen.details.displayName = "User " + newValue; });
- Back in the UserRegistrationsBrowse screen
- Change the User Registrations List to a Tile List
- Delete the Password field from the Tile
- Add a button to the Command Bar
- Choose an existing method, User Registrations, addAndEditNew, New Screen
- Screen Name: UserRegistrationAddEdit
- Screen Data: LsSecurityData.UserRegistration
- Additional Data: UserRegistration Details
- Move all the fields up under the Command Bar
- Delete the empty columns layout
- Add a new Data Item to the screen
- Local Property, String, Not Required, Name it ConfirmPassword
- Edit the PostRender Code for the Password field
- Add the following into its method
// Go find our ConfirmPassword contentItem var confirmContentItem = contentItem.screen.findContentItem("ConfirmPassword"); // Turn this field into a password with validation itgLsHelper.passwordValidator(element, contentItem, confirmContentItem);
- Edit the PostRender Code for the ConfirmPassword field
- Add the following code into its method
// Go find our Password contentItem var passwordContentItem = contentItem.screen.findContentItem("Password"); // Turn this field into a password type, validate against the password itgLsHelper.confirmPasswordValidator(element, contentItem, passwordContentItem);
- Back to the UserRegistrationsBrowse screen
- Item Tap for User Registrations Tile List
- Choose existing method, viewSelected, New Screen
- Screen Name: UserRegistrationView
- Screen Data: LsSecurityData.UserRegistration
- Additional Data: Details and RoleAssignments
- On the UserRegistrationView screen
- In properties, select Show As Dialog
- For the Details tab
- Move the User Name and Full Name fields under the Command Bar
- Delete the columns layout
- On the Command Bar for the Details tab
- Add a button, Existing Method, User Registration, Edit
- Add another button, Write my own method, Name it DeleteUserRegistration
- On the Role Assignments Tab
- For the Role Assignments List, change to Tile List
- Delete all the fields but Role Name
- For the Role Assignments Tile List, Item Tap action
- Write my own method, name it RoleAssignments1_ItemTap
- On the Command Bar for the Role Assignments Tab
- Add a button, Existing method, Role Assignments, addAndEditNew, New Screen
- Screen Name: UserRoleAssignmentAddEdit
- Screen Data: LsSecurityData.RoleAssignment
- Additional Data: Details
- Move the Role Details Modal Picker under the Command Bar
- Delete the columns layout
- Good time to save your solution
- We need to set some additional properties when the screen is created
- So still in the UserRoleAssignmentAddEdit screen
- Go to Write Code and select created
- Add the following into the method
// Required fields var screenEntity = screen.RoleAssignment; screenEntity.SourceAccount = screenEntity.User; screenEntity.SourceAccountName = screenEntity.UserName;
- Back to the UserRegistrationView screen
- Add another button to the Role Assignments Tab Command Bar
- Write my own method, name it DeleteRoleAssignment
- In properties, uncheck the Is Visible for this button
So as not to get too boring, I’ll again just show the entire code below for the appropriate methods for the UserRegistrationView.lsml.js file
// Add the name of the user to the screen header myapp.UserRegistrationView.Details_postRender = function (element, contentItem) { contentItem.dataBind("screen.UserRegistration.UserName", function (newValue) { contentItem.screen.details.displayName = "User " + newValue; }); }; // Delete the selected role assignment myapp.UserRegistrationView.DeleteRoleAssignment_execute = function (screen) { // Setup a dialog box to verify ok to delete msls.showMessageBox("Are you sure you want to delete the\nRole Assignment?", { title: "Delete Role Assignment", buttons: msls.MessageBoxButtons.yesNo }).then(function (e) { if (e == msls.MessageBoxResult.yes) { if (screen.RoleAssignments.selectedItem) { screen.RoleAssignments.selectedItem.deleteEntity(); myapp.applyChanges(); } screen.findContentItem("DeleteRoleAssignment").isVisible = false; } }); }; // Delete the selected user account, this will cascade to related data myapp.UserRegistrationView.DeleteUserRegistration_execute = function (screen) { // Setup a dialog box to verify ok to delete msls.showMessageBox("Are you sure you want to delete the entire \nUser account, including all associated data?", { title: "Delete User Account", buttons: msls.MessageBoxButtons.yesNo }).then(function (e) { if (e == msls.MessageBoxResult.yes) { screen.UserRegistration.deleteEntity(); myapp.commitChanges(); } }); }; // When a role assignment is tapped, show the delete button myapp.UserRegistrationView.RoleAssignments1_ItemTap_execute = function (screen) { screen.findContentItem("DeleteRoleAssignment").isVisible = true; };
Great! Almost done with the Security Management side of things.
Go ahead and save your solution and do a full build
Set the UserRegistrationsBrowse as the Home Screen and run the application.
Go add a user and play around with it, I bet you’ll be smiling the entire time.
So by this point you should have a fully working Core Project that includes Security Management, all within the HTML Client! In the grand scheme of things this was done with very little code.
Lets now go create the structure for our new MetroUI tile system so we can tie all this together, starting off with creating the required tables.
Next… Tables For Tile Menus
Here are the topics and their logical order:
- Create the project
- Add external CSS
- Add external scripts
- Update the default.htm
- Add LogIn/LogOut/Register/ChangePassword
- Create the security data source
- Screens for permissions
- Screens for role management
- — You
- Tables for tile menus
- Screens for icon management
- Screens for menu management
- Create a tile menu screen
- Create a database project
- How to deploy successfully
- Wrap up
Again I did the whole howto, till this chapter.
Same error with other Userinformation.
How can I come over this problem?
So far, so good…
If I try to give a user a role or if I try to edit a user I get the following Error:
Exception in Row 21, Column 12461 in
http://localhost:58798/LsCoreProject/Scripts/jquery-2.1.3.min.js
0x800a139e…
unrecognized expression: [data-url=’UserRegistrationView/’firstuser’/[e44340cc3]’]
I have no idea how to come over this error and find the fault.
Is there a way I can add extra fields to the registration form.
This is really nice… line seven should read…
7.Back in the UserRegistrationBrowse screen
Thanks for the catch Josh. Will get that corrected.