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