Migrate Web Interface features to StoreFront
Many of the Web Interface customizations have equivalents in StoreFront by using JavaScript tweaks, Citrix published APIs, or the StoreFront management console.
The table contains an overview of the customizations and basic information about how to achieve them.
Folder locations
- For script customizations, append the examples to the script.js file found in
C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom
- For style customization, append the example to the style.css file found in
C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom
- For dynamic content, add the dynamic context to a text file in
C:\inetpub\wwwroot\Citrix\StoreNameWeb\customweb
- If you have a multiserver deployment, you can replicate any changes to other servers from the StoreFront administration console or by using PowerShell.
Note: Web Interface enabled individual users to customize various settings. Currently, StoreFront does not have this ability, and while it is possible to add more extensive customization to support it, that is not the focus of this article.
Web Interface Feature |
StoreFront Equivalent |
Customization with the Management Console |
|
|
Not applicable. StoreFront auto detects and adjusts the UI to device screen. |
|
.search-container { display: none; } To hide the search boxes on the phone UI, add: #searchBtnPhone { display: none; } |
Enable refresh |
Enabled by default (browser refresh). |
Enable return to last folder |
Not enabled by default. Enable Return to last folder - To remember the current folder, and return to it on load, add the following to script.js CTXS.Extensions.afterDisplayHomeScreen = function () { // check if view was saved last time CTXS.ExtensionAPI.localStorageGetItem("view", function (view) { if (view) { // if view was saved, change to it CTXS.ExtensionAPI.changeView(view); } if (view == "store") { // if view is store, see if folder was saved CTXS.ExtensionAPI.localStorageGetItem("folder", function(folder) { if (folder != "") { // if folder was saved, change to it CTXS.ExtensionAPI.navigateToFolder(folder); } } ); } // set up monitoring of folder CTXS.Extensions.onFolderChange = function(folder) { CTXS.ExtensionAPI.localStorageSetItem("folder", folder); }; // set up monitoring of view CTXS.Extensions.onViewChange = function(newview) { // don’t retain search or appinfo views // instead, remember parent view. if ((newview != "appinfo") && (newview != "search")) { CTXS.ExtensionAPI.localStorageSetItem( "view", newview); } }; }); }; |
Enable hints |
Citrix Receiver makes very limited use of tool tips, as it is targeting touch and non-touch devices. You can add tool tips by custom script. |
|
Citrix Receiver has a different UI so these choices do not apply. You can use use the StoreFront management console to configure views. For more information see, Specify different views for applications and desktops.
|
|
The Citrix Receiver UI is tabbed by default, with apps and content in one tab and desktops in the other. There is also an optional Favorite tab. |
|
Equivalents for colors and logos using the StoreFront administration console. Click Customize Website Appearance in the StoreFront administration console's Actions pane and make your customizations on the screen that displays. You can set the header to a background image using a style customization. For example .theme-header-bgcolor { background-image: url('spirals.png'); } |
|
By default, there is no separate pre-logon screen. This example script adds a click-through message box: var doneClickThrough = false; // Before web login CTXS.Extensions.beforeLogon = function (callback) { doneClickThrough = true; CTXS.ExtensionAPI.showMessage({ messageTitle: "Welcome!", messageText: "Only for <a href="http://www.WWc.com" target="_blank">WWCo Employees", okButtonText: "Accept", okAction: callback }); }; // Before main screen (for native clients) CTXS.Extensions.beforeDisplayHomeScreen = function (callback) { if (!doneClickThrough) { CTXS.ExtensionAPI.showMessage({ messageTitle: "Welcome!", messageText: "Only for WWCo Employees", okButtonText: "Accept", okAction: callback }); } else { callback(); } }; |
|
There are four areas for customization on the logon screen(s). Top and bottom of screen (header and footer) and top and bottom of the logon box itself. .customAuthHeader, .customAuthFooter .customAuthTop, .customAuthBottom { text-align: center; color: white; font-size: 16px; } Example script (static content) $('.customAuthHeader').html("Welcome to ACME"); Example script (dynamic content) function setDynamicContent(txtFile, element) { CTXS.ExtensionAPI.proxyRequest({ url: "customweb/"+txtFile, success: function(txt) {$(element).html(txt);}}); } setDynamicContent("Message.txt", ".customAuthTop"); Note: Do not explicitly include dynamic content in the script, or put it in the custom directory, as changes made here force all clients to reload the UI. Put dynamic content in the customweb directory. |
|
See the examples for CustomAuth welcome screen above. See examples for dynamic content above. Use ‘#customTop’ rather than ‘.customAuthTop’ to place content on the home screen. |
Footer text (all screens) |
Example script: #customBottom { text-align: center; color: white; font-size: 16px; } Example static content using a script: $('#customBottom').html("Welcome to ACME"); |
|
Features with no direct equivalent
|
|
|
There is no direct equivalent in StoreFront. However, you can create custom headers. See “Logon Screen Title” above. |
User settings |
By default, there are no user settings. You can add menus and buttons from JavaScript. |
Workspace control |
Equivalent functionality for administrator settings. The extension APIs allow significant additional flexibility. |
|
Deep Customizations (code)
|
|
ICA File generation hooks and other call-routing customizations. |
Equivalent or better APIs. http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-customization-sdk.html |
Authentication customizations |
Equivalent or better APIs. |
JSP/ASP source access |
There are no equivalent APIs on StoreFront, as the UI is not rendered in the same way. There are many JavaScript APIs to enable customization of the UI. |