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
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
Pingback: Windows 10 Continuum Mode - The Daily Six Pack
Just spotted this. Very, very nice.
Thanks partner!!!
Keep rocking LS!
Coool!! Thanks Jan!
Hey Cesar, glad you like it! Been using it in every new LS HTML project myself 😉
Keep rocking LS!!
Jan
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?
sorry: I meant a p element and not a div…(disappeared cause I typed as tag)
Hey colmar!
Could be, it’s been a while since I used this myself so it could not have been tested on IE11 yet. Either way, thanks for caring&sharing!