You are here:   Blog
Register   |  Login

LightSwitch News

Dec 21

Written by: Michael Washington
12/21/2013 8:22 PM  RssIcon

You can implement an alternative menu in your Visual Studio LightSwitch HTML Client application. In this example we will implement the Multi-level push menu.

You can see the menu in action in the video below:

Implementing The Menu

image

First, we import the .css files and .js files and add references to them in the default.html page.

The jquery.multilevelpushmenu.menu.js file stores the structure of the menu:

 

// JS Aray instead HTML Markup
var arrMenu = [
	{
		title: 'Multi-Push Sample',
		icon: 'fa fa-reorder',
		items: [
            {
            	name: 'Main',
            	icon: 'fa fa-bullhorn',
            	link: '#'
            },
			{
				name: 'Section One',
				icon: 'fa fa-html5',
				link: '#',
				items: [
					{
					    title: 'Section One',
					    icon: 'fa fa-html5',
						items: [
							{
								name: 'Sub Section',
								icon: 'fa fa-code-fork',
								link: '#',								
							},							
						]
					}
				]
			},	
			{
			    name: 'Page Two',
			    icon: 'fa fa-bullhorn',
				link: '#'
			}
		]
	}
];

image

This produces the menu shown above.

(Note: You can get a list of the icons you can use for the “icon:” value at this link: http://fontawesome.io/icons/)

image

The menu needs to know what Divs to push to the right when it is expanded.

When we look at a running LightSwitch application in the JavaScript debugger, we see that LightSwitch dynamically creates Divs for each screen that is opened. The id is always a random value so we only have the data-role=”page” to use to locate the Divs.

The jquery.multilevelpushmenu.utility.js file contains a utility method, updateContainersToPush(), that will be called by code that will be implemented in each of the screens, to determine what Divs have been dynamically created, that need to be added to the containersToPush property of the menu:

 

function updateContainersToPush() {
    // Array hold the ContainersToPush
    var arrContainersToPush = [];
    // Loop thru each LightSwitch page named 'page'
    $("div[data-role*='page']").each(function () {
        // Add the page to the array
        var LightSwitchPage = $(this)[0];
        arrContainersToPush.push(LightSwitchPage);
    });
    // Loop thru each LightSwitch header page named 'header'
    $("div[data-role*='header']").each(function () {
        // Add the page to the array
        var LightSwitchHeaderPage = $(this)[0];
        arrContainersToPush.push(LightSwitchHeaderPage);
    });
    // Set the containersToPush for the menu
    $('#menu').multilevelpushmenu('option', 'containersToPush', arrContainersToPush);
};

 

image

We also add additional .css and .js references that are required for the menu.

image

We also add a Div to the default.htm page that the menu will be injected into.

We add the following .css to the LightSwitch user-customization.css file:

 
/* Customizations for multilevel push menu */
/* Move header to the right */
.msls-logo, .msls-title-container {
    margin-left: 2em;
}
/* Hide the back button */
.msls-back-button-contain {
    display: none;
} 
/* set Z-Index so elements are clickable */
.multilevelpushmenu_wrapper {
    z-index: 9000;
}
/* set Z-Index so elements are clickable */
.msls-ctl-list {
    z-index: 10000;
}
/* Fix font of header */
.multilevelpushmenu_wrapper h2 {
    text-shadow: initial;
    color: #FFFFFF;
}
 

The Screens

image

The first screen to load in the application is the Main screen. It is the screen that will create the menu in its JavaScript code.

We use the following code to create the menu and to open the other screens when their link is clicked:

 

myapp.Main.spacerContent_render = function (element, contentItem) {
    if ($('#menu')[0].innerHTML == "") {
        // Create Menu
        $('#menu').multilevelpushmenu({
            menu: arrMenu,
            collapsed: true,
            containersToPush: [$("div[data-role*='page']"), $("div[data-role*='header']")],
            overlapWidth: 40,
            onItemClick: function () {
                // First argument is original event object
                var event = arguments[0],
                // Second argument is menu level object containing clicked item (<div> element)
                $menuLevelHolder = arguments[1],
                // Third argument is clicked item (<li> element)
                $item = arguments[2],
                // Fourth argument is instance settings/options object
                options = arguments[3];
                var itemName = $item.find('a:first').text();
                // Collapse menu
                $('#menu').multilevelpushmenu('collapse');
                // Open Page
                if (itemName == 'Main') {
                    myapp.showMain();
                }
                if (itemName == 'Sub Section') {
                    myapp.showSubSection();
                }
                if (itemName == 'Page Two') {
                    myapp.showPageTwo();
                }
            }
        });
    } else {
        // Menu already created
        // Update Menu containers to push
        updateContainersToPush();
    };
};

 

image

Also, on every screen we use a Custom Control to move the content of the page to the right to leave room for the menu.

We use the following setting for the control:

image

On each subsequent page we use code (in the render of the spacer Custom Control) like the example below, to add the page to array of Divs to be pushed to the right when the menu is expanded:

 

myapp.PageTwo.spacerContent_render = function (element, contentItem) {
    // Update Menu containers to push
    updateContainersToPush();
};

 

We have to run this code in the render method of a control on the page, because the page cannot be added to the array until after the page has been fully rendered.

 

Download

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 Professional (or higher), installed to run the code)

Tags: Advanced
Categories:

7 comment(s) so far...


Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Hi,
Great. It works. Nice.

One issue though.

When the screen has tabs, I don't know how to make it render right.
Any fix for this?
Regards
Sven

By Sven on   12/23/2013 12:37 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Hi
Made it work but then I noticed that autocomplete box render below lists/grids.
Think it has to do with the Changes in user customization file.

Besides that Little problem. Great work!
Sven

By Sven on   12/23/2013 5:36 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@Sven - You will want to locate the .class of the control and alter the user customization file to adjust the z-index.

By Michael Washington on   12/23/2013 5:43 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Hi,

I am planning to use Wijmo menu. It seems that the "Main" default title of Lightswitch is still there in the Main page whilst for the rest the menu is disabled. Is it possible to make the "Main" default title for main page invisible as well?

Cliff

By Cliff Lo on   1/28/2014 4:43 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@Cliff Lo - You should be able to do this with .css code. I have no code examples, sorry.

By Michael Washington on   1/28/2014 5:23 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Comment
/* set Z-Index so elements are clickable */
/* .msls-ctl-list {
z-index: 10000;
} */

Go to Github and download updated version of multi level push menu
https://github.com/adgsm/multi-level-push-menu

copy and replace file in the project:
jquery.multilevelpushmenu.min.js

By Daniel Ramirez on   3/7/2014 7:43 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@Daniel Ramirez - Thanks :)

By Michael Washington on   3/7/2014 8:33 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation