LS2013 Core Project – Screens for icon management

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

2 thoughts on “LS2013 Core Project – Screens for icon management

  1. telefisch says:

    NICE! – wasted my time with this!
    nothing is working so far and no support.
    Sorry, would be useful if there was a bit of documentation to find problems by myself, but this is the same useless stuff as downloading complete project and trying to run.
    As I wrote in my last two questions your example doesn’t work and without any comments this is totally useless!

    *disappointed*

  2. Danilo says:

    Please if you can help me with this error

    itgLs Helper.importIcons is not a function

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: