locked
LightSwitch HTML Client - Home Screen tile navigation RRS feed

  • Question

  • Greetings All - 

    Simple question, i hope :)

    I'm building a LOB application in the HTML client and I'd like to implement a type of "tile navigation" on the home screen.

    This awesome looking app's home screen is exactly the direction I'm looking to go...
    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/3255/LightSwitch-html5-SPA-Document-Manager-App.aspx

    ...but I'm not quite sure how to pull this off...I seem to only be able to use the tile control when its used w/ a collection....
    but say i want tiles that say "Projects" and "OtherStuff" - and when you click on projects, it navs to a browse screen for all the Projects...is this some custom stuff, or am i just missing something super simple?

    any nudges would be greatly appreciated.

    Friday, June 20, 2014 7:43 PM

Answers

  • It's basically a matter of creating some ordinary buttons to which you attach any behavior (like navigating to another screen) and then massage that button to a tile with following code:

    myapp.Home.MyTile_postRender = function (element, contentItem) {
        // Write code here.
        $(element).find('a').css({
            'background-image': 'url(Content/Images/myImage.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '200px',
            'height': '200px'
        });
    };

    The image is best stored in the /Content/Images folder

    Good luck !


    paul van bladel


    • Edited by Paul Van Bladel Saturday, June 21, 2014 7:54 AM
    • Proposed as answer by Delordson Saturday, June 21, 2014 4:12 PM
    • Marked as answer by ihayes916 Monday, June 23, 2014 3:19 PM
    Saturday, June 21, 2014 7:53 AM

All replies

  • It's basically a matter of creating some ordinary buttons to which you attach any behavior (like navigating to another screen) and then massage that button to a tile with following code:

    myapp.Home.MyTile_postRender = function (element, contentItem) {
        // Write code here.
        $(element).find('a').css({
            'background-image': 'url(Content/Images/myImage.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '200px',
            'height': '200px'
        });
    };

    The image is best stored in the /Content/Images folder

    Good luck !


    paul van bladel


    • Edited by Paul Van Bladel Saturday, June 21, 2014 7:54 AM
    • Proposed as answer by Delordson Saturday, June 21, 2014 4:12 PM
    • Marked as answer by ihayes916 Monday, June 23, 2014 3:19 PM
    Saturday, June 21, 2014 7:53 AM
  • perfect!  this was just the nudge i needed (and works perfectly)...thank you!



    Monday, June 23, 2014 3:19 PM
  • My pleasure.

    In fact, you can find many other good examples on delordson's website: 

    http://www.lightswitchextras.com/apps/

    Happy coding !


    paul van bladel

    Monday, June 23, 2014 3:29 PM