Page tree
Skip to end of metadata
Go to start of metadata

It is possible to include JavaScript in the User Interface pages created by Ubisecure SSO. See also Ubisecure SSO Management guide.

Step-by-step guide  

  1. Include the following line in the template configuration file custom/templates/

    javascript = /resource/script/ui-extension.js

    multiple files can be specified using a comma as a separator:

    javascript = /resource/script/ui-extension.js, /resource/script/brandA.js

    For this example you need jQuery.js, which you should download at

    javascript = /resource/script/jquery.js, /resource/script/ui-extension.js
  2. Create ui-extension.js in custom/resources/script directory containing

    // ui-extension.js v1.0.0
    $(document).ready(function() {
     	// $("#helptext").hide(); -> Hide the helptext DIV
    	// alert(view.getMethod()); -> Shows the method name
    	// alert(view.getTemplateName()); -> "Default" etc.
    	// alert(view.getConversationName()); -> this is "authn" for authentication pages, "error" in error pages, and "logout" when logging out. Use this value to target changes to certain page types
    	// alert(view.getViewServerPage()); -> Prints the server jsp page, use this value to target changes to certain pages
    	// alert(view.obj.locale); -> Show currently chosen locale
    	// e.g. Move the 'Cancel' -button (#exit div) to end of the #login div dialog box and make it visible. 	
    	// Hides the introtext DIV completely.
    	if ( $( "#loginerror" ).length ) {
    		$("#exit").css({'display': 'inline'});
  3. Add references to any scripts used in custom/resource.index

    jquery.js = resources/script/jquery.js
    ui-extension.js = resources/script/ui-extension.js
    jslibrary-X.X.X.js = resources/script/jslibrary-X.X.X.js
    brandA.js = resources/script/brandA.js
  4. In Ubisecure SSO Management, add the template name to Agent being used.

Example 2

The following code will

  • detect that the user is will displayed a user not found error,
  • replace the page HTML with a page with a spinning wait logo in the middle of the page and then
  • redirect the user to the URL configured as registration.url in the template links file
  • the registration link will have an appended return URL to send the user back to the login process for the same target application

if (view.getStatus() == 'INVALID' && view.getSubStatus() == 'NOTFOUND') {
    document.write('<html style="height:100%;width:100%;background:url(/uas/resource/loading.gif) center center no-repeat;"/>');

Example 3

Invoking specific behaviour on error pages.

if (view.getConversationName() == 'error') {
	// do something only on error pages

Example 4

Invoking specific behaviour on the logout page.


if (view.getConversationName() == 'logout') {
	// do something only on the logout pages

Example 5

Invoking specific behaviour on the authentication pages.

if (view.getConversationName() == 'authn') {
	// do something only on the authentication pages

Example 6

For a specific agent, with the EntityID 7b8d3ae7-8ab9-41bd-9819-b7a99bd77c47, when the user is logging in, automatically select the logo for the method "tupas.test.1" when the template name is "default". If User Driven Federation is occurring, and the template name is "federation", hide other external methods from the user.

$(document).ready(function() {
	if(view.obj.conversation.agentRef == '7b8d3ae7-8ab9-41bd-9819-b7a99bd77c47') {                                                        
		if(view.getTemplateName() == 'default') {
	if(view.getTemplateName() == 'federation') {

jquery is currently included in most pages by default as it is used by the default pages.

Beware browser caching of JavaScript and CSS files. When testing, clear your cache aggressively.

It is recommend to include version numbers in any JavaScript files to help determine which version is used by the browser.