Personnalisation de Citrix StoreFront 2.1 (compatible StoreFront 2.5)

Avec les dernières versions des produits XenApp ou XenDesktop, il a fallu dire adieu à la Web Interface (dernière version 5.4) et accueillir petit à petit Citrix StoreFront.

Si les premières versions de StoreFront étaient lourdes et complexes à mettre en places, le processus d’installation a grandement été simplifié dans les versions les plus récentes de XenApp ou XenDesktop. Par exemple, StoreFront ne nécessite désormais plus de base de données dédiée et peut maintenant être utilisé tant pour une architecture SBC (XenApp) qu’une architecture VDI (XenDesktop).

Une fois l’architecture déployée, il vous faudra bien souvent personnaliser l’aspect graphique du portail StoreFront aux couleurs du client pour lequel vous travaillez. Je vous propose ici de découvrir en détails comment personnaliser de manière plus ou moins détaillée StoreFront.

Si la personnalisation de StoreFront est rendue plus simple à partir de StoreFront 2.0, sachez toutefois que plus vous personnaliserez de manière approfondie votre portail plus celui-ci sera susceptible de ne pas supporter une évolution. Autrement dit, toute la personnalisation graphique devra probablement être réétudiée lors de la mise à jour vers une nouvelle version de StoreFront (montée de version).

Etape 0 : Arrêt sur image et analyse de l’existant

Pour la personnalisation de StoreFront, vous aurez besoin des éléments suivants :

• Un navigateur Internet (voir plusieurs pour vérifier la compatibilité de votre personnalisation) ;
• L’inspecteur de code de votre navigateur pour tracer les éléments à modifier (il peut s’agir de l’inspecteur de Google Chrome, Firefox, etc. Le plus souvent vous l’ouvrez en effectuant un clic droit sur l’élément à analyser puis sélectionnez Inspecter/Examiner l’élément).
• Un éditeur de texte (type NodePad++)
• Un accès au serveur web qui héberge votre Store et en particulier au dossier correspondant sur le disque : C:\inetpub\wwwroot\Citrix\StoreWeb. (ou Store et le nom de mon store StoreFront).

Selon le degré de personnalisation, vous aurez également besoin de Photoshop (ou une alternative) pour la personnalisation des éléments graphiques (ou bien carrément d’un graphiste).

Petit arrêt sur image de l’existant, par défaut, StoreFront ressemble à peu près à ça :

La page de login avec le logo Citrix Receiver, le fond vert pas super avenant et la mire d’authentification avec le nom d’utilisateur et le mot de passe. Si nécessaire, l’utilisateur doit donc saisir manuellement son domaine d’appartenance.

Une fois identifié, nous accédons à la page ci-dessous composée de plusieurs éléments et plus particulièrement :

• Bandeau latéral gauche avec liste des applications (et éventuellement des recoupements par catégories d’applications) ;
• Barre supérieure avec le logo et le menu permettant à l’utilisateur de changer son mot de passe, se déconnecter ou effectuer une recherche (dans le champ de recherches à droite) ;
• Au centre, la liste des applications. Chaque application peut-être supprimée via la petite croix dans son coin supérieur droit ou par le menu contextuel qui apparaît lorsque vous effectuez un clic droit sur l’application ;
• Enfin, le footer tout en bas de la page avec les mentions légales de Citrix Inc.

Pour personnaliser notre portail StoreFront, nous devrons modifier des fichiers CSS, ajouter du JavaScript et bien sûr remplacer/écraser les éléments graphiques (tels que les logos Citrix) que l’on souhaite remplacer.

ETAPE 1 : Personnalisation de la page d’authentification

Sur le serveur StoreFront, rendez-vous dans le dossier : C:\inetpub\wwwroot\Citrix\StoreWeb\contrib. Vous y trouverez le fichier custom.style.css. C’est le fichier CSS qui nous permettra de procéder à toutes les modifications de style du portail.

body {
background-color:rgb(223,225,232);
background-image:none;
}

html, body, #withscript {
font-size:14px;
}

#credentialupdate-logonimage, #logonbox-logoimage {
background-image: url("Small_Logo_Stf.png");
}

Le logo Small_Logo_Stf.png auquel je fais référence dans le code précédent devra être positionné dans le même dossier que le fichier CSS, à savoir le répertoire : C:\inetpub\wwwroot\Citrix\StoreWeb\contrib. Nous personnalisons encore un peu les couleurs et mettons en gras les informations concernant la mire d’authentification.

/* *************************************************************** */
/* Mire d'identification */
/* *************************************************************** */
.credentialform .error, .credentialform .warning, .credentialform .information,
.credentialform .inprogress, .credentialform .confirmation, .credentialform .plain {
color: black
font-size:15px;
}

