You are here:   Blog
Register   |  Login

 

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:

27 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
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

That's really gr8! A bit painfull to add space container on every page though lol
What about multi-tabs page? Where do you put the space container?
Tks.

By François on   6/11/2014 8:38 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@François - You raise valid points. However, it is doable. I did not try multi-tabs pages so I am not sure how they will be handled.

By Michael Washington on   6/11/2014 9:46 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Tks Michael, I'll try to see how to place a spacer on the created code or something else.
Did you ever try to publish an app on Azure with that menu? For some reason the ul element get sa display:none; style and hence the menu is empty.

By François on   6/13/2014 9:24 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

The display:none is due to the font-awesome link not being https while my websites is. I downloaded and included font-awesome in my project and it works :-)

By François on   6/13/2014 9:24 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@François - Thanks for following up. I am glad you got it working.

By Michael Washington on   6/13/2014 9:24 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

What if the decision to push or not push (that is the question lol) depends on the screen size. For example on a phone I'm happy with the push but on a desktop I would like the menu to always be displayed. Any easy way to set that up or I have to dig into the js files?
Tks.

By François on   6/18/2014 3:53 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@François - I see no easy answers.

By Michael Washington on   6/18/2014 3:53 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

FYI, I moved the if(innerhtml=="") code of the first page into updateContainerToPush as otherwise the menu would disapear when hitting F5 on a page different from the home page.

By François on   7/12/2014 4:45 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Hey Michael,

I tried this out in VS LightSwitch 2013 Update 3 and am getting some weird behavior when the menu pushes out. The title of the page doesn't simply slide over as far as the menu provides, it slides almost to the center of the screen. Also, the content of the page (everything below the heading) is somewhat behind the push menu.

Any idea on how to update the CSS/JavaScript to make this work with the latest version of LightSwitch?

By cmsmith on   10/12/2014 10:57 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@cmsmith - Sorry, when they update the .css in LightSwitch it throws everything off. I spent hours to get the .css working in this example :) My advice is to remove my hacks and start over.

By Michael Washington on   10/12/2014 11:00 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Yeah, I updated this project to the latest version of LightSwitch and am seeing the same results that I have in my sample project. Just to let you know :)

By cmsmith on   10/12/2014 11:03 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

I'll hack on it a little bit and see if I can fix it. If I can, I'll post the fix here.

By cmsmith on   10/12/2014 11:04 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Ok, figured it out.

In juery.multilevelpushmenu.js remove this block:

// 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);
});

In the Main.lsml in the Customer Control remove this:

$("div[data-role*='header']")

from the containersToPush variable.

It appears that pushing and "pulling" the data-role='page' is enough for LightSwitch now. I think they wrapped everything in data-role="page". The header was being pushed twice.

If you want, I can update the project you have on your site to the latest version and send you a link to my dropbox of the zip.

By cmsmith on   10/12/2014 11:21 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

** Custom control, not Customer control.

By cmsmith on   10/12/2014 11:22 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Oh, and not jquery.multilevelpushmenu.js, jquery.multilevelpushmenu.utility.js

Typing too fast!!

By cmsmith on   10/12/2014 11:23 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@cmsmith - Thanks!

By Michael Washington on   10/12/2014 11:35 AM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

Hi guys,

Were you able to fix the issue with the content being behind the push menu in the latest version of LightSwitch? I see that there are comments about it above.

Thanks,
Martin

By Martin on   10/15/2014 1:56 PM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@Martin - No I have not worked on it, too busy sorry :(

By Michael Washington on   10/15/2014 1:57 PM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@Martin -- You have to make sure to change the control's CSS styling to have a higher z-index than that of the push menu. I noticed this with the LightSwitch table control; it was "behind" the push menu. I added '.msls-table' to the z-index callout in the CSS that Michael provided:

.msls-ctl-list .msls-table {
z-index: 10000;
}

There will be other's that won't work, especially custom stuff that you do yourself. Just add the root div's class to that CSS callout and it should work.

@Michael, I have this completely working as expected in the latest version of LightSwitch.

By cmsmith on   10/18/2014 4:03 PM
Gravatar

Re: Visual Studio LightSwitch HTML Client Push Menu

@cmsmith - Glad you have it working. Email me if you want me to post it :)

By Michael Washington on   10/18/2014 4:40 PM

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