Blog of an IT Guy

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.

1. In Visual Studio
2. Create a new Browse Screen
3. Screen Name: UserRegistrationsBrowse
4. Screen Data: LsSecurityData.UserRegistrations
5. Edit the query
6. Add a filter:

   Where UserName <> leavemealone 
   

7. Click on the Details tab, and in properties, Edit PostRender Code
8. 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;
       });
   

9. Back in the UserRegistrationsBrowse screen
10. Change the User Registrations List to a Tile List
11. Delete the Password field from the Tile
12. Add a button to the Command Bar
13. Choose an existing method, User Registrations, addAndEditNew, New Screen
14. Screen Name: UserRegistrationAddEdit
15. Screen Data: LsSecurityData.UserRegistration
16. Additional Data: UserRegistration Details
17. Move all the fields up under the Command Bar
18. Delete the empty columns layout
19. Add a new Data Item to the screen
20. Local Property, String, Not Required, Name it ConfirmPassword
21. Edit the PostRender Code for the Password field
22. 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);
    
    

23. Edit the PostRender Code for the ConfirmPassword field
24. 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);
    
    

25. Back to the UserRegistrationsBrowse screen
26. Item Tap for User Registrations Tile List
27. Choose existing method, viewSelected, New Screen
28. Screen Name: UserRegistrationView
29. Screen Data: LsSecurityData.UserRegistration
30. Additional Data: Details and RoleAssignments
31. On the UserRegistrationView screen
32. In properties, select Show As Dialog
33. For the Details tab
34. Move the User Name and Full Name fields under the Command Bar
35. Delete the columns layout
36. On the Command Bar for the Details tab
37. Add a button, Existing Method, User Registration, Edit
38. Add another button, Write my own method, Name it DeleteUserRegistration
39. On the Role Assignments Tab
40. For the Role Assignments List, change to Tile List
41. Delete all the fields but Role Name
42. For the Role Assignments Tile List, Item Tap action
43. Write my own method, name it RoleAssignments1_ItemTap
44. On the Command Bar for the Role Assignments Tab
45. Add a button, Existing method, Role Assignments, addAndEditNew, New Screen
46. Screen Name: UserRoleAssignmentAddEdit
47. Screen Data: LsSecurityData.RoleAssignment
48. Additional Data: Details
49. Move the Role Details Modal Picker under the Command Bar
50. Delete the columns layout
51. Good time to save your solution
52. We need to set some additional properties when the screen is created
53. So still in the UserRoleAssignmentAddEdit screen
54. Go to Write Code and select created
55. Add the following into the method

    // Required fields
    var screenEntity = screen.RoleAssignment;
    screenEntity.SourceAccount = screenEntity.User;
    screenEntity.SourceAccountName = screenEntity.UserName;
    
    

56. Back to the UserRegistrationView screen
57. Add another button to the Role Assignments Tab Command Bar
58. Write my own method, name it DeleteRoleAssignment
59. 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:

1. Create the project
2. Add external CSS
3. Add external scripts
4. Update the default.htm
5. Add LogIn/LogOut/Register/ChangePassword
6. Create the security data source
7. Screens for permissions
8. Screens for role management
9. — You
10. Tables for tile menus
11. Screens for icon management
12. Screens for menu management
13. Create a tile menu screen
14. Create a database project
15. How to deploy successfully
16. Wrap up