LightSwitch HTML multi-level tile navigation menu

Question

I am working on a multi-level tile navigation system for the LS HTML client.  The idea is to have tiles on the home screen that when tapped navigate to a lower-level screen with more tiles that eventually lead to browse screens with the actual LS data. 
Here is what I have so far (simplified of course).  Looking for suggestions on how to improve this.  TIA!
Home navigation tiles (these tiles appear on the application Home Screen)
-Orders - tap goes to Orders Home screen with additional tiles.
-Customers - tap goes to Customers Home screen with additional tiles.
-Lookups - tap goes to Lookups Home screen with additional tiles.
Order Navigation Tiles (these tiles appear on the Order home screen)
-Orders (search/browse Orders)
-Returns (screen based on a modeled query of Orders)
-other tiles for screens based on modeled queries of Orders
Customer Navigation Tiles (these tiles appear on a Customers home screen)
-Customers (search/browse Customers)
-other tiles based on modeled queries of Customers
Lookup Navigation Tiles
- Each tile links to a browse screen for one of the lookup tables.
>>>>
(didn't create an image/icon for this yet)
>>> ItemTap leads to a browse screen for "Test Records".
To power this menu system, there is a database table MenuTiles.
MenuTiles:
Title
Description
ScreenId
MenuGroup choicelist
-HomeGroup
-OrderGroup
-CustomerGroup
ImageFileName (contains the name of the static image file for the tile)
I have three modelled queries to get the tiles associated with each group.  The Home Screen gets its tiles from a modelled query selecting the tiles with MenuGroup == HomeGroup.  The other screens work the same way respectively.
The Home screen has the following js.  The other screens have similar methods.
myapp.Home.ImageFileName_render = function (element, contentItem) {
contentItem.dataBind("value", function (newValue) {
var newFileName = newValue;
if (newFileName !== null && newFileName !== undefined) {
element.innerHTML = "<image src='Content/Images/Tiles/" + newFileName + ".png'>";
myapp.Home.MenuTilesHomeGroup_ItemTap_execute = function (screen) {
var entity = screen.MenuTilesHomeGroup.selectedItem;
var modelItem = entity.details.properties["ScreenId"].value;
if (modelItem !== null && modelItem !== undefined) {
myapp.showScreen('Browse' + modelItem);
This all seems to work well.  The databind on the ImageFileName keeps the images updated on the screen if they are added or changed.  The ItemTap_execute function correctly navigates to a lower level navigation screen or a browse screen for the
appropriate entity collection.
The problem I have with it is it seems to rely on magic strings and that sort of thing.  For example, if the ScreenId does not match the name of a screen it will error.  If the ImageFileName does not match an image in the folder, it shows the default
placeholder.  Is there a better way to do this?

Answer 1

Nice Job Hessc!  I also like Dales tile menu that Dave mentioned.
For a look at another example, albeit not multi-level, see how
syncfusion does tiles in this demo:
Javascript
myapp.Home.ScreenContent_render = function (element, contentItem) {
TileCreation(element, contentItem);
$(".tile-li").on("click", function (args) {
var screen = args.currentTarget ? $(args.currentTarget).attr('data') : "";
myapp.showScreen(screen);
function TileCreation(element, contentItem) {
var SampleList = [
{ imgClass: "Editor", sampleName: "Editors", screenName: "BrowseEmployeeInfo" },
{ imgClass: "DatePicker", sampleName: "DatePicker", screenName: "DatePicker" },
{ imgClass: "DateTimePicker", sampleName: "DateTimePicker", screenName: "DateTimePicker" },
{ imgClass: "TimePicker", sampleName: "TimePicker", screenName: "TimePicker" },
{ imgClass: "Editor", sampleName: "TextBoxes", screenName: "TextBoxes" },
{ imgClass: "RichTextBox", sampleName: "RichTextEditor", screenName: "RichTextEditor" },
{ imgClass: "AutoComplete", sampleName: "AutoComplete", screenName: "AutoComplete" },
{ imgClass: "DropDownList", sampleName: "DropDownList", screenName: "DropDownList" },
{ imgClass: "Slider", sampleName: "Slider", screenName: "Slider" },
{ imgClass: "ProgressBar", sampleName: "ProgressBar", screenName: "ProgressBar" },
{ imgClass: "grid", sampleName: "Grid", screenName: "Grid" },
{ imgClass: "Chart", sampleName: "Chart", screenName: "Chart" },
{ imgClass: "CircularGauge", sampleName: "CircularGauge", screenName: "CircularGauge" },
{ imgClass: "LinearGauge", sampleName: "LinearGauge", screenName: "LinearGauge" },
{ imgClass: "DigitalGauge", sampleName: "DigitalGauge", screenName: "DigitalGauge" },
{ imgClass: "TreeMap", sampleName: "TreeMap", screenName: "TreeMapFlatCollection" },
{ imgClass: "Maps", sampleName: "Maps", screenName: "Maps" },
{ imgClass: "RangeNavigator", sampleName: "RangeNavigator", screenName: "RangeNavigator" },
{ imgClass: "BulletGraph", sampleName: "BulletGraph", screenName: "BulletGraph" },
{ imgClass: "ReportViewer", sampleName: "ReportViewer", screenName: "ReportViewer" }
var root = $('<ul class="tile-ul"></ul>'), content = "";
$(element).append(root);
$(SampleList).each(function (i, val) {
content = "<li class='tile-li' data='" + val.screenName + "'> " +
"<div><span class= 'innerList tile-img " + val.imgClass + "'>" + "</span>"
+ "<span class= 'innerList tile-txt'>" + val.sampleName + "</span></div>"
+ "</li>"
$(root).append(content);
// to remove screen display name in layout
$(".msls-label").remove();
CSS:
/*Sample Layout design CSS*/
ul.tile-ul {
list-style-type: none;
margin: 30px 0;
padding: 0;
li.tile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.charttile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.charttile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
.charttile-li > div {
text-align: center;
li.charttile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.charttile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.charttile-li span.tile-img.Chart {
background-image: url("SampleImg/Chart.png");
li.gridtile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.gridtile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
.gridtile-li > div {
text-align: center;
li.gridtile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.gridtile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.gridtile-li span.tile-img.grid {
background-image: url("SampleImg/grid.png");
.tile-li > div {
text-align: center;
li.tile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
li.tile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.tile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.tile-li span.tile-img.Editor {
background-image: url("SampleImg/Editor.png");
li.tile-li span.tile-img.grid {
background-image: url("SampleImg/grid.png");
li.tile-li span.tile-img.Employee {
background-image: url("SampleImg/EmpManage.png");
li.tile-li span.tile-img.CircularGauge {
background-image: url("SampleImg/Radial Gauge.png");
li.tile-li span.tile-img.DigitalGauge {
background-image: url("SampleImg/Digital Gauge.png");
li.tile-li span.tile-img.LinearGauge {
background-image: url("SampleImg/Linear Gauge.png");
li.tile-li span.tile-img.Chart {
background-image: url("SampleImg/Chart.png");
li.tile-li span.tile-img.RangeNavigator {
background-image: url("SampleImg/RangeNavigator.png");
li.tile-li span.tile-img.BulletGraph {
background-image: url("SampleImg/BulletGraph.png");
li.tile-li span.tile-img.TreeMap {
background-image: url("SampleImg/TreeMap.png");
li.tile-li span.tile-img.Maps {
background-image: url("SampleImg/Maps.png");
li.tile-li span.tile-img.ReportViewer {
background-image: url("SampleImg/ReportViewer.png");
li.charttile-li span.tile-img.MultipleAxes {
background-image: url("SampleImg/MultipleAxes.png");
li.charttile-li span.tile-img.Chart3D {
background-image: url("SampleImg/Chart3D.png");
li.charttile-li span.tile-img.LiveChart{
background-image: url("SampleImg/LiveChart.png");
li.charttile-li span.tile-img.CombinationChart {
background-image: url("SampleImg/CombinationChart.png");
li.charttile-li span.tile-img.DrillDown {
background-image: url("SampleImg/DrillDown.png");
li.gridtile-li span.tile-img.FlatGrid {
background-image: url("SampleImg/FlatGrid.png");
li.gridtile-li span.tile-img.Exporting {
background-image: url("SampleImg/Exporting.png");
li.gridtile-li span.tile-img.Summary {
background-image: url("SampleImg/Summary.png");
li.gridtile-li span.tile-img.ColumnTemplate{
background-image: url("SampleImg/ColumnTemplate.png");
li.tile-li span.tile-img.DatePicker {
background-image: url("SampleImg/DatePicker.png");
li.tile-li span.tile-img.DateTimePicker {
background-image: url("SampleImg/DateTimePicker.png");
li.tile-li span.tile-img.TimePicker {
background-image: url("SampleImg/TimePicker.png");
li.tile-li span.tile-img.RichTextBox {
background-image: url("SampleImg/RichTextBox.png");
li.tile-li span.tile-img.AutoComplete {
background-image: url("SampleImg/AutoComplete.png");
li.tile-li span.tile-img.DropDownList {
background-image: url("SampleImg/DropDownList.png");
li.tile-li span.tile-img.Slider {
background-image: url("SampleImg/Slider.png");
li.tile-li span.tile-img.ProgressBar {
background-image: url("SampleImg/ProgressBar.png");
.e-handle.e-select.ui-link {
margin: 0 0 0 -16px !important;
width: 28px !important;
height:17px !important;
.msls-label {
margin-bottom: 8px;
.innerList.tile-txt {
display: block;
word-wrap: break-word;
font-family: 'Segoe UI';
font-size: 14px;
color: #cececd;
margin-top:5px;
.innerList.tile-txt:hover {
color: #bababa;
.innerList.tile-txt:active {
color: #eaeaea;
.msls-header .msls-header-area {
padding: 2px 25px;
.msls-title-container .msls-title{
padding-top:2px;
h1.msls-title .msls-text-container, .msls-control-header .msls-text-container {
letter-spacing: 1px;
white-space: pre-line;
.ui-body-a, .ui-overlay-a {
background: none repeat scroll 0 0 #111111 !important;
.msls-dialog-inner-frame.ui-body-a.msls-rows-layout {
background: none repeat scroll 0 0 #111111 !important;
.msls-footer.ui-footer.ui-bar-a {
background-color: black !important;
.msls-dialog-inner-frame {
border-color:#484848 !important ;
.ui-header-fixed, .ui-footer-fixed {
z-index:0;
.msls-content {
padding-top:8px;
#msls-id-app-loading {
border-top-width:1px;
.msls-label.msls-label-align-left {
padding-top:7px;
.msls-tabs-container.ui-corner-all.ui-controlgroup.ui-controlgroup-horizontal {
padding-top: 12px;
@media (min-width: 320px) and (max-width:470px) {
li.tile-li, li.gridtile-li, li.charttile-li{
height: 150px;
width: 140px;
.msls-header .ui-title {
color: #eee;
font-family: "Segoe UI";
font-size: 13px;
@media (min-width: 480px) {
li.tile-li, li.gridtile-li, li.charttile-li{
height: 150px;
width: 147px;
Some things to notice are CSS classes are used to assign images and since it renders straight <UL> in a custom control, it prevents rendering all the extra DOM elements that LS tile list has - might make some customizations of look & feel
easier.
HTH,
Josh