.credentialform label {
font-weight: bold;
}

#header-userinfo a {
color:black;
font-weight: bold;
}

Après ces quelques lignes, nous devons avoir l’aperçu suivant :

Nous supprimons la barre verte sur la gauche.

/* *************************************************************** */
/* Suppression de la barre verte bizarre sur la gauche */
/* *************************************************************** */
#credentialupdate-container, #logonbox-container {
background: none;
}

L’ajout d’informations sur le portail ne peut se faire qu’en JavaScript (à la volée). Pour ce faire, vous devez utiliser le fichier suivant : C:\inetpub\wwwroot\Citrix\StoreWeb\contrib\custom.script.js qui contiendra toutes les sections en JavaScript qui auront été créées par vos soins.

Dans le fichier JavaScript, ajoutez la section suivante :

////////////////////////////////////////////////////////////////////////
// Affichage du message en bas de login page
////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
var $markup = $(
'
<div id="login-msg">' +
'

Si vous rencontrez des problèmes pour vous connecter, veuillez contacter le support :

' +
'
<ul>' +
'
 	<li>Si vous avez perdu votre mot de passe, contactez le <strong>01 23 45 67 90</strong></li>
' +
'
 	<li>Si vous avez un autre problème : contactez le support au <strong>01 89 67 45 23</strong>' +
'</li>
</ul>
' +
"

Si le problème persiste, il ne vous reste plus qu'à rentrer chez vous.

" +
'

</div>
'
);
$('#logonbelt-bottomshadow').append($markup);
});

Le truc c’est de repérer avec votre l’inspecteur de votre navigateur Internet entre quelle classe ou div vous souhaitez positionner votre texte.

Pour personnaliser un peu l’apparence du texte que l’on ajoute, dans le fichier CSS, ajoutez les lignes suivantes qui vont nous permettre de modifier le style dans lequel vont s’afficher les précédentes informations :

/* *************************************************************** */
/* Login Page - Msg */
/* *************************************************************** */
#login-msg {
color:black;
font-size:15px;
padding-top:30px
}

#login-msg a {
color:black
}

#login-msg a:hover {
color:black
font-weight: bold;
text-decoration: underline;
}

Même principe que précédemment, ajoutez dans le fichier JavaScript :

////////////////////////////////////////////////////////////////////////
//Affichage Titre Login Page
////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
var $markup = $(
'
<div id="login-title">Bienvenue sur la plateforme Citrix :-)</div>
');
$('#logonbelt-topshadow').append($markup);
});

Puis dans le fichier CSS :

/* *************************************************************** */
/* Login Page - Titre */
/* *************************************************************** */
#login-title {
color:black
font-weight: bold;
font-size:22px;
text-align:center;
padding-top:35px;
padding-left :150px ;
}

Nous pouvons maintenant passer à la personnalisation de la page qui présente l’ensemble des applications aux utilisateurs.

ETAPE 2 : Personnalisation de la page listant les applications

L’idée que je vais poursuivre dans la partie qui va suivre consiste à personnaliser l’aspect graphique de StoreFront tout en épurant le produit de certaines options que je ne souhaite pas rendre visible aux utilisateurs. Il est possible que certains éléments ne vous conviennent donc pas, il vous suffit donc de passer les étapes concernées.

On commence par supprimer le footer contenant l’ensemble des mentions légales Citrix :

/* *************************************************************** */
/* Suppression des mentions légales Citrix */
/* *************************************************************** */
#copyrightFooterText {
display:none;
}

On supprime maintenant le logo Citrix Receiver que vous voyez dans le coin gauche de la barre supérieure. Puis, on positionne notre logo personnalisé (que nous avons déjà positionné sur la page d’authentification). On personnalise au passage la barre supérieure en modifiant le fond et la couleur du séparateur.

/* *************************************************************** */
/* Logo Header - Suppression logo original */
/* *************************************************************** */
#header-logo {
display:none;
}
/* *************************************************************** */
/* Logo Header - Ajout logo */
/* *************************************************************** */
#resources-header {
background-image: url("Small_Logo_Stf.png");
background-repeat: no-repeat;
background-size:200px 45px;
height:55px;
text-align:center;
}

#resources-header {
border-bottom-color:grey;
border-bottom-width:1px;
border-bottom-style:solid;
}

Nous passons à la personnalisation de l’affichage des applications.

Nous allons ajouter un titre dans le bandeau supérieur ainsi qu’un message personnalisé en bas de page. Ces messages peuvent être personnalisés selon vos besoins.

Le principe est le même que précédemment, nous ajoutons dans le fichier JavaScript :

