19 November 2013

Citrix Web Interface 5.4 NewsTicker

In our organization, we have an increasing number of Thin Clients replacing some ageing PC's.  These Thin Clients only have access to Citrix for their applications and resources.  Normally, in the event of major issues or outages, we could communicate via email to all affected users to advise them of such issues.  (Except...if email was offline...that's another problem for another day!).  However, in the case of a Thin Client, what if the user(s) were unable to access their apps or resources due to an issue within XenApp?

My solution?  A NewsTicker for the Web Interface portal.  This way, I can provide information to users about anything I want without the user launching a desktop or published app.



Solution

For this, I used jQuery News Ticker, a handful of .png files, a text editor or WYSIWYG editor and some time.  Here, you will find the necessary source files to download as a .zip, which contains pretty much everything you need.  From there, its just a matter of adjusting the relevant files to your liking and placing them in the correct folders on your Web Interface.


Implementation

***Prior to any modifications on the Web Interface, ensure you have a backup of all files and folders for the site you are modifying.  If anything goes wrong, one can usually restore the Web Interface by returning the file/folders to their original state.***

First off, download and extract the required files.  The extracted files and folders will already be structured.  All you need to do it copy/replace the contents of the files starting at C:\inetpub\wwwroot\gateway\{yoursite}.  A breakdown of the files are:


  • app_data\include\tabPaneHead.inc - Include file to present the ticker and provide content on the WI portal.  Ideally, replace this file last, once you are sure all other files are in place.
  • media\*.png - Image files for the ticker.
  • site\clientscripts\*.js - jQuery 1.8.3 and the jQuery News Ticker.
  • site\clientscripts\*.css - CSS Style sheets for the news ticker itself.
  • ticker.aspx - Page for further information for users.
It is suggested to place ticker.aspx on a publicly accessible web host.  This allows for both Web Interface authenticated users and Access Gateway authenticated users to access the content.  Basically, whatever works best for you.

How to update and add content

To update the content, only tabPageHead.inc and ticker.aspx need to be updated.  I have both of these files locally on my PC and simply use a batch file to copy those files to the Web Interface servers when ready.

tabPaneHead.inc

This is pretty simple to modify.  The content that appears in the news ticker sits in the "news-container" div. 



  • src="../media/INFORMATION.png" - Replace this with any of the other informational label .png files according to the type of alert.
  • onclick="window.open('http://url.com/ticker.aspx#bookmark) - Specify the url of the ticker.aspx page.  After the hash, specify the bookmark that you will create below in the ticker.aspx page.
  • No current alerts - Of course, replace this with any text of your choosing pertaining to the alert.
Save the file.

ticker.aspx

This page has 4 cells:  td.InformationCell, td.Content, td.Date, td.ContentBody.  Generally, the only style that you would need to change is that of the td.InformationCell using any of the following styles to represent the type of alert:

  • .InformationCell
  • .WhatsNewCell
  • .OutagesCell
  • .CurrentIssuesCell
Replace the text in the td.InformationCell to the text you require.  The text in the td.Content should ideally be the same text you enter in the tabPaneHead.inc file.  Create a bookmark here and specify the bookmark after the ticker.aspx# as above in tabPaneHead.inc.  Save the file.

That's it!

To deploy the ticker, make the ticker.aspx page available on a web server and over-write the tabPaneHead.inc file on the Citrix Web Interface(s).  If all goes well, after refreshing your portal session, you should see a neat little news ticker rotating through you're newly created alerts.

Since there are only a handful of files required to make the news ticker work, troubleshooting should be fairly simple.  In most cases, tweaking the CSS to correctly display the ticker is needed.

Yes, I know some of the code within the CSS and .aspx pages isn't awesome.  But I don't design web pages for a living...some may call it a hack-job.  But hey, in the end, it gives me the results I need!

Hit me up if you have any questions.

1 comment:

  1. Hey,
    Great information I got here. I've been reading about this topic. I found it here in your blog. I had a great time reading this.

    Regards
    Citrix Web Interface

    ReplyDelete