Jump to content


Photo

Netscaler 11 Theme Customization - How to Add Links and Verbiage

Started by Mike Roselli , 16 October 2015 - 03:34 PM
76 replies to this topic

Best Answer Eric Claver , 22 October 2015 - 07:28 PM

Mike,

 

Just wanted to thank you for posting this, this works great!  You have no idea how many hours I have spent trying to customize NetScaler 11 to be similar to what I had in 10 and this makes it so much easier.  

 

I'm not sure what the heck Citrix was thinking with these new portal themes.  

Mike Roselli Members

Mike Roselli
  • 113 posts

Posted 16 October 2015 - 03:34 PM

Ok. I searched for a way to to add links relatively easily using rewrite policies or modified files and drew a blank the the new NS 11 portal themes. Realizing that Citrix is now supporting some customization, as long as they were done through the GUI.. I figured the first step was, of course, to contact Citrix and ask for the following features to be added in a future release:
 
Ability to customized gateway UI theme -Header and Footer text areas
Ability to customized Gateway UI theme - Customize the EULA check box verbiage
Ability to customized UI theme - favicon graphic
 
The next step was to figure out a way to do this myself prefering rewrite policies over modifying files directly. This is what i have come up with so far.
 
In NS 11 the logon form, and pretty much the entire index.html body, is generated by 2 javascript files - gateway_login_view.js and gateway_login_form_view.js.
gateway_login_view.js seems to create the body and tables for the actual form while gateway_login_form_view.js creates the form itself, username and password fields, domain dropdown box, etc...
Both files create HTML code through the use of variables and with practice; I am sure we could completely rewrite the page to look like anything, I just want to add some text to contact support and a few links to FAQs and the like. So i created a couple of rewrite actions/policies that will add some new HTML code and append it to the existing Citrix page elements either directly below the login button or in the footer area (top of the logon-bottom shadow). In experimenting i noticed that you can modify either javescript file and get the desired effect but visiable placement is a little different. For prosperity I am including both ways in this post but i prefer changing the gateway_login_view.js as it seems cleaner.
 
 
 
Add information/links directly below Log On button--
 
Rewrite gateway_login_form_view.js-
Action:
add rewrite action rw_act_insert_belowloginbtn insert_after_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"var login_belowbtn=$(\"<div>Insert Code Here</div>\").appendTo(right_loginbutton);"} -pattern ".appendTo(right_loginbutton);"
 
 
Policy:
add rewrite policy rw_pol_insert_belowloginbtn "HTTP.REQ.URL.CONTAINS(\"gateway_login_form_view.js\")" rw_act_insert_belowloginbtn
 
 
OR
 
 
Rewrite gateway_login_view.js-
Action:
add rewrite action rw_act_insert_belowloginbtn insert_after_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"var login_below_btn=$(\"<div style='text-align:center'>Insert Code Here</div>\").appendTo(logonbox_logonform);"} -pattern "logonbox_logonform.append(box_view);"
 
Policy:
add rewrite policy rw_pol_insert_belowloginbtn "HTTP.REQ.URL.CONTAINS(\"gateway_login_view.js\")" rw_act_insert_belowloginbtn
 
 
 
Add information/links in Footer Area (below formbox / top of logonbelt-bottomshadow area)--
 
Action:
add rewrite action rw_act_insert_loginfooter insert_after_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"var login_footer=$(\"<div style='color:yellow;font-size:15px;'>Insert Code Here</div>\").appendTo(logonbelt_bottomshadow);"} -pattern ".attr('id','logonbelt-bottomshadow');"
 
 
Policy:
add rewrite policy rw_pol_insert_loginfooter "HTTP.REQ.URL.CONTAINS(\"gateway_login_form_view.js\")" rw_act_insert_loginfooter 
 
 
OR
 
 
Rewrite gateway_login_view.js-
Action:
add rewrite action rw_act_insert_loginfooter insert_before_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"var login_footer=$(\"<div style='text-align:center;color:yellow;font-size:15px;'>Insert Code Here</div>\").appendTo(logonbox_container);"} -pattern "box_view.prepare_view();"
 
