Product Documentation

Migrer les fonctionnalités de l'Interface Web vers StoreFront

Oct 31, 2016

La plupart des personnalisations de l'Interface Web ont des équivalents dans StoreFront par le biais d'ajustements JavaScript, d'API publiées par Citrix ou de la console de gestion StoreFront.

Ce tableau contient une vue d'ensemble des personnalisations et des informations de base sur la manière de les réaliser.

Emplacements des dossiers

  • Pour les personnalisations de script, ajoutez les exemples au fichier script.js qui se trouve dans 

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom

  • Pour la personnalisation de style, ajoutez l'exemple au fichier style.css qui se trouve dans

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom

  • Pour le contenu dynamique, ajoutez le contexte dynamique à un fichier texte dans

C:\inetpub\wwwroot\Citrix\StoreNameWeb\customweb

  • Si vous disposez d'un déploiement à plusieurs serveurs, vous pouvez répliquer les modifications vers d'autres serveurs depuis la console d'administration StoreFront ou à l'aide de PowerShell.

Remarque : l'Interface Web permettait aux utilisateurs de personnaliser plusieurs paramètres. Actuellement, StoreFront ne propose pas cette capacité, et s'il est possible d'ajouter des personnalisations plus importantes pour prendre en charge cette fonctionnalité, il ne s'agit pas de l'objet de cet article.

 

Fonctionnalité de l'Interface Web

Équivalent StoreFront

Personnalisation avec la console de gestion

 

  • Disposition-Graphiques simplifiés
  • Disposition-Graphiques avancés
  • Autoriser les utilisateurs à choisir

Sans objet. StoreFront détecte automatiquement et adapte l'interface utilisateur à l'écran de l'appareil.

  • Activer la recherche
  • Désactiver la recherche
  • La recherche est activée par défaut.
  • Disable. Pour masquer les zones de recherche sur le bureau ou l'interface Web, ajoutez le style suivant au fichier style.css :

.search-container {

    display: none;

}

Pour masquer les zones de recherche sur l'interface utilisateur du téléphone, ajoutez :

#searchBtnPhone {

    display: none;

}

Activer l'actualisation

Activée par défaut (actualisation du navigateur).

Activer le retour au dernier dossier

Non activé par défaut.

Activer le retour au dernier dossier - Pour mémoriser le dossier actuel et y retourner au moment du chargement, ajoutez la ligne suivante au fichier script.js :

CTXS.Extensions.afterDisplayHomeScreen = function ()

{

  // vérifier si la vue a été enregistrée la dernière fois

  CTXS.ExtensionAPI.localStorageGetItem("view",

  function (view) {

    if (view) {

         // si la vue a été enregistrée, y retourner

         CTXS.ExtensionAPI.changeView(view);

    }

    if (view == "store") {  

        // si la vue est magasin, vérifier si dossier a été enregistré

        CTXS.ExtensionAPI.localStorageGetItem("folder",

          function(folder) {

            if (folder != "") {

              // si le dossier a été enregistré, y retourner

              CTXS.ExtensionAPI.navigateToFolder(folder);

            }

          }

        );  

    }

    // configurer le contrôle de dossier

    CTXS.Extensions.onFolderChange = function(folder) {

      CTXS.ExtensionAPI.localStorageSetItem("folder",

         folder);

    };

    // configurer le contrôle de la vue

    CTXS.Extensions.onViewChange = function(newview) {

      // ne pas conserver les vues de recherche ou d'informations d'application

      // au lieu de cela, mémoriser la vue parent.

      if ((newview != "appinfo") &&

          (newview != "search")) {

            CTXS.ExtensionAPI.localStorageSetItem(

               "view", newview);

      }

    };

  });

};

Activer les conseils

Citrix Receiver utilise très peu les info-bulles, car il cible les appareils tactiles et non tactiles. Vous pouvez ajouter des info-bulles à l'aide d'un script personnalisé.
  • Affichage Icônes
  • Affichage Arborescence
  • Affichage Détails
  • Affichage Liste
  • Affichage Groupe
  • Définir l'affichage par défaut
  • Affichage Icônes (Graphiques simplifiés)
  • Affichage Liste (Graphiques simplifiés)
    Affichage par défaut (Graphiques simplifiés)

L'interface utilisateur de Citrix Receiver est différente, donc ces options ne s'appliquent pas. Vous pouvez utiliser la console de gestion StoreFront pour configurer des vues. Pour de plus amples informations, consultez la section Spécifier différentes vues pour les applications et bureaux.

 

  • Interface utilisateur à onglet unique
  • Interface utilisateur à plusieurs onglets
    • Onglet Application
    • Onglet Bureau
    • Onglet Contenu
    • (Ordre des onglets)

