29 Comments »

1. Excellent! My only comment is that you should not need to use JayData in this situation (it adds another dependency you don’t need) the LightSwitch msls.js/data.js/win.js contain all the methods you should need to query the database :)

   • Hi, Michael. Thx for your feedback! You are absolutely right. But in this project, we use ODATA controllers for other requirements, so a JAYDATA example would be helpful, right? :-)

     • Oh of course there is nothing wrong with using JayData if you are also using it for other things or you just like the much easier to use filter syntax that it provides :)

2. Good that you acknowledged Michaels ideas and then listed issues and provided a solution. Great blogging practice. There’s always ‘things to do’ that would further improve on any work (even our own works ;-) and it’s great that you published your list too. I downloaded your sample app and that ‘just worked’. I love it when that happens. Much appreciated.

   • Hi. Thx for your feedback! We’ll do our best.;-)

3. Pingback: Full example of an ODATA Controller for ActiveDirectory search operations with the LightSwitch HTML Client – d-fens GmbH

4. Any thoughts on the vertical scrollbar that appears on screens with some content? Disabling the menu removes the vertical scrollbar.

   • Hi. I am not sure, what you mean. Could you explain me your problem?

     • Sure. In the sample project from your GitHub, open the Tasks screen from the menu. There is a vertical scrollbar on the right side of the screen. I tested with my own project first and double checked with your sample. Same vertical scrollbar. I guess Michael Washington used the 5 px spacer control to prevent it somehow.

       I tested his solution, no vertical scrollbar there, but his implementation differs, so I cannot easily combine both (with my current knowledge of JavaScript that is.. ;-)).

     • The 5 px spacer in my solution is a hack :) I would start with the Carsten Kreissl code and work from there :)

   • I’m using the code Carstens code and also in his code the vertical scrollbar appears on all screens that have some content. Only on blank screens there is no vertical scrollbar.

5. Great post, it took me a while to figure out I had to add a div with id=menu, but I got it to work. I’d like to know how to customize the “Back” button, translate it to another language.
   PS: I don’t know what you mean by the 5px hack. Maybe a screenshot would help.

   • Hi, Nicolas. Thx for your feedback. On the 5th screenshot of Michaels blog post you can see the thing with the additional div.
     Regarding your question: just have a look in the “jquery.multilevelpushmenu.js”. Line 37. There you can change the “Back” button.
     Or you can change in CSS the “backItemClass”. E.g. with an icon. I just wrote an article about a very useful icon designer:
     https://d-fens.ch/2015/01/26/lightswitch-html-client-and-custom-icons-for-buttons/

6. I have another one: what if I need to pass parameters to a screen? something like showSearchNews(null, null)? or even better, code containing a promise object. Something like:
   myapp.activeDataWorkspace.ApplicationData.SourceByName(“Mashable”).execute()
   .then(function (result) {
   myapp.showSearchNews(null, result.results[0], null);
   });

   Thanks!

   • Hi, again…;-)
     Have a look here:
     http://stackoverflow.com/questions/15269515/lightswitch-passing-data-from-one-screen-to-another
     or:
     http://www.sadev.co.za/content/lightswitch-passing-data-between-screens-example-1-passing-string

     HTH, Carsten

     • Carsten, thanks for your help. I know that. I meant in the context of the menu array,
       {
       name: ‘Users’,
       icon: ‘fa fa-code-fork’,
       link: ‘#’,
       page: ‘showBrowseUsers’
       }

       something like page: ‘showBrowseUsers(null, null)’
       should work?

       thnks.

   • Hi Nicolas,
     Just pass the fully qualified navigation command as the page parameter in the menu array:
     {
     name: ‘Users’,
     icon: ‘fa fa-code-fork’,
     link: ‘#’,
     page: ‘showBrowseUsers(null, null);’
     }
     Then replace line 30:
     eval(‘myapp.’ + pageToOpen + ‘()’);
     with:
     eval(pageToOpen);

     You will then have to pass all your page properties as fully qualified commands.

     Hope that helps.
     Tink

