Blog of an IT Guy

So we’ll create some simple screens that will allow management of Icons for pick lists in our application. It’s an easy way that allows us to dynamically update without having to recompile and push code. You’ll also see some pretty cool ways of using the tile list for rendering custom content and a fast way to import a CSV list.

1. In Visual Studio
2. Create a new Browse Screen
3. Name: IconsBrowse
4. Screen Data: Icons
5. Change the Icons List to a Tile List
6. Change the Rows layout for the Icon to be Columns
7. Delete all but the Name field
8. Add a new Custom Control to the Icon Columns Layout
9. When prompted, Delete the default of Screen as the data
10. Input box should be empty and Full Path should be: Icons(item)
11. Move the Custom Control to be ahead of the Name field
12. Expand the Custom Control, delete all the fields
13. Still on the custom control, in Properties
14. Change Width to Fit to Content
15. Same control, in Properties, Edit Render Code
16. Add the following code into the method

    	var itemTemplate = $("<div class='metro icon' style='padding-right:5px;'></div>");
    	var iconTemplate = $("<i></i>");
    	iconTemplate.appendTo($(itemTemplate));
    	itemTemplate.appendTo($(element));
    
    	contentItem.dataBind("data.Name", function (newValue) {
    		iconTemplate[0].className = "";
    		iconTemplate.addClass(newValue);
    	});
    
    

17. Back in the IconsBrowse screen
18. On the Command Bar, Add a button
19. Existing method, Icons, addAndEditNew, New Screen
20. Screen Name: IconAddEdit
21. Screen Data: Icon
22. Additional Data: Details
23. On the details tab
24. Move the Name field up under the Command Bar
25. Delete the columns layout
26. From the Query side, drag the Name field under the Name field already there
27. Should now have two Name fields in the details tab
28. Change the bottom one to a custom control
29. In the Properties for this one, Edit Render Code
30. Add into the method the following code

    	var itemTemplate = $("<div class='metro icon'></div>");
    	var iconTemplate = $("<i style='font-size:48pt;'></i>");
    	iconTemplate.appendTo($(itemTemplate));
    	itemTemplate.appendTo($(element));
    
    	contentItem.dataBind("value", function (newValue) {
    		iconTemplate[0].className = "";
    		iconTemplate.addClass(newValue);
    	});
    
    

31. Back to the IconAddEdit screen
32. Add a new button to the Command Bar
33. Write my own method, name it DeleteSelectedIcon
34. Add the following into the execute method for the button

    	// Setup a dialog box to verify ok to delete
    	msls.showMessageBox("Are you sure you want to delete the \nIcon, including all associated data?", {
    		title: "Delete Icon",
    		buttons: msls.MessageBoxButtons.yesNo
    	}).then(function (e) {
    		if (e == msls.MessageBoxResult.yes) {
    			screen.Icon.deleteEntity();
    			myapp.commitChanges();
    		}
    	});
    

35. We need to now add a separate new screen for importing a list
36. So Add a new Browse Screen
37. Screen Name: IconsImport
38. Screen Data: None
39. In Properties for the Screen, select Show As Dialog
40. Now add a data item to the screen
41. Select Local Property, String
42. Name it: CsvList
43. Drag the property onto the Layout under the Command Bar
44. Change the type to be a Text Area
45. In Properties, Sizing, Change Height to Stretch to Container
46. Also change the Height to Stretch for the Rows Layout Group Tab
47. Add a button to the Command Bar
48. Write my own method, name it ImportIconsCsv
49. Add the following to its execute code

    		// Import a CSV that is pasted into a big text area
    		itgLsHelper.importIcons(screen.CsvList);
    

50. Great! Now back to the IconsBrowse screen
51. Add a new button to the Command Bar
52. Existing method, showIconsImport
53. Might want to change the button Display Name to just Import List
54. Remember to always change your button Icons when creating!

We are done with the Icons screen…

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