Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Remove jQuery from example, put a note with a risk of overriding jQuery version

...

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

    Code Block
    titlecustom/templates/templatename.properties
    javascript = /resource/script/ui-extension.js


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

    Code Block
    titlecustom/templates/templatename.properties
    javascript = /resource/script/ui-extension.js, /resource/script/brandA.js

    For this example you need jQuery.js, which you should download at https://jquery.com/

    Code Block
    titlecustom/templates/templatename.properties
    javascript = /resource/script/jquery.js, /resource/script/ui-extension.js



  2. Create ui-extension.js in custom/resources/script directory containing

    Code Block
    languagejs
    titlecustom/resources/script/ui-extension.js
    // 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 ) {
    		$("#login").append($("#exit"));
    		$("#exit").css({'display': 'inline'});
    		$("#introtext").hide();
    	}
    
     })


  3. Add references to any scripts used in custom/resource.index

    Code Block
    titlecustom/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.

...

Code Block
$(document).ready(function() {
	if(view.obj.conversation.agentRef == '7b8d3ae7-8ab9-41bd-9819-b7a99bd77c47') {                                                        
		if(view.getTemplateName() == 'default') {
			$('#login').hide();
			$('span.tupas\\.test\\.1').find('img').click()                                                 
		}                                                  
	if(view.getTemplateName() == 'federation') {
		$('#external').hide();
		}                           
	}
})



Info

jquery jQuery is currently included in most pages by default as it is used by the default pages. It's version is managed in the build process and it is not advised to overload it as it may result in incompatibility.

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.

...