Policy:
add rewrite policy rw_pol_insert_loginfooter "HTTP.REQ.URL.CONTAINS(\"gateway_login_view.js\")" rw_act_insert_loginfooter 
 
 
 
 
From there you can bind the policies either globally or to a VIP(s)--
Bindings Examples-
VIP:
bind vpn vserver enter_vip_name -policy rw_pol_name -priority 100 -gotoPriorityExpression END -type RESPONSE
 
Globally:
bind rewrite global rw_pol_name 100 END -type RES_OVERRIDE
 
 
 
 
 
I am sure there are better ways to accomplish this and if you know of one, please post it as i am by no means an expert in creating rewrite actions :)
 
Hope this helps someone else.
 
 
FYI
The above features were submitted, reviewed, and accepted and my understanding is that they are assigned to developers. I do not know when the features will be added. I am assuming it is based on the perception of customer demand and existing workload... So if you would like to see the features added as well; please contact Citrix, or through your TRM, and submit a feature request. The more customers that do it the more attention it will get :)


Eric Claver Members

Eric Claver
  • 26 posts

Posted 22 October 2015 - 07:28 PM

Mike,

 

Just wanted to thank you for posting this, this works great!  You have no idea how many hours I have spent trying to customize NetScaler 11 to be similar to what I had in 10 and this makes it so much easier.  

 

I'm not sure what the heck Citrix was thinking with these new portal themes.  


Best Answer

Mike Roselli Members

Mike Roselli
  • 113 posts

Posted 22 October 2015 - 10:28 PM

Eric,

 

I'm glad it was helpful.

 

Honestly NS 11 makes customization so much easier; they just left out a couple of features that completes the picture in the initial release. Best guess to what they were thinking is time constraint to release the 11 code. The features i requested will more than likely be in the 11.1 public release but don't hold me to that.  

 

I like the direction they are heading with this...not that long ago any customization were considered unsupported and even though Citrix supplied articles, they always prefaced them as unsupported. I'm glad to see that they have accepted user feedback and incorporated portal customization in the code. They also quickly accepted the additional feature requests and assigned them to developers, which to me means they are listening, and wanting, feedback.



Robert Pate Members

Robert Pate
  • 23 posts

Posted 23 October 2015 - 03:59 PM

Hi Mike, I am attempting to get this applied to my NS 11, build 63.16nc, though seems to still not apply. I added the following action and policy and then bound it to my AG VIP:

 

Rewrite gateway_login_view.js-
Action:
add rewrite action rw_act_insert_belowloginbtn insert_after_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"var login_below_btn=$(\"<div style='text-align:center'>Insert Code Here</div>\").appendTo(logonbox_logonform);"} -pattern "logonbox_logonform.append(box_view);"
 
Policy:
add rewrite policy rw_pol_insert_belowloginbtn "HTTP.REQ.URL.CONTAINS(\"gateway_login_view.js\")" rw_act_insert_belowloginbtn

 

I see hits on the policy, but does not seem to make a different when hitting the page. I have a custom theme already applied to my page, based on the X1 theme. Is there something else I may be missing? Maybe you can show the above action with some example code?

 

Thanks in advance!



Mike Roselli Members

Mike Roselli
  • 113 posts

Posted 23 October 2015 - 04:16 PM

Robert,

 

I tested, and implemented, this on the green bubble theme. Apologize that I did not include this very important information in the post. got busy and didn't proof.

 

I'll go through each theme and update as I get time. Expect an update sometime next week, unless someone else out there beats me to it.



Robert Pate Members

Robert Pate
  • 23 posts

Posted 26 October 2015 - 01:42 PM

Robert,

 

I tested, and implemented, this on the green bubble theme. Apologize that I did not include this very important information in the post. got busy and didn't proof.

 

I'll go through each theme and update as I get time. Expect an update sometime next week, unless someone else out there beats me to it.

 

Great, thanks Mike!



Eric Claver Members

Eric Claver
  • 26 posts

Posted 27 October 2015 - 06:31 PM

