We are down to the home stretch! In this section we will create the screens that will allow management the MetroUI screen menus.
- In Visual Studio
- Add a new Browse Screen
- Screen Name: MenuExport
- Screen Data: None
- Select Show As Dialog
- Add a Data Item to the screen
- Local Property, String, Required, Name: JsonMenuData
- Add the property to the screen
- Change the control type to Text Area
- Change Height and Width to Stretch
- Change the Tab Height and Width also to Stretch
- Go up to Write Code, created
- 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);
- Add another new Browse Screen
- Screen Name: MenusBrowse
- Screen Data: Menus
- Add a new button to the Command Bar
- Existing method, select showMenuExport from the dropdown
- Add a new button to the Command Bar
- Existing method, Menu, addAndEditNew, New Screen
- Screen Name: MenuAddEdit
- Screen Data: Menu
- Additional Data: Details
- Move the Name and Screen fields under the Command Bar
- Delete the empty columns
- Back to the MenusBrowse screen
- Select the List Menus
- In Properties, change the width Max to 300
- Also in Properties, select Item Tap
- Existing method, Menus, viewSelected, New Screen
- Screen Name: MenuView
- Screen Data: Menu
- Additional Data: MenuTiles only
- Edit the MenuTiles query
- Add a sort by Order, Ascending
- Add another sort, by Name, Ascending
- Save the query, then click on Back to MenuView
- Expand the Menu Tile summary to a Columns Layout
- Delete all fields but Order and Name
- Add a button to the Command Bar
- Existing method, Menu Tiles, addAndEditNew, New Screen
- Screen Name: MenuTileAddEdit
- Screen Data: MenuTile
- Additional Data: Details
- Lets first add a button to the Command Bar
- Write our own method, DeleteSelectedTile
- 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(); } });
- Back in MenuTileAddEdit screen
- Delete the Menu Details Model Picker field
- Delete the Permission Id field, not the Permission Modal Picker
- 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 - Now here is how we’ve laid out our screen, adjust yours to your liking
- Expand your Icon Details Modal Picker
- Change the Icon Summary to a Columns Layout
- In Properties change the Columns Layout Width to Stretch to Container
- Delete all the fields but Name
- Add a new Custom Control under the Icon Name
- Blank out the Data input box
- Full Path should show: MenuTile.Icon(item)
- Move the Custom Control ahead of the Name field
- Expand the control, delete all the fields
- In Properties for the Control, change the Width to Fit To Content
- Then Edit Render Code for this Custom Control
- Add the following into the method
// call our helper function, easy! itgLsHelper.iconPicker(element, contentItem);
- This would be a good time for you to drag the itgLsHelper.js to the top of the screen so you will have intellisense.
- 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 - Add the following into each of the color methods
itgLsHelper.colorPicker(element, contentItem);
- Final piece, go to Write Code, created method of the screen
- 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);
- Great! We are done with the MenuTileAddEdit screen!
- Back to the MenuView screen
- Add a new button to the Command Bar
- Exiting method, Menu, Edit
- Back to the MenuView screen
- Add a new button to the Command Bar
- Write my own method, DeleteEntireMenu
- Over on the Menu Tiles List set the Max width to 300
- Also for the Menu Tiles List in Properties, Item Tap
- Existing Method, showMenuTileAddEdit
- Data should be – MenuTile: MenuTiles.selectedItem
- 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(); } });
- Back in the MenuView screen
- Edit PostRender Code for the Menu Tiles Tab
- 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:
- Create the project
- Add external CSS
- Add external scripts
- Update the default.htm
- Add LogIn/LogOut/Register/ChangePassword
- Create the security data source
- Screens for permissions
- Screens for role management
- Screens for user management
- Tables for tile menus
- Screens for icon management
- — You
- Create a tile menu screen
- Create a database project
- How to deploy successfully
- Wrap up