LS2013 Core Project – Screens for menu management

We are down to the home stretch! In this section we will create the screens that will allow management the MetroUI screen menus.

  1. In Visual Studio
  2. Add a new Browse Screen
  3. Screen Name: MenuExport
  4. Screen Data: None
  5. Select Show As Dialog
  6. Add a Data Item to the screen
  7. Local Property, String, Required, Name: JsonMenuData
  8. Add the property to the screen
  9. Change the control type to Text Area
  10. Change Height and Width to Stretch
  11. Change the Tab Height and Width also to Stretch
  12. Go up to Write Code, created
  13. Add the following into the method
    		// Get our contentItem to hold the export
    		var exportContentItem = screen.findContentItem("JsonMenuData");
    	
    		// Lets get our data, stuff the contentItem when done
    		itgLsHelper.exportTileMenusToJson(exportContentItem);
    
    
  14. Add another new Browse Screen
  15. Screen Name: MenusBrowse
  16. Screen Data: Menus
  17. Add a new button to the Command Bar
  18. Existing method, select showMenuExport from the dropdown
  19. Add a new button to the Command Bar
  20. Existing method, Menu, addAndEditNew, New Screen
  21. Screen Name: MenuAddEdit
  22. Screen Data: Menu
  23. Additional Data: Details
  24. Move the Name and Screen fields under the Command Bar
  25. Delete the empty columns
  26. Back to the MenusBrowse screen
  27. Select the List Menus
  28. In Properties, change the width Max to 300
  29. Also in Properties, select Item Tap
  30. Existing method, Menus, viewSelected, New Screen
  31. Screen Name: MenuView
  32. Screen Data: Menu
  33. Additional Data: MenuTiles only
  34. Edit the MenuTiles query
  35. Add a sort by Order, Ascending
  36. Add another sort, by Name, Ascending
  37. Save the query, then click on Back to MenuView
  38. Expand the Menu Tile summary to a Columns Layout
  39. Delete all fields but Order and Name
  40. Add a button to the Command Bar
  41. Existing method, Menu Tiles, addAndEditNew, New Screen
  42. Screen Name: MenuTileAddEdit
  43. Screen Data: MenuTile
  44. Additional Data: Details
  45. Lets first add a button to the Command Bar
  46. Write our own method, DeleteSelectedTile
  47. Add the following code into the method
    	// Setup a dialog box to verify ok to delete
    	msls.showMessageBox("Are you sure you want to delete the \nMenu Tile, including all associated data?", {
    		title: "Delete Menu Tile",
    		buttons: msls.MessageBoxButtons.yesNo
    	}).then(function (e) {
    		if (e == msls.MessageBoxResult.yes) {
    			screen.MenuTile.deleteEntity();
    			myapp.commitChanges();
    		}
    	});
    
  48. Back in MenuTileAddEdit screen
  49. Delete the Menu Details Model Picker field
  50. Delete the Permission Id field, not the Permission Modal Picker
  51. Change the following to Custom Controls
    Tile Color
    Status Bg Color
    Status Fg Color
    Badge Bg Color
    Badge Fg Color
    Icon Bg Color
    Icon Fg Color

  52. Now here is how we’ve laid out our screen, adjust yours to your liking
    Menu tile add edit

  53. Expand your Icon Details Modal Picker
  54. Change the Icon Summary to a Columns Layout
  55. In Properties change the Columns Layout Width to Stretch to Container
  56. Delete all the fields but Name
  57. Add a new Custom Control under the Icon Name
  58. Blank out the Data input box
  59. Full Path should show: MenuTile.Icon(item)
  60. Move the Custom Control ahead of the Name field
  61. Expand the control, delete all the fields
  62. In Properties for the Control, change the Width to Fit To Content
  63. Then Edit Render Code for this Custom Control
  64. Add the following into the method
    	// call our helper function, easy!
    	itgLsHelper.iconPicker(element, contentItem);
    
  65. This would be a good time for you to drag the itgLsHelper.js to the top of the screen so you will have intellisense.
  66. Now the easy part, Edit Render Code for each of your Color Custom Controls
    Tile Color
    Status Bg Color
    Status Fg Color
    Badge Bg Color
    Badge Fg Color
    Icon Bg Color
    Icon Fg Color

  67. Add the following into each of the color methods
    	itgLsHelper.colorPicker(element, contentItem);
    
    
  68. Final piece, go to Write Code, created method of the screen
  69. Add the following code into the method
    			// Go get our OnClick field (contentItem)
    			var onClickContentItem = screen.findContentItem("OnClick");
    		
    			// Update our screen picker with the list of screens
    			// This should be within screen created vs post render of the field
    			itgLsHelper.screenPicker(onClickContentItem);
    
    
  70. Great! We are done with the MenuTileAddEdit screen!
  71. Back to the MenuView screen
  72. Add a new button to the Command Bar
  73. Exiting method, Menu, Edit
  74. Back to the MenuView screen
  75. Add a new button to the Command Bar
  76. Write my own method, DeleteEntireMenu
  77. Over on the Menu Tiles List set the Max width to 300
  78. Also for the Menu Tiles List in Properties, Item Tap
  79. Existing Method, showMenuTileAddEdit
  80. Data should be – MenuTile: MenuTiles.selectedItem
  81. Now for your DeleteEntireMenu button, add the following to its execute method
    	// Setup our dialog box to verify ok to delete
    	msls.showMessageBox("Are you sure you want to delete the entire \nMenu, including all associated tiles?", {
    		title: "Delete Entire Menu",
    		buttons: msls.MessageBoxButtons.yesNo
    	}).then(function (e) {
    		if (e == msls.MessageBoxResult.yes) {
    
    			// Delete and commit, returning us to the browse screen
    			screen.Menu.deleteEntity();
    			myapp.commitChanges();
    
    		}
    	});
    
  82. Back in the MenuView screen
  83. Edit PostRender Code for the Menu Tiles Tab
  84. Add the following code to add the Menu name to the header
    	// Bind so that changes will be reflected
    	contentItem.dataBind("screen.Menu.Name", function (newValue) {
    		contentItem.screen.details.displayName = newValue + " Menu Tiles";
    	});
    

Awesome… done with the administrative screens! Now we can create the fun stuff!

Next… Create A Tile Menu Screen


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. Screens for user management
  10. Tables for tile menus
  11. Screens for icon management
  12. — You
  13. Create a tile menu screen
  14. Create a database project
  15. How to deploy successfully
  16. Wrap up

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: