Why your hyperlink won’t work the LS HTML client

(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.

	//$(".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)
	});

view raw
createUserLink.js
hosted with ❤ by GitHub

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