7. Hi Carsten,

   Thank you for the lovely work on this. And thanks to Micheal of course for introducing us to this control. I was hesitant to implement it before you made these modifications and was toying with other menus that would avoid the problems you solved here. So big thanks to the both of you for collaborating and getting it working nicely.

   I have made some modifications on my side that are working well namely:
   1. My implementation is totally off canvas. I.e. the menu is hidden until the user clicks the LS Home icon/button.

   Screen real estate is precious in the mobile realm, even only 40 odd pixels of it (which is a 6th of certain modern phone’s widths), that you would lose on every page.

   I avoid this by setting the mode to ‘cover’, and overlapwidth to ‘0’: there is likely a better implementation than this which retains overlap menu functionality, but it works for me as I prefer cover mode anyway.

   I also hijacked the LS home button by hacking away at msls.js (not recommended for the faint of heart, and I highly recommend devs to document and comment accordingly if they do) and added a showMenu LS command which has a script that collapses or expands the menu accordingly and replaced the homebutton template “thingy” (terrible implementation from MS, but hey, spilt milk) to call that command instead (so that the homeCommand still works elsewhere).

   I still have to hijack msls.js (puke) a little more to ensure all browse actions collapse the menu (I mean the LS tile clicks, LS dialogs, confirmations, alerts, etc). But so far so good, and its looking great. I’ll likely just spam a bunch of collapse commands everywhere and pray occasionally until it works. Haha. I joke. But no, its really no joke, hacking msls.js I mean ;) I know where to start thanks to the great guys at:
   http://lightswitch.codewriting.tips/topics/#/ViewPage/40/25/%5Bde4699460%5D

   2. I removed all references to FontAwesome (the fonts folder and css file). The footprint it requires is a little large, and I prefer to minutely manage embedded images. My overall image/font repo is only about 50kb for a rather large system with many images, many of which are not from FontAwesome. Funnily enough I also use Metro Studio, and regularly select FontAwesome icons ;), but I embed and compress each one separately and embed them into CSS, which leaves me with a much smaller footprint. I guess that’s just my personal preference, for those that aren’t fanatically about download size like I am, this shouldn’t matter. I guess I’m stating that it is possible for those who don’t want the full FontAwesome included.

   So far the menu is working great in Lightswitch HTML, but I did notice some problems with both your and my implementation that I will try to figure out and post back here, but would appreciate outside inputs while I try (in case someone has already resolved them):

   1. Get all the pushed pages to behave correctly. It seems only the original home page menu pushes the content aside. With all other pages the menu overlaps the LS content, even when you browse back to the home page, it then too behaves “badly”. This is likely something CSS can fix. Not sure yet.

   2. Getting all other navigations/pushes/hashes/etc to collapse the menu (as explained above). The great piece of code you inserted to collapse the menu on itemClick works only for when the menu is clicked. Users generally expect the menu to go away when they stop using it / or interact with pages/tiles/buttons etc. Perhaps that’s something the push menu itself should implement. Clicking/Tapping anywhere that’s not the menu should collapse it.

   Anyway. Once again thanks for this, and hope I can contribute more back.

   Tink.

   • Okay great, problem #2 already solved:
     I added this little gem I found at:
     http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
     to my default.htm script as follows:
     /*menu click/tap away fix*/
     $(document).mouseup(function (e) {
     var container = $(“#menu”);
     if (!container.is(e.target) // if the target of the click isn’t the container…
     && container.has(e.target).length === 0) // … nor a descendant of the container
     {
     $(‘#menu’).multilevelpushmenu(‘collapse’);
     }
     });
     Now whenever the user interacts with anything other than the menu, it collapses.

     • Just forgot to cater for pads and phones of course, here is the final improved solution:
       /*menu click/tap away fix*/ //touchend
       $(‘body’).bind(“touchend mouseup”, function (e) {
       var container = $(“#menu”);
       if (!container.is(e.target) // if the target of the click isn’t the container…
       && container.has(e.target).length === 0) // … nor a descendant of the container
       {
       $(‘#menu’).multilevelpushmenu(‘collapse’);
       }
       });

     • And I solved problem #1 with the same ‘dirty’ fix.
       Hope this doesn’t affect performance. Binding to such a frequently used event is not best practice. But I’m happy with it for now…

       /*menu fixes*/
       $(‘body’).bind(“touchend mouseup”, function (e) {
       //update containersToPush all the time…
       $(‘#menu’).multilevelpushmenu(‘option’, ‘containersToPush’, [$(“div[data-role*=’page’]”)]);
       //collapse the menu when not using it
       var container = $(“#menu”);
       if (!container.is(e.target) // if the target of the click isn’t the container…
       && container.has(e.target).length === 0) // … nor a descendant of the container
       {
       $(‘#menu’).multilevelpushmenu(‘collapse’);
       }
       });

     • Hi Clark, thanks for your comment and work! Glad that you are able to use this and you even found the time to enhance our (and Michael’s) code! Thanks again, Ronald

     • Thank you for this. I have a question. Where you put this code to solve this problem?

8. Hi, all. Thx for your reply, Ronald. @Clark: Many thanks for your great work!

9. Hi Carsten and all the people that has contributed to this article: I was wondering if there are any news about applying and evaluating permissions on the menu items. Anybody?

   • Hi Nicolas, sorry for the late reply. We created an OData Controller that returns the permissions and roles for the current user to the HTMLClient. The client can then decide to display or to hide menu items or commands depending on the permissions.
     Certainly, the permission is still checked on the server nevertheless.

     Regards, Ronald

     • Hi Ronald, thank you. What’s important is that it can be done. So you’re using Web API as Beth Massi described back in 2013, with a Controller and a global persmissions variable? http://blogs.msdn.com/b/bethmassi/archive/2013/04/17/using-lightswitch-serverapplicationcontext-and-webapi-to-get-user-permissions.aspx
       If so, I would like to know how you check the permissions in the JavaScript code that builds the menu items array, since this is loaded before the permissions. Just a few lines of code illustrating that.

       thanks again, you’ve done a great work.

     • I am using Web.Api but with an ODATA Controller (as all my other controllers are ODATA Controllers as well). But the concept is the same.

       Imagine during app start the client retrieves the user’s permissions and roles (and other useful information) and saves them to a global variable `myapp.permissions`, within a client screen the code would then look like this:

       javascript
function setContentItemFromPermission(name, permission) {
if (null === myapp.permissions || undefined === myapp.permissions) {
return false;
}
if (null === name || undefined === name || 0 >= name.length) {
return false;
}
if (null === permission || undefined === permission || 0 >= permission.length) {
return false;
}
var permissionName = permission;
if (-1 == permissionName.indexOf(":"))
{
permissionName = "LightSwitchApplication:" + permission;
}
var fReturn = myapp.permissions[permissionName] ? true : false;
if(fReturn)
{
screen.findContentItem(name).isVisible = fReturn;
return fReturn;
}
if (null === myapp.roles || undefined === myapp.roles) {
return false;
}
var roleName = permission;
var fReturn = myapp.roles[roleName] ? true : false;
if (fReturn) {
screen.findContentItem(name).isVisible = fReturn;
}
return fReturn;
}


       The code for calling this function for a specific screen item would look like this:

       
// ShowBroswProducts --- screen name
// ProductCanRead --- LightSwitch permission name
setContentItemFromPermission("ShowBrowseProducts", "ProductCanRead");


10. Hello,

    Thank you very much for sharing this, it works great and its been really useful to me.

    Just one little thing: if the user press one ítem and then quickly, press another one, then gets the error message: “Cannot perform this action while a navigation is in progress”. Do you know a way to avoid that notification for the final user?

    Regards,
    Jesús I.S.

This site uses Akismet to reduce spam. Learn how your comment data is processed.