Blog of an IT Guy

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
    

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