L'interface utilisateur de Citrix Receiver contient des onglets par défaut, avec applications et contenu dans un onglet et bureaux dans l'autre. Il existe également un onglet Favori (facultatif).

  • Logo d'en-tête
  • Couleur du texte
  • Couleur d'arrière-plan de l'en-tête
  • Image d'arrière-plan de l'en-tête

Équivalents pour les couleurs et logos à l'aide de la console d'administration StoreFront. Cliquez sur Personnaliser l'apparence du site Web dans le panneau Actions de la console d'administration StoreFront et apportez les modifications sur l'écran qui s'affiche.

Vous pouvez définir une image d'arrière-plan pour l'en-tête en utilisant la personnalisation de style. Par exemple

.theme-header-bgcolor {

    background-image: url('spirals.png');

}

  • Message de bienvenue de pré-ouverture de session
    (Pré-localisation)
    • Titre
    • Texte
    • Hyperlien
    • Libellé du bouton

Par défaut, il n'existe aucun autre écran de pré-ouverture de session.

Cet exemple de script ajoute une zone de message interactive :

var doneClickThrough = false;

// Avant l'ouverture de session Web

CTXS.Extensions.beforeLogon = function (callback) {

    doneClickThrough = true;

    CTXS.ExtensionAPI.showMessage({

        messageTitle: "Bienvenue !",

        messageText: "Réservé uniquement aux <a href="http://www.WWc.com" target="_blank">employés de WWCo",

        okButtonText: "Accepter",

        okAction: callback

    });

};

// Avant l'écran principal (pour les clients natifs)

CTXS.Extensions.beforeDisplayHomeScreen

  = function (callback) {

    if (!doneClickThrough) {

        CTXS.ExtensionAPI.showMessage({

            messageTitle: "Bienvenue !",

            messageText: "Réservé uniquement aux employés de WWCo",

            okButtonText: "Accepter",

            okAction: callback

        });

    } else {

        callback();

    }

};

  • Titre de l'écran d'ouverture de session
  • Message de l'écran d'ouverture de session
  • Message système de l'écran d'ouverture de session

Il existe quatre zones de personnalisation sur l'écran d'ouverture de session. Haut et bas de l'écran (en-tête et bas de page) et haut et bas de la boîte de dialogue d'ouverture de session.

.customAuthHeader,

.customAuthFooter

.customAuthTop,

.customAuthBottom {

    text-align: center;

    color: white;

    font-size: 16px;

}

Exemple de script (contenu statique)

$('.customAuthHeader').html("Welcome to ACME");

Exemple de script (contenu dynamique)

function setDynamicContent(txtFile, element) {

CTXS.ExtensionAPI.proxyRequest({

url: "customweb/"+txtFile,

success: function(txt) {$(element).html(txt);}});

}

setDynamicContent("Message.txt", ".customAuthTop");

Remarque : il ne faut pas explicitement inclure de contenu dynamique dans le script, ou le placer dans le répertoire personnalisé, car les modifications effectuées ici forcent les clients à recharger l'interface utilisateur. Placez le contenu dynamique dans le répertoire customweb.

  • Message de bienvenue de l'écran d'application
  • Message système de l'écran d'application

Consultez les exemples d'écran de bienvenue CustomAuth ci-dessus.

Consultez les exemples de contenu dynamique ci-dessus. Utilisez ‘#customTop’ plutôt que ‘.customAuthTop’ pour placer du contenu sur l'écran d'accueil.

Texte de bas de page (tous les écrans)

Exemple de script :

#customBottom {

      text-align: center;

    color: white;

    font-size: 16px;

}

Exemple de contenu statique à l'aide d'un script :

$('#customBottom').html("Welcome to ACME");

Fonctionnalités avec aucun équivalent direct

 

 

  • Écran d'ouverture de session sans en-têtes
  • Écran d'ouverture de session avec en-têtes
    (Y compris les messages)
Il n'existe pas d'équivalent direct dans StoreFront. Toutefois, vous pouvez créer des en-têtes personnalisés.  Consultez la section « Titre de l'écran d'ouverture de session » ci-dessus.

Paramètres utilisateur

Par défaut, il n'existe aucun paramètre utilisateur.  Vous pouvez ajouter des menus et boutons JavaScript.

Le contrôle de l'espace de travail                       

Fonctionnalité équivalente pour les paramètres d'administrateur. Les API d'extension permettent une plus grande flexibilité.

Voir http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/receiver-customization-api.html.

Personnalisations avancées (code)

 

 

Hooks de génération du fichier ICA et autres personnalisations de routage d'appel.

API équivalentes ou supérieures.

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-customization-sdk.html

Personnalisations d'authentification

API équivalentes ou supérieures.

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-authentication-sdks.html

Accès source JSP/ASP

Il n'existe pas d'API équivalente sur StoreFront, car l'interface utilisateur n'est pas restituée de la même manière.  Il existe de nombreuses API JavaScript permettant la personnalisation de l'interface utilisateur.