////////////////////////////////////////////////////////////////////////
// Message en bas de page Applications
////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
var $markup = $(
'
<div class="apps-page">' +
'

Si vous rencontrez des problèmes pour vous connecter, veuillez contacter le support.

' +
'

</div>
'
);
$('#resources-footer').append($markup);
});

////////////////////////////////////////////////////////////////////////
// Affichage du titre sur page Applications
////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
var $markup = $(
'
<div id="apps-title">Bienvenue sur la page des Applications</div>
');
$('#resources-header').append($markup);
});

/* *************************************************************** */
/* Titre Page des Applications */
/* *************************************************************** */
#apps-title {
font-size:22px;
padding-top:12px;
padding-left:150px;
color:black;
}

/* *************************************************************** */
/* Msg personnalisé bas de page des applications */
/* *************************************************************** */
.apps-page {
font-weight: bold;
}

Pour personnaliser la couleur des intitulés des applications et accorder certaines couleurs :

/* *************************************************************** */
/* Nom des applications */
/* *************************************************************** */
.myapps-name {
color:black;
}

/* *************************************************************** */
/* Ajout des applications favorites */
/* *************************************************************** */
#can-add-apps {
color:black;
}

/* *************************************************************** */
/* Message si aucune application n'est disponible */
/* *************************************************************** */
#myapps-emptyresult {
color:black;
}

Normalement, nous avons à peu près passé en revue tous les éléments qui nécessitent une personnalisation.

Au final, notre page ressemble finalement à ce qui suit :

Pour bien faire, il vous faut également penser à accorder la charte graphique des popups. Il existe globalement 5 popups que la plupart des utilisateurs peuvent être amenés à visualiser lorsqu’ils accèdent au portail StoreFront :

• Popup de déconnexion (confirmation qui apparaît lorsqu’un utilisateur se déconnecte du portail) ;
• Popup d’AFK (apparaît lorsque l’utilisateur est inactif et qu’il va bientôt être déconnecté) ;
• Popup d’inactivité (apparaît lorsque l’utilisateur a été inactif puis déconnecté) ;
• Popup changement de mot de passe (apparaît lorsque l’utilisateur clique dans le menu supérieur pour procéder au changement de son mot de passe) ;
• Popup d’expiration de mot de passe (apparaît lorsque l’utilisateur s’identifie pour l’informer que son mot de passe va bientôt expirer).

/* *************************************************************** */
/* Popup de déconnexion */
/* *************************************************************** */
.ctxsui-messagebox .messagebox-title {
color:black;
font-weight: bold;
}

/* *************************************************************** */
/* Popup d'AFK */
/* *************************************************************** */
.messagebox-title h1 {
color:black;
font-weight: bold;
}

/* *************************************************************** */
/* Popup d'inactivité */
/* *************************************************************** */
.dialogBoxOverlay .cloud {
background-image:none;
}

.ctxsui-messagebox .messagebox-body {
color:black;
font-weight: bold;
}

/* *************************************************************** */
/* Popup Changement de mot de passe */
/* *************************************************************** */
form.credentialform h1 {
font-size:19px;
padding-bottom:20px;
color:black;
font-weight: bold;
}

/* *************************************************************** */
/* Popup de changement de mot de passe quand il va expirer */
/* *************************************************************** */
#changePasswordHeader.label.title {
color:black;
font-weight:bold;
}

Globalement, on personnalise pour chaque popup le titre ou le type de style CSS qui est appliqué. On supprime le « vert » qui correspond au design de base de StoreFront et on le bascule en noir. A vous bien sûr d’adapter en fonction du design que vous souhaitez.

Exemple du popup de déconnexion.

Comme vous le voyez pour bien faire, il faudrait également changer la couleur du fond mais il s’agit d’un fichier image qui doit être modifié (via Photoshop ou autre).

Comme pour la Web Interface, vous pouvez toujours activer les Pre-Login et Post-Login messages. Je ne vais pas détailler le fonctionnement car il est très similaire à ce que nous avons vu précédemment. Vous avez à chaque fois une partie JavaScript et une partie CSS à ajouter dans chacun des fichiers. L’activation de ces messages est également détaillée sur le blog officiel Citrix à l’adresse suivante .

ETAPE 3 : Conversion du portail StoreFront en Web Interface (dans une certaine mesure)

Dans cette troisième étape, nous allons nous attarder sur la façon dont il est possible de configurer StoreFront de manière à le rapprocher au maximum du fonctionnement de la Web Interface.

Dans StoreFront, nous disposons désormais d’un panneau latéral gauche qui présente, éventuellement par catégorie, l’ensemble des applications disponibles pour l’utilisateur concerné. Lorsque l’utilisateur clique sur l’application celle-ci est ajoutée dans son espace personnel au centre de l’écran.

