support clients /

Création de thème personnalisé en SAS® 9.2

La personnalisation du thème du Portail SAS® avec les spécificités de votre organisation est un point fréquemment demandé.
Cet article se propose de détailler les étapes à suivre pour personnaliser la bannière du Portail SAS®. Nous verrons que le thème est également appliqué à l'application SAS® Web Report Studio. En effet, la grande nouveauté en version SAS® 9.2 est de pouvoir appliquer un thème aux différentes applications Web et non uniquement au Portail comme en version SAS® 9.1.3.

Voici le thème par défaut appliqué au portail   SAS®  


Voici un exemple de thème personnalisé  

Les étapes à suivre pour personnaliser la bannière

Etape 1 : Définition de la mise en forme du Thème

On identifie les composants (Component keys) et les images (Images Keys) que l’on souhaite modifier  à partir du fichier index.html présent sous:
$config_directory \Lev1\Web\Utilities\SASThemeExtensions\specs\Default, dans le fichier il faut cliquer sur le lien banner (bannière)

Les composants :


Image1 : Component Keys

Les images :

Image2 : Image Keys

On identifie également les couleurs que l'on souhaite appliquer sur ces composants à partir du fichier colorPalette.html présent sous:
$config\Lev1\Web\Utilities\SASThemeExtensions\specs\Default\html\

Les couleurs :


Image3 : Palette de Couleurs disponibles

Dans l’exemple figurant en début d’article :

  • La couleur de fond de la bannière (1ère ligne du tableau dans Image1 ci-dessus) est représentée par le composant : Banner_Background_Color. 

Nous allons modifier le context value de ce composant à ${Color58} au lieu de ${Color44}.

  • La couleur indiquant l'utilisateur connecté au portail (7ème ligne du tableau dans Image1  ci-dessus) est représentée par le composant  Banner_UtilityBar_Navigation_Links_Text_Color.  

Nous allons modifier le context value de ce composant de  ${Color24} à  ${Color23}.

  • Le logo SAS  (correspond à la 3ème ligne dans l’Image2  ci-dessus) est représenté par l'image logo.gif.  

        Nous allons modifier cette image.

  • La bannière est représentée par l'image BannerBackground.gif (correspond à la 4ème ligne Image 2 ci-dessus). 

    Nous allons modifier cette image.

Etape 2 : Création du nouveau thème

On crée une copie du thème par défaut en exécutant le script NewTheme présent sous :
$config\lev1\Web\Utilities\SASThemeExtensions

Il existe deux versions de ce script : une version Windows et une version Unix.
Dans cet article, nous utiliserons la version Windows.

Depuis une commande DOS, on exécute:
 $config\Lev1\Web\Utilities\SASThemeExtensions\NewTheme.bat montheme true

Le nouveau thème est créé sous :  
$config\Lev1\Web\Utilities\SASThemeExtensions\themes\montheme

Ce chemin sera noté NewTheme_home dans le reste du document.

Etape 3 :   Mise à jour des fichiers du nouveau thème

a) Modification des couleurs

Cette étape va nous permettre de modifier la couleur de fond de la bannière et celle de l'utilisateur connecté au portail.
On identifie le fichier contenant les couleurs des composants (context file)
(Cf  copie d’écran ci-dessous) 

Dans notre exemple :
- On édite le contenu du fichier components.montheme.vtl présent sous :
$Config\Lev1\Web\Utilities\SASThemeExtensions\themes\Montheme\Velocity\Stylesheets\Components\contexts\themes\montheme\

- On fait une recherche des mots Banner_Background_Color et  Banner_UtilityBar_Navigation_Links_Text_Color

- On modifie leurs valeurs 

#------------------------------------------------------------------------------------
# Banner component - Common banner used in various SAS web applications
#------------------------------------------------------------------------------------

Banner_Background_Color

  • Banner_Background_Color=${Color44}  =>  ${Color58} 

