(Update: read part 2 as well if you intend to use this code)
In our quest for happiness, my wife and I decided to live in the Caribbean for a couple of years. Sipping cocktails on white beaches, watching Mojo (my goofy boxer dog) play in the clear blue water, while prototyping a LS app on my laptop. I can tell you, life doesn’t get more stress free than this.
Unless… you need to add a hyperlink to that LS app…
In the top right corner of my app, I wanted to replace the Logout button with information about the currently logged in ‘user’. For this app, I have a table with ‘Realtors’, one record per ‘user’ (login+pw combo). On my screen, I added a local ‘Realtor’ property named ‘Myself’. I dragged that property on my screen’s visual tree, selected ‘Custom Control’, and clicked the ‘Edit Render Code’ from Properties Window.
A JS file is generated containing a function stub to work my magic. So far so good. I bashed together some code to hide the Logout button and insert my link instead.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//$(".msls-navmenu-button").hide(); | |
$(".msls-screen-buttons").empty(); | |
var hijackUI = function (contentItem) { | |
var user = contentItem.value; | |
//Create a link | |
var userViewer = $('<a id="userviewer" href="#" target="_self" >' + user.Name + '</a>'); | |
userViewer.appendTo($(".msls-screen-buttons")); | |
//Bind the click event | |
userViewer.on('click', function () { | |
myapp.showEditMyProfile(user); | |
}); | |
//Update the link text if user changes display name | |
contentItem.dataBind("value.Name", function () { | |
$("#userviewer").text(contentItem.value.Name); | |
}); | |
}; | |
//If screen property is loaded -> add link, otherwiswe: wait for load | |
if (contentItem.value) | |
hijackUI(contentItem); | |
else | |
contentItem.dataBind("value", function () { | |
if (contentItem.value) | |
hijackUI(contentItem) | |
}); |
F5 this!
Success! Now let’s just give that link a quick click to verify it opens the EditMyProfile page…
Wait, whot?
Adding a hyperlink in an HTML5 app might sound like the most trivial assignment ever, but no matter what I tried, the link was not responding to click events.
Hours later (actually 1 and a half Mojitos, so probably not even close to ‘hours’), I found that my custom control wasn’t working because LS was purposely rendering a div named ‘msls-state-overlay’. Apparently, when you create a custom control, LS by default will take care of the ‘Disabled Rendering’ for you.
And apparently, my link was determined to be rendered as disabled.
And apparently, like all great things in LS, if you don’t like the default behavior, change is but a setting away…
One F5 and two sips of Margarita later…
Works like a charm… At first sight… There’s a subtle issue with the code, perhaps I had too much Margaritas :-s
Keep rocking LS!
Jan
Good to know. I’m not sure how many G&Ts it would have taken me to figure that out 😉
Well in the case of G&T it’s worth taking your time to find out 🙂
Pingback: Why your hyperlink won’t work in the LS HTML client, part 2 | Jan Van der Haegen's blog
Pingback: LightSwitch Community and Content Rollup – May 2014 - Visual Studio LightSwitch Team Blog - Site Home - MSDN Blogs