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 | |
| Layout-low graphics, Layout-full graphics, Allow users to choose | Not applicable. StoreFront auto detects and adjusts the UI to device screen. |
| Enable search, Disable search | Search is enabled by default. To disable the search boxes on the desktop/web UI, add the following style to style.css: .search-container {display: none;}. To disable the search boxes on the phone UI, add the following style to style.css: #searchBtnPhone {display: none;}
|
| Enable refresh | Enabled by default (browser refresh). |
| Enable return to last folder | Not enabled by default. 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 Workspace app makes very limited use of tooltips, as it is targeting touch and non-touch devices. You can add tooltips by custom script. |
| Icon view, Tree view, Details view, List view, Group view, Set Default view, (Low graphics) Icon view, (Low graphics) List view, (Low graphics) Default view | Citrix Workspace app 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. |
| Single tab UI, Tabbed UI (App tab, Desktop tab, Content tab, (Tab order)) | The Citrix Workspace app UI is tabbed by default, with apps and content in one tab and desktops in the other. There is also an optional Favorite tab. |
| Header logo, Text color, Header background color, Header background image | Equivalents for colors and logos using the StoreFront administration console. Click Customize Website Appearance in the StoreFront administration console 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'); }
|
| Pre-logon welcome message (Pre-locale) (Title,Text, Hyperlink, Button label) | 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(); } };
|
| Logon screen title, Logon screen message, Logon screen system message | 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, because changes made here force all clients to reload the UI. Put dynamic content in the customweb directory. |
| Application screen welcome message, Application screen system message | 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 | |
| Logon screen without headers, Logon screen with headers (including messages) | 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. See http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/receiver-customization-api.html. |
| 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. http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-authentication-sdks.html |
| JSP/ASP source access | There are no equivalent APIs on StoreFront, because the UI is not rendered in the same way. There are many JavaScript APIs to enable customization of the UI. |
Migrate Web Interface features to StoreFront
In this article
Copied!
Failed!