LS2013 Core Project – Screens for user management

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

5 thoughts on “LS2013 Core Project – Screens for user management

  1. telefisch says:

    Again I did the whole howto, till this chapter.
    Same error with other Userinformation.

    How can I come over this problem?

  2. telefisch says:

    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.

  3. pmalcolm says:

    Is there a way I can add extra fields to the registration form.

  4. joshbooker says:

    This is really nice… line seven should read…
    7.Back in the UserRegistrationBrowse screen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: