LS2013 Core Project – Screens for role management

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

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

  1. Joe Lee says:

    I have the same issue. From view role, it is not get any related RolAssignments and RolePermissions. It is the same in both html and desktop clients

  2. Thomas says:

    HI Dale,
    i downloaded fiddler and this is what it Shows when i klick on Administrator to Show Permissions and Assignments:

    GET: /LsSecurityData.svc/Roles(‘Administrator’)/RoleAssignments?$expand=User&$top=15

    RAW:
    HTTP/1.1 200 OK
    Cache-Control: no-cache
    Content-Length: 99
    Content-Type: application/json;odata=minimalmetadata;streaming=true;charset=utf-8
    Server: Microsoft-IIS/8.0
    X-Content-Type-Options: nosniff
    DataServiceVersion: 3.0;
    X-AspNet-Version: 4.0.30319
    X-SourceFiles: =?UTF-8?B?QzpcRW50d2lja2x1bmdcd2FzdGVJVFx3YXN0ZUlUXGJpblxEZWJ1Z1xMc1NlY3VyaXR5RGF0YS5zdmNcUm9sZXMoJ0FkbWluaXN0cmF0b3InKVxSb2xlQXNzaWdubWVudHM=?=
    X-Powered-By: ASP.NET
    Date: Tue, 20 May 2014 06:46:24 GMT

    {“odata.metadata”:”http://localhost:49983/LsSecurityData.svc/$metadata#RoleAssignments”,”value”:[]}

  3. Thomas says:

    Hi Dale,
    i have a strange behaviour at this Point. when i run the app i can add role assigments to a role. all works fine. but when i stop the app and run again and go to the roles browse Screen and tap a role no assignments were shown.
    Please have a look at the Video:
    http://screencast.com/t/fq0FxuBDG3G5

    I’ve worked out ur tutorial several times and when i come to this Point ist always the same behaviour. can find out what happens.
    Im using vs 2013 update 2 (tried it with update 1 too, same behaviour)

    PS: When i start your Project all works fine. are you using an other Version of VS? perhaps ist a bug in VS 2013 with odata datasources?! it seems that lightswitch in vs 2013 doesnt load the related data…

    Please help
    Thomas

    • Thomas says:

      Hi Dale,
      sorry I mean Role Permissions. Altough i think that Role Assignments did not work for me too.

      Regards
      Thomas

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: