Widgets in Temenos Quantum Visualizer for iOS and Android

Temenos / Kony Quamtum Visualizer

Over the last few weeks, I have been building an application using Temenos (formerly Kony) Quantum Visualizer version 9. This app will eventually be pushed to both Apple and Android phones and tablets, which is the main reason someone would use Visualizer instead of developing natively with XCode and Android Studio.

In theory, the JavaScript code written in the Visualizer IDE will result in the same UI on both the iOS and Android platforms, but that isn’t always the case.

For the first time, I got an actual JavaScript error on the Android app, whereas the iOS app worked perfectly. Apparently, Android isn’t as forgiving when accidentally leaving out the “new” keyword when instantiating a widget – in my case, a RadioButtonGroup. (The error I got on the Android side was “invalid operation : trying to create object without ‘new’ keyword”.)

The RadioButtonGroup widgets, when set in Toggle mode, are rendered differently on iOS and Android. That wasn’t really a problem in and of itself. The problem was that the iOS widgets looked good and took up the entire width of the parent container (a FlexScrollContainer), and the Android screen had the radio buttons bunched up on the left side of the screen.

RadioGroupButton differences on iOS vs. Android

For whatever reason, the Android app required that the hExpand property be set to true, and it didn’t matter on the iOS version.

The moral of the story: If your UI looks different in unexpected ways on one platform, it probably will require explicitly detailed widget property attributes to make them look more similar.

Return URL with JavaScript that Prevents Loading of Cached Pages

HTML and JS logos

If you want to force a page to reload from the server rather than getting a cached copy, one way to do it is to append a query string to the URL.

If you want your web application to generate URLs that have this functionality, the code below can be implemented using JavaScript. Inside a file called BrowserUtility.js, insert this code.

function BrowserUtility()
{
	this.addNoCacheTimestamp =
		function(sUrl)
		{
			var ts = 'noCacheTS=' + (new Date()).getTime();
			sUrl = sUrl.trim();
			var nQIndex = sUrl.indexOf('?');
			sUrl+=(nQIndex==-1)?'?':(nQIndex===sUrl.length-1)?'':'&';
			return sUrl+=ts;
		};
};

var browserUtility = new BrowserUtility();

Once this is loaded, the function can be called like this, where the variable sUrl stores a URL:

sUrl = browserUtility.addNoCacheTimestamp(sUrl);

If the variable sUrl initially contained “http://example.com”, the returned string would be something like “http://example.com?noCacheTS=201808081203”.

Another option, if you did not want to use the current time as the query string value, would be to use a random number function instead.

(This is a snippet of code that I didn’t write – it was authored by my friend and colleague Jeff Konicky.)

Stripping HTML Tags from Textboxes Using JavaScript

HTML tags

One of the applications I support routinely has a problem where users cut and paste text that contains HTML tags from other sources into the text boxes on entry forms in my application. Most of the time, this does not cause a problem. However, if the users do not capture all of the text, they may unwittingly not grab the closing tags. When that happens, all sorts of fun things can happen to the main page on the app, which shows recent entries.

I decided I’d like to remove all HTML, except I’d like to retain line breaks. Based partially on a solution I found on Stack Overflow, I made this function.

this.fixHtml =
	function(strHtml)
	{
		var div = document.createElement('div');
		strHtml = strHtml.replace(/<br>/gi,'\n');
		strHtml = strHtml.replace(/<br \/>/gi,'\n');
		div.innerHTML = strHtml;
		strHtml = div.innerText || div.textContext;
		strHtml = strHtml.replace(/\n/gi,'<br />');
		div.innerHTML = strHtml;
		return div.innerHTML;
	};

I call the fixHtml function whenever an input tag is of type text, or if a div element is of the class “mimicTextArea” (it looks like a text box):

if(oForm!=null)
{
	var oInputs = oForm.getElementsByTagName("input");
	for(var x=0;x<oInputs.length;x++)
	{
		if(oInputs[x].type=="text" && oInputs[x].value.length > 0)
		{
			oInputs[x].value = self.fixHtml(oInputs[x].value);
		}
	}

	var oDivs = oForm.getElementsByTagName("div");
	for(var x=0;x<oDivs.length;x++)
	{
		if(oDivs[x].className == "mimicTextArea" && oDivs[x].innerHTML.length > 0)
		{
			oDivs[x].innerHTML = self.fixHtml(oDivs[x].innerHTML);
		}
	}

}

This seems to serve my purpose well. Should I wish to retain other specific HTML tags, a similar technique may be used as above if they are self-closing tags such as the line break tag. Tags that require an opening and a closing tag would require further development.