Customizing the UAG portal with JavaScript

Normally, editing the links that UAG shows on the portal is done in the application properties, but sometimes, you might need to do run-time editing to change the URLs dynamically. For example, you might want to add a URL string or parameter that is affected by the date, the user-name or the language.

The code that populates the portal when it loads is compiled .NET code, so our ability to customize is it very limited. However, the content is a mix of .NET, classic ASP and HTML. These pages support the UAG customization framework, and as such, you can inject your own code to alter content. One way to alter the content without messing around with the compiled parts of the code is to use JavaScript. JavaScript runs on the client, and allows us to change the appearance of things rather easily with little risk.

To customize the portal pages, start by creating a custom copy of the file you want. For example, the main frame of the portal (the large one, where the app icons are shown) is created by the file <UAG Path>/von/PortalHomePage/ContentFrame.aspx. Copy the file into the /CustomUpdate folder.

Now, edit the file you created, and add a JavaScript to it. If you want to have the script deal with the links, it has to be located at the BOTTOM of the page, after all the links have been processed by the browser. An ideal location would be before the closing </BODY> tag. If you’re customizing ContentFrame, for example, that would be line no. 34:

A suitable script would enumerate the link collection on the page, based on their tag, which is “a”, and then adjust the HREF property of them. Here’s some sample code that does that:

Similar text processing methodology could allow you to do Search-and-replace on the content using methods like .replace. When doing so, do keep in mind that JavaScript is case-sensitive by default when dealing with strings. Here’s a sample that adds today’s date to a link using the Replace command:

Similarly, you can use document.getElementsByName('form1').value or document.getElementsById('form1').value to target a specific item on the page by its name or ID. JavaScript can interact with almost any element on the page, and thus the possibilities are endless. You can add animations, special effects, dynamic content changes, graphic elements and many other things. The only thing to keep in mind here is that you should not use this technology for security purposes, because anything you change client-side can be also hacked by the user. For example, using this to hide an application based on the user name is false-security, because the user will be able to launch the application if he guesses (or knows) the actual URL of it, or if the JavaScript fails for some reason.