Blog of an IT Guy

We’ll continue the process of adding screens for managing LightSwitch security. This section we will deal with Role administration.

1. In Visual Studio
2. Create a new Browse Screen
3. Screen Name: RolesBrowse
4. Screen Data: LsSecurityData.Roles
5. Change the Roles List to a Tile List
6. Add a button to the Command Bar
7. Choose an existing method, Roles, addAndEditNew, New Screen
8. Screen Name: RoleAddEdit
9. Screen Data: LsSecurityData.Role
10. Additional Data: Role Details
11. Move the Name field under the Command Bar
12. Delete the empty Columns Layout
13. Back to the RolesBrowse screen
14. Roles Tile List, Item Tap in Properties, viewSelected, New Screen
15. Screen Name: RoleView
16. Screen Data: LsSecurityData.Role
17. Additional Data: RoleAssignments and RolePermissions
18. We don’t need the Details
19. On the RoleView screen
20. In properties for the screen, select Show As Dialog
21. Move Role Permissions tab to be first
22. For the Role Permissions List, change to Tile List
23. Delete the Role Name and Permission Id fields
24. Change the Permission Summary to be a row layout
25. Move the Id and Name fields up one level
26. Delete the empty row layout
27. Change the Role Assignments List also to a Tile List
28. Delete all the fields but the User Summary
29. Change the User Summary to a row layout
30. Move the User Name and Full Name fields up one level
31. Delete the left over row layout with the password field
32. Select the Role Permissions Tab, in properties, select Edit PostRender Code
33. Add the following code into the method to show our Role Name in the header

    	contentItem.dataBind("screen.Role.Name", function (newValue) {
    		contentItem.screen.details.displayName = newValue + " Role";
    	});
    
    

34. For the Permissions Tile List, in properties, Item Tap
35. Write my own method, name it RolePermissions1_ItemTap
36. On the Command Bar for the Role Permissions tab
37. Add a button, Write my own method, name it DeleteEntireRole
38. Add a button, Write my own method, name it DeleteRolePermission
39. For DeleteRolePermission button, uncheck the Is Visible
40. Add another button, Choose an existing method
41. Select under Role Permissions, addAndEditNew, New Screen
42. Screen Name: RolePermissionAddEdit
43. Screen Data: LsSecurityData.RolePermission
44. Additional Data: Details
45. Move the Permission modal picker under the Command Bar
46. Delete the rest
47. Save the solution for good measure
48. Back to the Role View Screen
49. On the Command Bar for Role Assignments
50. Add a button, Write my own method, name it DeleteRoleAssignment
51. So as not to get too boring, I’ll just show the entire code below for all the appropriate methods in the RoleView.lsml.js file

    // Add the role name to our screen header
    myapp.RoleView.RolePermissions_postRender = function (element, contentItem) {
    
    	contentItem.dataBind("screen.Role.Name", function (newValue) {
    		contentItem.screen.details.displayName = newValue + " Role";
    	});
    
    };
    
    // We only bother with asking for permission on critical cascading deletes
    myapp.RoleView.DeleteEntireRole_execute = function (screen) {
    	
    	// Setup a dialog box to verify ok to delete
    	msls.showMessageBox("Are you sure you want to delete the \nentire Role, including all associated data?", {
    		title: "Delete Entire Role",
    		buttons: msls.MessageBoxButtons.yesNo
    	}).then(function (e) {
    		if (e == msls.MessageBoxResult.yes) {
    			screen.Role.deleteEntity();
    			myapp.commitChanges();
    		}
    	});
    };
    
    // Delete the selected role assignment
    myapp.RoleView.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 role permission
    myapp.RoleView.DeleteRolePermission_execute = function (screen) {
    
    	// Setup a dialog box to verify ok to delete
    	msls.showMessageBox("Are you sure you want to delete the\nRole Permission?", {
    		title: "Delete Role Permission",
    		buttons: msls.MessageBoxButtons.yesNo
    	}).then(function (e) {
    		if (e == msls.MessageBoxResult.yes) {
    			if (screen.RolePermissions.selectedItem) {
    				screen.RolePermissions.selectedItem.deleteEntity();
    				myapp.applyChanges();
    			}
    			screen.findContentItem("DeleteRolePermission").isVisible = false;
    			screen.findContentItem("DeleteEntireRole").isVisible = true;
    
    		}
    	});
    };
    
    // When a role assignment is tapped, flip around buttons in view
    myapp.RoleView.RoleAssignments1_ItemTap_execute = function (screen) {
    
    	screen.findContentItem("DeleteRoleAssignment").isVisible = true;
    
    };
    
    // When a role permission is tapped, flip around buttons in view
    myapp.RoleView.RolePermissions1_ItemTap_execute = function (screen) {
    
    	screen.findContentItem("DeleteEntireRole").isVisible = false;
    	screen.findContentItem("DeleteRolePermission").isVisible = true;
    
    };
    
    

Don’t forget to change the icons for your buttons and perhaps friendlier display names. Look at our project for some examples.

Whew… Next… Screens For User Management

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. — You
9. Screens for user management
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