This worked just fine for me on X1 theme.  Only limitation I have with this is character length on expression for the rewrite action.  I believe there is a way around this, but I have yet to figure it out.  



Don Russell Members

Don Russell
  • 2 posts

Posted 28 October 2015 - 06:57 PM

I have minimal experience working with customization.  It would be much appreciated if someone can give me some more detail on how to implement this.  Are these rewrite commands executed from the Netscaler shell via Putty?   Also, I just want to add some text in the footer area.   Do I need to create an html file with the text and insert that in the "Insert code here" area?   I appreciate it.



Mike Roselli Members

Mike Roselli
  • 113 posts

Posted 28 October 2015 - 07:46 PM

Don,

 

The rewrite actions and policies I posted are command line commands, so yes you would execute them from the netscaler shell via putty. Same goes for the binding commands, but don't bind globally and per VIP. Can do all of this thru the GUI as well; posting the commands in a forum is easier than posting screenshots.

 

My case was simple, like you i just wanted to add a little bit of text to the footer area plus a link below the login button. You would insert HTML code along with text in the "Insert code here" area. I set the <div> to be centered along with bright yellow text to see it better in my command so I could see the placement better.

 

One thing to note is that there is a 255 character limitation in netscaler commands so multiple actions are required to insert more information. there is an article somewhere about it on the support pages.



Mike Roselli Members
  • #10

Mike Roselli
  • 113 posts

Posted 28 October 2015 - 07:54 PM

Robert,

 

I have to agree with Eric, the rewrites are working in my dev on both NS 11.0.62 and 63 with the X1 theme. I just noticed that your rewrite action has this:

 

<div style='text-align:center'>Insert Code Here</div>

 

can you change that to:

 

<div style='text-align:center;color:yellow;'>Insert Code Here</div>

 

all the HTML style is handled through named css variables and i did not take the time to learn them all :) By default the text is almost black on the page without it and very hard to see. The bright yellow will help.



Robert Pate Members
  • #11

Robert Pate
  • 23 posts

Posted 28 October 2015 - 08:25 PM

Mike, I attempted with the color change, but does still not seem to appear. I added a .zip with images for the rewrite action and policy I bound to my VIP from the GUI. Hopefully that helps to determine what i may be doing wrong on my side.

 



Robert Pate Members
  • #12

Robert Pate
  • 23 posts

Posted 28 October 2015 - 08:29 PM

Sorry, forgot to attach the zip above.

Attached Files



Mike Roselli Members
  • #13

Mike Roselli
  • 113 posts

Posted 05 November 2015 - 06:30 PM

Robert,

Sorry for the delay in response... Life got a little hectic. What you sent looks right and should work. Could try invalidating the loginstaticobjects content and maybe clear your web browser's cache.

 

Are you testing with just that one rewrite policy? 

 

I'm attaching 2 word docs with the rewrite rules and screenshots. Tested on NS 11.0.63.16.nc using custom themes for GreenBubble and X1. (still working on the default theme)

Attached Files



Mike Roselli Members
  • #14

Mike Roselli
  • 113 posts

Posted 05 November 2015 - 07:21 PM

The footer area, below the logon form box, rewrite rule for gateway_login_view.js works for the default theme.

 

Still playing with getting the rule for adding code directly below the login button. Right now the gateway_login_view.js rewrite for it is not formatting correctly.

 

Attached Thumbnails

  • Default_theme_Footer_below_form.JPG


Mike Roselli Members
  • #15

Mike Roselli
  • 113 posts

Posted 06 November 2015 - 01:25 PM

the rewrite rule for adding code directly below the login button by rewriting the gateway_login_form_view.js script seems to work for the Default theme.



Robert Pate Members
  • #16

Robert Pate
  • 23 posts

Posted 06 November 2015 - 05:12 PM

Mike,

 

I still had issues on my test NS VPX (Enterprise) on getting the rewrite policy working, though went to one of our production NS MPX, which has Platinum licensing and seems to work fine there after flushing the loginstaticobjects as your suggested in your attachment.

 