Banner_Title_Text_Color=${Color24}
# The bullet between title and secondary title
Banner_Title_Separator_Color=${Color35}
Banner_SecondaryTitle_Text_Color=${Color24}

# The UtilityBar is the top line of the banner which
# contains navigation links (return to portal), user identification area and
# a set of menus for logging off, preferences, etc...
Banner_UtilityBar_Background_Color=${Color49}
Banner_UtilityBar_UserRole_Text_Color=${Color14}
Banner_UtilityBar_Navigation_Links_Text_Color=${Color24}  => ${Color23}

b)  Pour les images

Elles sont stockées dans l'un des trois sous-répertoires: Common, Components, WRS du répertoire:  NewTheme_home\themes\nouveau_theme\images\

Les propriétés de chaque image sont définies dans des fichiers de configuration nommés « Theme Descriptors »

Les “Theme Descriptors” sont situés sous: NewTheme_home \ Velocity \ ThemeDescriptors \ custom \  montheme

Concernant le logo SAS, on fait une recherche de Logo.gif au niveau :
NewTheme_home \ themes \ nouveau_theme \ image

On trouve l'image stockée sous :
$config\Lev1\Web\Utilities\SASThemeExtensions\thees\montheme\thees\montheme\images\Components

Si l'image est de même format (gif), de même dimension (62x24Pixels) et porte le même nom, il suffit de remplacer l'ancienne image par la nouvelle.
Attention : si vous avez besoin de changer au moins l’un des trois paramètres (taille, nom, format de l’image) il faut modifier le descripteur du thème.
 
Dans notre exemple :
- On remplace l’image logo.gif présent sous : themes\theme-name\images\Components
par monlogo.jpg, de taille 142x107 pixels
- On modifie le fichier ComponentsThemes.vtl présent sous
NewTheme_home \ Velocity \ ThemeDescriptors \ custom \ montheme

Le fichier avant modification :
62" height="24" file="logo.gif"/>

Le fichier après modification :
142" height="107" file="monlogo.jpg"/>

On remplace également l’image BannerBackground.gif présente sous :
C:\Program F iles\SAS_9.2\Config\Lev1\Web\Utilities\SASThemeExtensions\ themes\montheme\themes\montheme\images\Components\

Etape 4 : Recréation de l’application SAS THEME

Après avoir modifié les couleurs, images du nouveau thème, il faut recréer l’application SAS Thème et la déployer dans  le serveur d’applications (JBOSS, Websphere ou Weblogic).
Pour cela, il faut lancer SAS® Deployment Manager (SDM) en exécutant le script présent sous:
\SASDeploymentManager\9.2\config.exe 





 

Un nouveau sas.themes.ear est créé sous: $config\Lev1\Web\Staging
Il faut ensuite le redéployer en suivant les instructions propres à votre serveur d'applications.
Pour cela, il faut suivre les instructions présentes sous : http://support.sas.com/documentation/cdl/en/biwaag/63536/HTML/default/viewer.htm#a003308992.htm 
Et redémarrer, dans l'ordre, les Remotes Services puis votre serveur d'applications. 

Etape 5 : Utilisation du nouveau thème

Nous vérifions que le nouveau thème (montheme) est bien disponible dans le portail (pour cela il faut aller dans outils => Préférences et vérifier que le nouveau thème apparait bien) 

Vous pouvez également changer le thème par défaut pour toutes les applications EBI SAS en utilisant la SAS® Management Console. Il faut cliquer sur Gestion des applications -> Gestionnaire de configuration ->SAS application  Infrastructure -> Propriétés et là, on peut modifier la valeur du thème par défaut dans l'onglet Paramètres.

On vérifie que le thème est bien appliqué dans SAS® Web Report Studio :

Pour plus d’informations concernant la création de nouveau thème en SAS® 9.2, consulter le document  SAS® 9.2 Intelligence Platform Web Application Administration Guide

Aurélie GENTIL
Consultant Support Clients  - SAS France