Product Documentation

Migrate Web Interface features to StoreFront

Sep 22, 2016

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.
  • Disable. To hide the search boxes on the desktop/web UI, add the following style to style.css:

.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.
  • 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 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.

 

  • Single tab UI
  • Tabbed UI
    • App tab
    • Desktop tab
    • Content tab
    • (Tab order)

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.

  • 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’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');

}

  • 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, as 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, as the UI is not rendered in the same way.  There are many JavaScript APIs to enable customization of the UI.