I noticed that there is no integrated caching option in the Enterprise licensing. Is it possible that these rewrite policies will not work on an Enterprise or Standard platform license?



Mike Roselli Members
  • #17

Mike Roselli
  • 113 posts

Posted 06 November 2015 - 08:18 PM

They should work on Standard and Enterprise. I do know that all the versions have rewrite functionality and even though only Platinum is licensed for Integrated Caching all them them have have default content groups turned on with a default of 120 seconds life time. I do not know if there is a command that could work to invalidate the cache. Citrix would though.

 

All my production netscalers are Platinum except for one pair with standard licensing and we do not use them for AAA/Gateway. My dev netscalers are VPX using the developer edition license as we are mostly testing key functionality or a specific deployment scenario.



Robert Pate Members
  • #18

Robert Pate
  • 23 posts

Posted 06 November 2015 - 08:34 PM

Hmm, Ill see if I can find a way to flush the cache on an Enterprise. Whats interesting, is I created the same rewrite on another clean Platinum NS, and same scenario, in that it did not work until I enabled the integrating caching, and then ran the flush on it.

 

On a side note, is it possible to add a mailto hyperlink on my text? Below is my current expression, though would like to change myIT@domain.com text into an mailto hyperlink, and in a different color.

 

"var login_footer=$(\"<div style='text-align:center;color:white;font-size:15px;'>Having log-on issues? Please contact the MyIT Service Desk at myIT@domain.com</div>\").appendTo(logonbox_container);"



Mike Roselli Members
  • #19

Mike Roselli
  • 113 posts

Posted 06 November 2015 - 10:12 PM

This might work:

 

"var lfootr=$(\"<div style='text-align:center;color:white;font-size:15px;'>Having log-on issues? Please contact the MyIT Service Desk at <a style='color:blue' href='mailto:myIT@domain.com'>myIT@domain.com</a></div>\").appendTo(logonbox_container);"

 

 

just as a reminder, there is a 255 character limit in rewrite rules but you can easily get around this by adding "+" to the expression like so:

 

 

"var login_footer=$(\"<div style='text-align:center;color:white;font-size:15px;'>Having log-on issues?<br>Please contact the MyIT Service Desk at <a style='color:blue' href='mailto:myIT@domain.com'>myIT@domain.com</a>"+" or call <a style='color:blue' href='tel:2125551212'>212.555.1212</div>\").appendTo(logonbox_container);"



Mike Roselli Members
  • #20

Mike Roselli
  • 113 posts

Posted 09 November 2015 - 02:52 PM

Robert

 

You could also adjust the link color using inline javascript. example expression:

 

"var login_footer=$(\"<div style='text-align:center;color:white;font-size:12px;'>Having log-on issues?<br>Please contact the MyIT Service Desk at <a style='color:yellow;' onmouseout=\\\"this.style.color=\\'yellow\\'\\\" onmouseover=\\\"this.style.color=\\'blue\\'\\\""+" href='mailto:myIT@domain.com'>myIT@domain.com</a> or call <a style='color:yellow;' onmouseout=\\\"this.style.color=\\'yellow\\'\\\" onmouseover=\\\"this.style.color=\\'blue\\'\\\" href='tel:2125551212'>212.555.1212</div>\").appendTo(logonbox_container);"

 

The above expression is adding a style color for the link (style='color:yellow') so the default color is rendered when the page is loaded. Then using onmouseover and onmouseover to control the link color when a user hovers (onmouseover=\\\"this.style.color=\\'blue\\'\\\") then back to the original color when the mouse is moved away (onmouseout=\\\"this.style.color=\\'yellow\\'\\\")

The \ is an escape character for both the netscaler and javascript and here we are using them to make sure the line gets added with the correct quotations. Sine the HTML code in the javascript file is already in double quotes and I want the onmouse* sections to look something like this:

 

onmouseout=\"this.style.color=\'yellow\'\"

 

That will allows java to hande the quotes correctly. so in the expression requires the use of extra \ to tell the netscaler to escape next character so it looks something like this:

 

onmouseout=\\\"this.style.color=\\'yellow\\'\\\"

 

 

Hope that helps.