Pour exécuter une application, l’utilisateur peut donc cliquez sur l’application dans le panneau latéral gauche ou bien directement au centre de la fenêtre qui recense d’une certaine façon toutes les applications favorites (ou en tout cas souvent utilisées) de l’utilisateur.

Enfin, l’utilisateur peut à tout moment supprimer une application de la partie centrale en cliquant sur la croix située sur le coin supérieur gauche de l’application ou en passant par le menu contextuel de l’application.

Ces fonctionnalités n’étant pas présentes dans la Web Interface. Nous allons imaginer que nous souhaitons les supprimer.

Pour supprimer le panneau latéral gauche, ajoutez les lignes suivantes dans le fichier CSS (sur lequel nous avons déjà travaillé précédemment) :

/* *************************************************************** */
/* Suppression de la barre latérale gauche */
/* *************************************************************** */
#resources-navigationbar {
display:none;
}

</div>
<div>
<pre>/* *************************************************************** */
/* Suppression de la croix sur les icônes ainsi que du menu contextuel */
/* *************************************************************** */
.myapps-removehotspot {
display:none;
}


#contextmenu {
display:none;
}

Dans StoreFront 2.0 ou StoreFront 2.1, vous pouvez faire en sorte d’afficher par défaut les applications. Cela signifie qu’une fois l’application publiée, elle apparaît automatiquement au centre, sans passer par le panneau latéral. Et si nous supprimons, le menu contextuel, la croix et le panneau latéral, il n’est alors plus possible de supprimer l’application de la partie centrale.

Pour arriver à ce résultat, lors de la publication de l’application, vous devez renseigner le mot clé « Auto » comme indiqué dans la capture d’écran ci-dessous :

De cette manière l’application est automatiquement publiée au centre de l’espace de l’utilisateur et celui-ci ne peut pas la supprimer.

Note : Dans la nouvelle version de StoreFront 2.5, Citrix a ajouté un nouveau mot clé qui permet d’obtenir ce comportement sans passer par du code CSS. Pour cela, il vous suffit d’utiliser le mot clé « MANDATORY ».

Après toutes ces modifications, nous arrivons finalement à l’aperçu suivant pour les deux pages.

Nous disposons maintenant d’un StoreFront qui se rapproche finalement davantage de la Web Interface.

Bien sûr, il ne s’agit ici que d’une personnalisation grossière que vous devrez bien entendu adapter en fonction de vos besoins tant sur les couleurs que sur les différents ajouts d’informations que nous avons réalisé précédemment.

ETAPE 4 : Pour aller plus loin

Lors du chargement de la mire d’identification du portail StoreFront, le chargement de la page peut être assez lent, selon les navigateurs et/ou les versions des navigateurs et/ou du client Citrix présent sur le poste de travail de l’utilisateur. Cette étape est d’autant plus inutile dans les cas où la gestion du client Citrix est effectuée via un outil de déploiement.

Pour désactiver la détection du client Citrix dans le portail StoreFront, modifiez le fichier suivant :

• C:\inetpub\wwwroot\Citrix\StoreWeb\web.config et aux alentours de la ligne 46 ou effectuez une recherché sur le mot clé « pluginassistant ».

Repérez la ligne suivante :

<pluginAssistant enabled= »true » upgradeAtLogin= »false »>

Et modifiez-la-en :

<pluginAssistant enabled= »false » upgradeAtLogin= »false »>

Autre point important, dans la Web Interface, il était possible d’ajouter un sélecteur de domaine dans le cas d’utilisateurs étant situés sur différents domaines d’une même forêt AD. Pour une raison étrange, ce réglage est complètement occulté dans StoreFront. Pour afficher ce menu de sélection du domaine, vous devez modifier le fichier suivant :

• C:\inetpub\wwwroot\Citrix\Authentication\web.config

Autour de la ligne 217, répérez le terme « hidedomainField » et passez le paramètre de true à false.

Actualisez la page (sans oublier de nettoyer le cache de votre navigateur) et vous devriez désormais avoir le sélecteur de domaine.

Et voilà, c’est terminé pour la personnalisation de StoreFront. Il existe bien sûr d’autres paramètres et bien d’autres choses qu’il est possible de modifier. Concernant le design, je n’ai pas cherché à faire quelque chose de joli il s’agissait ici d’avoir un exemple sur lequel travaillé. 😉

Si vous avez des questions, n’hésitez pas ! 🙂

PS : Comme d’habitude, pour vous permettre de reproduire de votre côté, ci-joint les fichiers et l’image que j’ai utilisé pour cet article. Disponible en suivant ce lien : CITRIX-Custo-StoreFront.