LightSwitch UX: Sharepoint-like tiles

Great, I’m pretending I know anything about UX nowadays… 

The LightSwitch HTML client, by default,  comes with a nice blue-on-white background style. This style matches the O365 one perfectly, providing the users with a smooth and consistent experience when you’re building Cloud Business Apps.

One of the nice controls in O365 are those tiles-with-an-overlay:

For those of you that haven’t seen these, basically they are a clickable tile (‘a button’), with a title that expands to show the description when you mouse-over them (like the third tile).

Must… Have…

Step one: create a ‘home’ screen. Add a couple of buttons to the screen (NOT: to the command bar of the screen) and give them a nice display name and a description.

Make sure their ‘height’ is set to ‘Fit to Content’, the JQuery plugin takes care of sizing already.

Next up: grab the CSS from this gist, and add it to the user-customisation.css file found in your HTML client project.  Also, grab the JQuery plugin and add it to your project (add a new JS file, then link it from default.html).

Finally, Edit the PostRender on each button and activate the plugin:

myapp.menuHome.buttonResources_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ResourcesLarge.png'); 
};

myapp.menuHome.buttonDesigns_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/DesignsLarge.png');
};

myapp.menuHome.buttonProjects_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ProjectsLarge.png'); 
};

Or if you want to customize the size (default 225 px):

  $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ResourcesLarge.png', {height:150, width:150});

F5 that shizzle!

(Need to replace the blue on white icons with white on blue ones, I know ;-))

Keep rocking LS!!
Jan

Advertisements