Receiver Customization for Web in StoreFront 1.2 -

Note :. An updated version of this blog for StoreFront 2.0 is available here

StoreFront 1.2 was released recently, which contains a new version receiver for the Web. I think it's time for me to provide a follow up to my first blog on receiver Customizing for the Web. This is to show how to update the original customization to work with the new version and describe the additional customization support provided by the new version.

customization Update StoreFront 1.1

If you followed my original blog to customize your receiver to the Web in StoreFront 1.1, you find that most examples of customization works always with StoreFront 1.2. Those who stop working require little tweaking. We will examine them one by one here

Example 1: .. Rebranding the logon screen functions without any change

In Example 2: Customizing the screen Home, we added the following CSS definitions change the font color for the username and close the session link

 # # resources header header-userinfo {color :. lightgreen; }

 # # resources header header-logofflink {color: lightgreen; }

The username and Log Off link elements are combined in the new version. The first CSS definition therefore should be changed to:

 # # resources header header-userinfo a {color: lightgreen; }

The second definition CSS is now redundant and should be deleted. The resulting home screen looks like:

In Example 3: Adding a hyperlink to the footer area, we used the definitions following CSS to beautify the hyperlink in the footer area:

 #-resources footer div {padding-top: 58px; }

 #-resources footer a {color: lightgreen; }

 #-resources footer a: hover {color: silver; text-decoration: underline; }

Since the new version of this Receiver for Web applications and switch workstations in the footer area, the first CSS definition is more appropriate and should be deleted. This would make the user interface looks like :.

You can further refine the CSS styles to beautify the area footer to your satisfaction

Due to the change footer Example 4: Loading additional files IU also need some modifications. Originally, we used the following JavaScript line to load the HTML code fragment in the resource-footer element because there were no other items in the lower zone page:

 $ ( '#-resources footer') .load ( 'contrib / footer.htm');

This must be changed to:

 $ ( '#-resources footer') expense ( 'contrib / footer.htm.') .appendTo ($ ( '# Resource-foot page '));

We append the HTML fragment in the footer area instead of replacing the entire region

In Example 5: Customizing texts. in the head area, changing "Welcome" to "Signed as" is more applicable.

Adding pre-login and post messages Log

Receiver for Web 1.2 in StoreFront provides hooks to add custom pre-connection and / or post-login messages if you like. To add a pre-login messages, insert the following JavaScript code custom.script.js

 $ (document) .ready (function () {var markup =  '+'  Warning 
 '+'  This site is for employees only Co World! 
 '+'  Continue ...  '+' 
 ' ; ....

 CTXS.Application.preLoginHook = function () {$ ( '# prelogin-component) append ($ (markup)) ctxsDisplayPane () find (' a ') click (function ( ) {CTXS.Events.publish (CTXS.Events.preLogin.done); return false;});};}

If you have $ (document) .ready (function () { }) defined in custom.script.js , you have to merge them together. the CTXS.Application.preLoginHook is invoked by the receiver to the web at the execution before the user logs in. it adds a sample HTML fragment

item and call ctxsDisplayPane to display the message. A click handler is registered on the "... Continue" link, which signals that the receiver for the Web should go to the next screen when clicked.

You must also add CSS definitions for custom.style.css in the message format. Here are examples of CSS definitions:

 .custom component {text-align: center; White color; }

 .custom-component h3 {margin-top: 80px; font-size: 30px; }

 .custom component p {margin: 40px 0; font-size: 18px; }

 .custom-component has a component-.custom :, .custom active-shutter a: visited {font-size: 24px; color: tan; }

 .custom-component a: hover {text-decoration: underline; }

The pre-login messages like:

A message personalized post-identifier can also be displayed after the user logs in, just before display of applications and user workstations. The code is very similar to adding the pre-connection message. Here's an example:

 $ (document) .ready (function () {var = postLoginMarkup  '+'  Announcement 
 '+'  This site is intended for. maintenance 18h00-22: 00 on Saturday 
 '+'  Continue ...  '+' 
 '; CTXS.Application.postLoginHook = function () {$ (' # '. ). append ($ (postLoginMarkup)) ctxsDisplayPane () find ( 'PostLogin-part a.') click (function (.) {CTXS.Events.publish (CTXS.Events.postLogin.done); return false;}) ;};}

This is the resulting post-login message:

supporting a new language

You can add support for a new language to a receiver for the Web. This involves adding a language pack to receiver for Web and adding relevant linguistic resources to the authentication service.

adding a language pack to Receiver for the Web

new language packs consist of a culture definition script file and a beam string script file for each language

definition culture

the format of the definition of cultural script file :.

 (function ($) {$ .globalization.availableCulture ( "", {name: "" englishName "" nativeName "" stringbundle ""});

}) (jQuery);

for example, a culture of the Polish file looks like:

 (function ($) {$ .globalization.availableCulture ( "ul", {name: "pl", englishName: "Polish" nativeName "interior", stringbundle "contrib / wrstrings.pl.js"});

}) (jQuery);

This should be saved as culture.pl.js .

string bundle

The string bundle script file defines a set of name-value pairs. You can copy a string file existing set of scripts / /ctxs.wrstrings.js , for example the English version of scripts / en / ctxs.wrstrings.js to wrstrings.pl.js . Then replace the language code 'en' for 's' and replace all string values with those translated.

Loading the language pack

After creating the language pack, you can add the following code custom.script.js

$ (document) .ready (function () { CTXS.Localization.getScript ( "contrib / js culture.pl."); });

This code loads the definition of script files of culture and bundle string

Adding language resources to the authentication service

The. Interface user to the login form is provided by the authentication service StoreFront. The location of these channels requires the creation of 3 additional resource files. Continuing with the Polish aid (language code 's') as an example:

In Windows Explorer, open the folder C :. Inetpub wwwroot Citrix Authentication App_Data resources

Copy ExplicitAuth.resx to ExplicitAuth.pl.resx
Copy ExplicitCore.resx to ExplicitCore.pl.resx
Copy ExplicitFormsCommon.resx to ExplicitFormsCommon.pl.resx

in all newly copied files, locate each element and translate the string in the corresponding element. Save each file using UTF-8.

Execute the command `iisreset 'on the Storefront to restart IIS.

user interface elements to fit the new language

On a system Poles, the receiver of the shipment to the Web site in a browser should now display the user interface with all strings appearing in Polish. If all translated strings are more Polish than the top-lingual and are not positioned correctly, it is interesting to note that the language code ( 's' in this case) appears as a class name on the tag, and it can be used to create CSS definitions to set the necessary items. For example, the following CSS definition would be slightly larger connection box when using Polish, to accommodate longer strings:

 .pl # logonbox-LogonForm {width: 320px; }

Limitations

As stated previously, the receiving user interface for the Web evolves. Page elements can be added, deleted or renamed in future releases. There is no guarantee that customization for a particular version will work on the different versions.

What is a VPN Used For

Receiver Customization for Web in StoreFront 1.2