Sample implementation example of onCreateLoginElement callback in the latest Web player JavaScript API – Revvity Signals

Date Posted: 2018-09-25
Product: TIBCO Spotfire®

Problem:

Sample implementation example of onCreateLoginElement callback in the latest Web player JavaScript API

Solution:

onCreateLoginElement is an Optional callback function reference to create a custom login element wrapper.
The same is documented below:
https://docs.tibco.com/pub/sfire_dev/area/doc/api/TIB_sfire_Web_Player_JavaScript_API_Reference/html/T_spotfire_webPlayer_createApplication.htm
This article provide a sample implementation for the same. When developing a Web Player mashup, you can implement the onCreateLoginElement callback if you want to override the standard UI for launching the login window, instead of the dark popover that dims the entire page. The method should in this case returns a clickable HTML element. If a custom element is returned it must also be removed when authentication succeeded.

Below is the complete example implementation:

<!DOCTYPE html>
<html>
<head>
	<title>Simple mashup with forms authentication capabilities</title>
	<script src="https://spotfire-next.cloud.tibco.com//spotfire/js-api/loader.js"></script>
</head>
<body>
	<div id="page1" style="width:500px;height:500px;"></div>
<script type="text/javascript">
	var tssUrl = "https://spotfire-next.cloud.tibco.com/"
	var app, doc, loginLauncher;

	var analysis = "Users/jae2bvy6uiyyszk7sg3ciz243yibaj6g/SuperstoreSales";
	var customization = { showToolBar: false, showStatusBar: false, showPageNavigation: false };
	var openParameters = "";
	var reuseExistingInstance = false;
	var apiVersion = "7.14";
	
	// This is basically an asynchronous version of the spotfire.webPlayer.Application constructor
	spotfire.webPlayer.createApplication(
		tssUrl,
		customization, // changed from instance of spotfire.webPlayer.Customization to anonymous object
		analysis,
		openParameters, 
		reuseExistingInstance,
		apiVersion, // New. String specifying the api version. Should perhaps be optional with latest as default.
		onReady, //New. Callback with signature: function(response, app)
		getLoginElement // New. Optional function reference to create a custom login element wrapper.
		);
	
	function onReady(response, newApp)
	{
		if (loginLauncher)
		{
			// Remove the custom login launch UI.
			loginLauncher.parentNode.removeChild(loginLauncher);
		}
		
		app = newApp;
		if(response.status === "OK")
		{
			// The application is ready, meaning that the api is loaded and that the analysis path is validated for the current session (anonymous or logged in user)
			doc1 = app.openDocument("page1", 0);
		}
		else
		{
			alert(response.status+ ": " + response.message);
		}
	}
	
	function onError(error)
	{
		alert("Error:" + error);
	}

	function getLoginElement()
	{
		loginLauncher = document.createElement("div");
		loginLauncher.style = "background-color:#eee;border:solid 1px #aaa;padding:20px;width:500px";
		
		var infoSection = document.createElement("div");
		infoSection.innerText = "You need to authenticate before loading the requested analysis.";
		loginLauncher.appendChild(infoSection);
		
		var button = document.createElement("button");
		button.innerText = "Log in";
		loginLauncher.appendChild(button);

		document.body.appendChild(loginLauncher);
		return button;
	}
</script>

</html>

https://docs.tibco.com/pub/sfire_dev/area/doc/api/TIB_sfire_Web_Player_JavaScript_API_Reference/html/T_spotfire_webPlayer_createApplication.htm

Related articles