Customizing IAG 2007 Portal Pages

Edited by Thomas W Shinder MD, MCSE, MVP

IAG 2007 (Whale Communications version 3.7) uses Internet Information Server 6 on Windows 2003 Server to host the website that renders the user authentication login page and also the portal where the applications can be accessed and launched from.

This website can be fully customized to match the corporate identity of your company as it is using CSS, ASP, INC scripts and supports GIF and JPG pictures.

Customization of the website is clearly explained in the official documentation and neither on the Microsoft website. Many previous and current Whale Communication/IAG 2007 customers have customized the portal though, sometimes with beautiful results, sometimes with awful results.

Customizing the “look and feel” of the website is partially covered in the official training, which is a legacy course from Whale Communications.

Here is the default website “look and feel” from the IAG 2007 portal.

Figure 1: The login page – Called “Internal Site” in IAG 2007

And here is the portal, called “Portal Home Page”, in IAG 2007

Figure 2: The IAG Server portal, once the user is connected

As you can see, you have logo of the product, the name, the link to the Whale Communications website (Redirected to Microsoft.com) and other screen elements.

So a little bit of customization to match your company website look and feel might be nice to implement, isn’t it?

Let’s begin

Before starting you need to understand how the IAG 2007 file and directory structure works.

The figure below shows you the details.

Figure 3: The IAG Server directory structure

What you need to understand before editing any file is that the scripts in the default directories cannot be changed, otherwise it will generate errors, such as Error 500.

The scripts purposes and details will be explained just after, but for example, if you decide to change the site logo and you do not it just right in the default folder, where it is defined, the portal will not work anymore.

What you need to do before changing anything, is to copy the scripts, not from their original location, but from the Samples directory.

From the next figure below, you will notice that a number of scripts are available as samples. They contain almost the same settings as the “live” scripts, and they will allow you to define and set your own pictures, text etc.

Figure 4: The Samples folder content

So now that you know where the scripts are, where they should be copied, let’s explain what they do. Several scripts also contain text that is rendered in the Figure 5 for example.

I do not recommend to change the text values in the .INC file, although this works, I would recommend you to change the XML file instead, because you have only one file to change, rather than a few.

So here we go

• Logo.inc This allows you to change the logo of the site. It supports GIF and JPG.
  
• customDefault.inc This allows you to change the internet link of the top right, but also link to the custom buttons.
  
• waves.inc This allows you to define the size, location of the “waves” pictures below. The waves can be disabled from the customDefault.inc as well if required. See the following section in customDefault.inc, viewwaves = true;
  
• bottomText.inc This allows you to customize the text of the bottom, again, I do not recommend changing the text here. What you can do here for example, is add a <b>…</b> HTML code to render the text in bold. This is what I did to the custom log in page that you will see at the end of this article.

Figure 5: Overview of the scripts and functions

Now let’s proceed with an example. We want to change the logo or our login page.

Here is how it should be done.

1. Copy the script “logo.inc” from “C:\Whale-Com\e-Gap\von\InternalSite\samples” to “C:\Whale-Com\e-Gap\von\InternalSite\inc\CustomUpdate”
   
2. Copy your custom logo to the following location:
   “C:\Whale-Com\e-Gap\von\InternalSite\Images\CustomUpdate”
   
3. Edit the script logo.inc (Text editor or else) to change the logo location
   
4. On line 6 you will see the following code:
   <td width=”122″ height=”46″ valign=”bottom” rowspan=”2″><img src=”/content/isa/InternalSite/images/logo.gif” align=”absmiddle”></td>
   
5. Change the path to include your logo, for example:
   <td width=”122″ height=”46″ valign=”bottom” rowspan=”2″><img src=”/content/isa/InternalSite/images/CustomUpdate/logo-isa.gif” align=”absmiddle”></td>

There you go. Your logo can now be seen by refreshing the login page

By editing this script you will also notice you can change the title of the page, called “whaletitle”. This is basically the text you can on the blue bar on the top, “This site is protected by the Intelligent Application Gateway”.

As I said before, do not change the text here. It is better to change it directly in the XMLfile that we will cover after.

Let’s move on with the customization of the bottom text, the “bottomText.inc” script.

1. Copy the sample script to the same folder, as detailed in the previous steps, 1 and 2.
   
2. Edit the script and check the line 7
   You will see the following:
   <%=GetString(4, “This site is intended only for authorized users.”)%><br>
   
3. Add the “bold” HTML instruction to this piece of string by doing the following:
   <b><%=GetString(4, “This site is intended only for authorized users.”)%><br></b>
   
4. Refresh the page, you will notice the following text in now in bold:
   This site is intended only for authorized users

Again I know you are burning about it, but do not change any text here.

So let me help you to cool down a bit here. Here is what you need to know to change the text that affects this page and the others.

1. Go to the following folder:
   “C:\Whale-Com\e-Gap\von\InternalSite\Languages”
   
2. Copy the file called sample_default.xml to the following location:
   “C:\Whale-Com\e-Gap\von\InternalSite\Languages\CustomUpdate”
   
3. Rename this new file to default.xml
   
4. Open the file using a text editor or else. You will notice that all the text strings are encapsulated into a code with a specific value, like the following:
   <String id=”1″>
   
5. So now you remember our previous example with the text in bold? Good, now you can change this text to something maybe more relevant. Example:
   <String id=”4″>AUTHORIZED USERS ONLY – THIS SITE IS MONITORED</String>
   
6. Save the file and refresh the login page. You will notice you new text is now show, and is still in bold.

Note:
This default.xml file contains English only. If you want to do the same for French for example, copy the fr.xml file to the same location but do not rename it. Then open this new file and change the text values. Those files contain all the dynamic text values and can be changed to match more your corporate values.

Cool. What about the colors?

Good point. Let me explain how you can customize the color of the text, background of the bar, links etc. As you probably know, this is usually coded in a CSS file (Cascading Style Sheet).

So to proceed, do the following.

1. Open the following folder:
   “C:\Whale-Com\e-Gap\von\InternalSite\css”
   
2. Copy the template.css file to the following location:
   “C:\Whale-Com\e-Gap\von\InternalSite\css\CustomUpdate”
   
3. You can now edit the file. Again, once you refresh the logon page, this will affect immediately the login page.
   
   Note:
   Bearing what I said previously, here there is no risk of copying directly this file over to the CustomUpdate folder. It is not available as a sample.

Ok so how does our login page looks like now?

While you were reading this article, we did some changes to our login page in the mean time.

So there you go.

Figure 6: We are making some progress here, some changes applied to our login page

Recommendations

IAG 2007 is probably one of the key elements of your network infrastructure, so really you should not be doing this on your live server.

Virtual Machines are available for download from the Microsoft website. You should play with this first, and then when you are confident, you can apply the changes to your live IAG 2007 appliance. Do not forget to make a full backup first, we never know.

Final result

Here is our final customization. As you can see we have changed all the text and links. We also have changed the buttons. We could have done a lot more, but we wanted to keep it simple for this article.

Figure 7: Our customization

Some examples

Here are some examples of customers who customized their portals.

Figure 8: Customer example 1

Figure 9: Customer example 2

Figure 10: Customer example 3

Really the possibilities of customization are limitless, and this is one of the features of IAG 2007 that is so nice.

Conclusion

So now that we explained the basics of the customization of an IAG Server portal, you can do the same for the portal itself. This is exactly the same logic. The main thing to keep in mind is that you should never edit the files that are in the folders. Always copy the scripts from the “Samples” folder to the relevant “CustomUpdate” ones.

Resources

• General IAG Server information
  
• Virtual Machine download