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:

Image 215

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.

Image 216

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!

Image 213

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

Keep rocking LS!!
Jan

Advertisements

10 thoughts on “LightSwitch UX: Sharepoint-like tiles

  1. Nice Job Jan. Just the other day I was on a portal which has a nice interface using tiles with overlays for filtering grid items by category. I said to myself “Self, let’s try rendering those in LS HTML.” Well I never got around to it, but next time I’ll say, Jan will do it (and do it better) a few days from now. 🙂

    I’m sure you’ve seen this, but for those who haven’t, syncfusion has a sweet product with 2500+ metro style icons for free:
    http://www.syncfusion.com/downloads/metrostudio

    • Hah Josh 🙂 “Better”, I doubt it 😛

      Metro studio is great. Ever since I discovered it, my apps have been looking so much better. Next UX post will be about input field, powered by Metro Studio again 😉

      Keep rocking LS!

      Jan

  2. Pingback: Windows 10 Continuum Mode - The Daily Six Pack

  3. Very nice look! I’m late on this but thanks a lot Jan!

    I’m not expert in html/css at all, but found I had to turn spDescription into a element to avoid a wrong behavior in IE11, does it make sense?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s