Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.

Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved.

Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism for customizing the user interface. Each Receiver for Web site includes a \contrib folder containing files in which UI customizations can be placed. The contents of this folder are preserved when StoreFront is upgraded to a newer version. However, page elements may be added, removed, or renamed in future releases so there is no guarantee that specific customizations will continue to function correctly following an upgrade, especially when the UI changes significantly between releases. You can customize strings, the cascading style sheet (CSS), and the JavaScript files. You can also add a custom pre-logon or post-logon screen, and add language packs. Receiver for Web style sheets and JavaScript files are concatenated and minified, so you must use Web development tools to discover CSS class and id names. String Customization Customized string bundle files for all supported languages are included in the \contrib folder for a Receiver for Web site. The customized string bundle files are simple JavaScript files that define a set of name value pairs. Strings defined in these files override the built-in strings for the particular language. The following example illustrates how to change the text of the Log Off link for English locales. 1. On the StoreFront server, use a text editor to open the ctxs.wrstrings.js file for the Receiver for Web site, which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\scripts\languagecode\ directory, where storename is the name specified for the store when it was created and languagecode is the two-letter ISO 639-1 language identifier. 2. Search the file for the string 'Log Off' (including the quotes) to locate the key name that is associated with this value, which in this case is LogOff. 2

Citrix StoreFront 3. Use a text editor to open the custom.wrstrings.en.js file for the site, which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the name specified for the store when it was created. Modify the file as shown below. (function ($) { $.localization.customstringbundle('en', { Example1: 'This is an example', Example2: 'This is another example', LogOff: 'Sign Out' ); )(jquery); Ensure that you add a comma at the end of the preceding line for the Example2 key. 4. Log on to the Receiver for Web site. The Log Off link text changes to Sign Out. You can use this procedure to change any of the existing strings found in the user interface. However, some text that appears on the UI, such as the Citrix Receiver logo text, is delivered as part of an image. In such cases, you must customize the CSS to replace the image. You can alter strings for other languages by adding the customized text to the appropriate language variant of the custom string file; for example, custom.wrstrings.fr.js for French. CSS Customization The CSS file custom.style.css is included in the \contrib folder and referenced by the HTML file for the Receiver for Web user interface. This custom CSS file is referenced after the site s main CSS files so that CSS specifiers defined in the custom file override similar specifiers defined elsewhere. You can use CSS customizations to change many aspects of the site appearance, including fonts, colors, and images. It is assumed that you are familiar with CSS syntax and have access to a tool that enables you to view CSS class names for Web pages, such as the developer tools available with Internet Explorer and Google Chrome, or Firebug for Mozilla Firefox. The following example illustrates how to customize the Receiver for Web background image. 1. View the Receiver for Web site using a page inspector. The CSS background-image specifier for the body tag sets the background image to url("../media/bg_bubbles.jpg"). 2. On the StoreFront server, use a text editor to open the custom.style.css file for the site, which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the name specified for the store when it was created. 3

Customizing the Receiver for Web User Interface 3. Add a CSS override as shown below. body { background-image: url("../media/launchready.png"); 4. Reload the site in your Web browser. The background image changes. In most browsers, the 6 x 10 pixel image launchready.png used in this example is stretched to fit the browser window as per the background-size: cover specifier. However, Internet Explorer 8 does not support this specifier and so the image is tiled across the page. To support Internet Explorer 8 users, use either a larger image or an image that is conducive to tiling when customizing the Receiver for Web site background image. The following example illustrates how to customize the Citrix Receiver logo image displayed on the logon screen. 1. View the Receiver for Web site using a page inspector. The logo is delivered through a <div> element with an id attribute of logonbox-logoimage. A CSS specifier targets this element and sets the logo to url("../media/logo_notagline.png"). 2. On the StoreFront server, use a text editor to open the custom.style.css file for the site, which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the name specified for the store when it was created. 3. Append the following specifier to override the logo image: #logonbox-logoimage { background-image: url("../uiareas/store/media/ UserMenuSelect.png"); width: 88px; height: 24px; top: 108px; 4. Reload the site in your Web browser. A customized blue logo image strip appears. You can use this method to add the logo for your own company. 4

Citrix StoreFront You can also change the appearance of the text on the Receiver for Web desktop and application views. For example, append the following CSS specifiers to the custom.style.css file to configure Tahoma as the default font and update the font colors for the resource names and items in the applications menu..myapps-name { color: firebrick; div#withscript { font-family: Tahoma; #resources-appsmenu.resource-name { color: wheat; JavaScript Customization The JavaScript file custom.script.js is included in the \contrib folder and referenced by the HTML file for the Receiver for Web user interface. This custom JavaScript file is referenced after the site s main JavaScript files so that any functions defined in the custom file override identically named functions defined elsewhere. You can use the custom JavaScript file to inject additional content into the user interface or load other scripts using Ajax. The following example illustrates how to add content to the Receiver for Web footer area. 1. On the StoreFront server, use a text editor to open the custom.script.js file for the Receiver for Web site, which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the name specified for the store when it was created. 2. Append the following at the end of the file. $(document).ready(function () { var $markup = $('<div id="helpdesk-area"> <a href="mailto:someone@example.com">contact the Help Desk</a></div>'); $('#resources-footer').append($markup); ); 5

Customizing the Receiver for Web User Interface 3. Use a Web development tool to open the custom.style.css file in the \contrib folder for the site. Add the following specifiers. #resources-footer { height: 84px; #helpdesk-area { margin-top: 8px; #helpdesk-area a { color: white; #helpdesk-area a:hover { text-decoration: underline; 4. Reload the site in your Web browser. A Help Desk link appears in the footer area. Adding Custom Pre-Logon or Post-Logon Screens The custom.script.js file contains comments describing how to create a custom pre-logon screen. The code performs the following tasks. 1. A function is assigned to CTXS.Application.preLoginHook. This function is invoked by the Receiver for Web code before the user logs in, prior to fetching the logon form. 2. The hook function dynamically appends some sample markup to a <div> element with an id attribute of prelogin-pane. This <div> element occupies the entire browser area and acts as a parent element under which the custom screen is built. 3. The prelogin-pane <div> is displayed by calling the custom jquery plugin ctxsdisplaypane(). 4. A click handler is registered on the Continue link, which publishes the event CTXS.Events.preLogin.done to signal that Receiver for Web should switch to the next screen, either the logon screen or the Citrix Receiver download screen. To style the custom markup appropriately, add rules to custom.style.css; the comments in custom.script.js provide some sample CSS markup for the example pre-logon screen. You can also display a custom screen after users log on, just before their resources appear. To do this, modify the pre-logon example to specify the function CTXS.Application.postLoginHook instead of CTXS.Application.preLoginHook and to use a <div> id attribute of postlogin-pane rather than prelogin-pane. Pre-logon and post-logon screens exhibit the following behavior. Pre-logon and post-logon screens are displayed every time users log on. If users refresh their browser windows while viewing a custom screen, the display automatically switches to the next screen in the logon sequence. As with other screens, users are logged off if their Web sessions time out while they are viewing the post-logon screen. 6

Citrix StoreFront Adding Language Support To add support for a new language in Receiver for Web, you must add a Receiver for Web language pack and then add resource files to the StoreFront authentication service. Adding a Receiver for Web Language Pack New language packs are comprised of a culture definition script file and a string bundle script file for each language. The format of the culture definition script file is as follows. (function ($) { $.globalization.availableculture("languagecode", { name: "languagecode", englishname: "enlanguagename", nativename: "nativelanguagename", stringbundle: "bundlelocation" ); )(jquery); Where languagecode is the two-letter ISO 639-1 language identifier, enlanguagename is the name of the language in English, nativelanguagename is the name of the language in that language, and bundlelocation is the location of the string bundle script file. The string bundle script file defines a set of name value pairs as follows. (function ($) { $.localization.addstringbundle('en', { AcceptTermsMessage: 'Please accept the terms of the licensing agreement before installing Citrix Receiver.', ActivateReceiver: 'Activate Receiver', AddApp: 'Add App',...... ); )(jquery); The custom.script.js file contains comments describing how to create and load the culture definition and string bundle script files, using the addition of support for Polish as an example. 7

Customizing the Receiver for Web User Interface To add resource files to the StoreFront authentication service The user interface for the logon form is provided by the StoreFront authentication service. To localize these strings, you must create three additional resource files. The following example illustrates how to add resource files for Polish (language code pl). 1. On the StoreFront server, locate the resource (.resx) files for the authentication service, which are typically located in the C:\inetpub\wwwroot\Citrix\Authentication\App_Data\resources\ directory. 2. Make copies of the files ExplicitAuth.resx, ExplicitCore.resx, and ExplicitFormsCommon.resx. Rename the copies ExplicitAuth.pl.resx, ExplicitCore.pl.resx, and ExplicitFormsCommon.pl.resx, respectively. 3. Using a text editor, open the new files and, for each <data> element, translate the string in the corresponding <value> element. Save the files using UTF-8 encoding. 4. Restart Microsoft Internet Information Services (IIS) on the StoreFront server. When users access the Receiver for Web site from a Polish locale, all the UI text appears in Polish. If any translated strings are longer in a new language than they are in the built-in languages they may not be correctly positioned in the user interface. Because the language code appears as a class name on the <body> element, you can create CSS rules to adjust elements as necessary. For example, append the following CSS specifier to the custom.style.css file to make the logon box slightly larger to accommodate longer strings for Polish users..pl #logonbox-logonform { width: 320px; Tip: Receiver for Web uses the preferred language for your Web browser to determine the display locale. To test multiple languages on a Receiver for Web site using a single machine, modify the preferred language setting for your browser and reload the site. 8