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.
- In Visual Studio
- Create a new Browse Screen
- Name: IconsBrowse
- Screen Data: Icons
- Change the Icons List to a Tile List
- Change the Rows layout for the Icon to be Columns
- Delete all but the Name field
- Add a new Custom Control to the Icon Columns Layout
- When prompted, Delete the default of Screen as the data
- Input box should be empty and Full Path should be: Icons(item)
- Move the Custom Control to be ahead of the Name field
- Expand the Custom Control, delete all the fields
- Still on the custom control, in Properties
- Change Width to Fit to Content
- Same control, in Properties, Edit Render Code
- 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); });
- Back in the IconsBrowse screen
- On the Command Bar, Add a button
- Existing method, Icons, addAndEditNew, New Screen
- Screen Name: IconAddEdit
- Screen Data: Icon
- Additional Data: Details
- On the details tab
- Move the Name field up under the Command Bar
- Delete the columns layout
- From the Query side, drag the Name field under the Name field already there
- Should now have two Name fields in the details tab
- Change the bottom one to a custom control
- In the Properties for this one, Edit Render Code
- 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); });
- Back to the IconAddEdit screen
- Add a new button to the Command Bar
- Write my own method, name it DeleteSelectedIcon
- 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(); } });
- We need to now add a separate new screen for importing a list
- So Add a new Browse Screen
- Screen Name: IconsImport
- Screen Data: None
- In Properties for the Screen, select Show As Dialog
- Now add a data item to the screen
- Select Local Property, String
- Name it: CsvList
- Drag the property onto the Layout under the Command Bar
- Change the type to be a Text Area
- In Properties, Sizing, Change Height to Stretch to Container
- Also change the Height to Stretch for the Rows Layout Group Tab
- Add a button to the Command Bar
- Write my own method, name it ImportIconsCsv
- Add the following to its execute code
// Import a CSV that is pasted into a big text area itgLsHelper.importIcons(screen.CsvList);
- Great! Now back to the IconsBrowse screen
- Add a new button to the Command Bar
- Existing method, showIconsImport
- Might want to change the button Display Name to just Import List
- 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:
- 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
- — You
- Screens for menu management
- Create a tile menu screen
- Create a database project
- How to deploy successfully
- Wrap up
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*
Please if you can help me with this error
itgLs Helper.importIcons is not a function