support clients /

Les sorties HTML avec le Tagset TableEditor

Le nouveau tagset TableEditor permet de créer des tableaux HTML attractifs. L'ODS offre ainsi de nouvelles fonctionnalités qui vont faciliter le travail tantôt du créateur de rapport (options plus simples d'utilisation que celles de la PROC TEMPLATE), tantôt l'utilisateur final (filtres, gel des en-têtes de colonnes et/ou de lignes, export vers Excel etc).

Cet article présente aux travers d'exemples les possibilités du tagset, les différentes options et l'installation du tagset.

Présentation

Le tagset TableEditor utilise l'activeX ScriptX pour personnaliser les pages HTML qu'il génère. Disponible uniquement avec Internet Explorer, il utilise les langages HTML et XML, les feuilles de styles et le JavaScript.
Aujourd'hui doté de plus de 90 options, il devrait encore s'enrichir prochainement. Les options portent soit sur les propriétés de la page, soit sur le tableau. Il n'y a pas d'option spécifique aux graphiques.

On distingue 7 familles d'options, que nous allons décliner dans les paragraphes suivants :

Dans les exemples donnés, seule l'instruction et les options ODS sont mentionnées. Si vous souhaitez consulter le code complet, vous pouvez télécharger le code et les résultats.

Syntaxe

La syntaxe type :

ods tagsets.tableeditor file="CheminEtNom.html" style=science options(option1='val' option2='val');

…instructions générant une sortie : procédures PRINT, TABULATE, FREQ etc …

ods tagsets.tableeditor close;

Si le chemin du fichier n'est pas spécifié (FILE), alors il sera créé sous C:\Documents and Settings\_identifiant_\.
Si le nom du fichier n'est pas spécifié, alors il sera généré sous la forme sashtml.htm (puis sashtml2.htm, sashtml3.htm … pour les exécutions suivantes).
Si le style n'est pas spécifié, alors le style sasuser.default sera utilisé.

Les options de style de la page et du tableau

Les options

  • Choix des couleurs pour la trame de fond : il est possible d'alterner la couleur une ligne sur deux (options BANNER_COLOR_EVEN et BANNER_COLOR_ODD ) et/ou une colonne sur deux (COL_COLOR_EVEN et COL_COLOR_ODD). Cette fonctionnalité est également  réalisable via la procédure TEMPLATE, cf . FAQ 3597 .
  • Grille du tableau : choix de la couleur (GRIDLINE_COLOR), ou choix de ne pas afficher de grille (GRIDLINE)
  • Ajout et positionnement d'une image au-dessus du tableau (IMAGE_PATH et IMAGE_JUST)
  • Choix de la police de caractère de toute la page (FONTFAMILY)
Ce premier exemple montre l'alternance des couleurs des colonnes pour en faciliter la lecture :
 

Pour la page HTML ci-dessus, les options utilisées sont :

  1. la couleur de la trame de fond à afficher une colonne sur deux
  2. la couleur du fond de la page
  3. la police


ods tagsets.tableeditor file="col_color_even.html"
options ( col_color_even="99FF66" 
col_color_odd="99CCFF"
background_color="FFFFCC"
fontfamily="Arial" );

Ce deuxième exemple montre l'alternance des couleurs des lignes :

Pour la page HTML ci-dessus, les options utilisées sont :

  1. la couleur de la trame de fond à afficher une ligne sur deux
  2. la couleur du fond de la page
  3. la police

 


ods tagsets.tableeditor file="!temp\banner_color.html"
options ( banner_color_even="FFCCFF" 
banner_color_odd="CC99FF"
background_color="FFFFCC"
fontfamily="Arial" );

L'export des données

Les options

  • Personnalisations possibles pour les exports vers Excel : gel des colonnes (EXCEL_FROZEN_HEADERS), nom des feuilles (SHEET_NAME), boite de dialogue (EXCEL_SHEET_PROMPT, EXCEL_SAVE_PROMPT, EXCEL_SAVE_DIALOG, EXCEL_SAVE_FILE), orientation (EXCEL_ORIENTATION), filtres (EXCEL_AUTOFILTERS), zoom (EXCEL_SCALE, EXCEL_ZOOM), création ou mise à jour (UPDATE_TARGET) …
  • Format d'export (FILE_FORMAT) : .xls, .txt, .csv, .doc, .xml, .slk
  • Gestion des pivots

Illustration

Lorsque l'on utilise des options d'export, un bouton « Export » est ajouté à la page HTML :
Une fois que l'on a cliqué sur ce bouton, est que l'on a éventuellement répondu aux boîtes de dialogue pour sauvegarder le fichier Excel, alors la feuille Excel se présente comme ceci :

Pour la page HTML ci-dessus, les options utilisées sont :

  1. l'ajout du bouton « export » sur la page
  2. ajout des filtres dans la feuille Excel
  3. gel des colonnes dans la feuille Excel
  4. nom de la feuille

 


ods tagsets.tableeditor file="export.html" style=styles.analysis
options ( excel_save_dialog="yes"
excel_autofilter="yes"
excel_frozen_header="yes"
sheet_name="class"  )  ;

Les options d'affichage

Les options

  • Autoriser le glisser/lâcher (DRAG) permet de copier le texte sélectionné sur la page et le coller dans un fichier texte simplement par la souris - Zoom sur l'ensemble de la page (ZOOM) ou sur un choix de tableaux (TABLE_ZOOM)
  • Tri des colonnes en cliquant sur l'intitulé (SORT). Personnalisation des colonnes pouvant être triées (SORT_ARROW, SORT_IMAGE, HEADER_UNDERLINE) - Ajout d'une couleur sur l'intitulé des colonnes (DESCRIBE) pour indiquer leur type (réalisable via la procédure TEMPATE, cf. FAQ 3223).
  • Autoriser l'édition de la page (DESIGN_MODE)
  • Ajout de filtres (AUTOFILTER) sur les colonnes voulues (FILTER_COLS)
  • Choix de la feuille de style à appliquer (STYLE_SWITCH)

Illustration

Dans cet exemple, le type des colonnes est mis en avant, les colonnes peuvent être triées en cliquant sur l'intitulé (ici le tableau est trié par l'âge), et un menu a été ajouté au sein même de la page pour effectuer des actions :

Pour la page HTML ci-dessus, les options utilisées sont :

  1. le glisser-lâcher
  2. le tri des colonnes
  3. ajout d'un signe sur les en-têtes de colonnes pour donner le type de la variable
  4. ajout d'un menu pour sauver ou imprimer le fichier

 


ods tagsets.tableeditor file="Sort.html" style=styles.analysis
 options ( drag="yes"
 sort="yes"
 describe="yes"
print_dialog="yes" )  ; 

Dans ce second exemple, un filtre est ajouté aux 2 premières colonnes. Ici, on visualise les données des jeunes filles :

Pour la page HTML ci-dessus, les options utilisées sont :

  1. l'ajout de filtres
  2. sélection des colonnes où le filtre est actif

 


ods tagsets.tableeditor file="!temp\Filtres.html" style=styles.statdoc
options(autofilter="yes" filter_cols="1,2" )  ;

A noter : les options de filtres fonctionnent mal avec le tagset de mars 2007. Elles sont corrigées dans la prochaine version du tagset.

Les options de position et de mise en forme du tableau

Les options

  • Taille (PAGEHEIGHT, PAGEWIDTH) et couleur de l'ascenseur (SCROLLBAR_COLOR) : en spécifiant une taille, le tableau apparaît dans un encadré doté d'un ascenseur de la taille choisie.
  • Gel des en-têtes de colonnes (FROZEN_HEADERS) et/ou des lignes (FROZEN_ROWHEADERS) : lors de l'impression, les en-têtes de colonnes et/ou de lignes seront imprimées sur chaque page

Illustration

Dans cette page, le tableau est dans un encadré ayant son propre ascenseur. L'en-tête et la grille du tableau sont en vert. L'impression se fera en paysage, et les en-têtes de colonnes seront répétés sur chaque page.

L'aperçu avant impression (les en-têtes de colonnes sont bien répétées sur chaque page) :

A noter : comme pour l'ODS HTML classique, la trame de fond n'est pas imprimée. De plus, le rendu dépend de la configuration de l'imprimante.

Pour la page HTML ci-dessus, les options utilisées sont :

  1. la couleur du fond de la page
  2. la police
  3. la trame de fond des en-têtes de colonne
  4. la couleur de la grille du tableau
  5. le gel des en-têtes de colonnes
  6. le mode paysage à l'impression
  7. la hauteur du tableau avec ascenseur

 


ods tagsets.tableeditor file="!temp\frozen_headers.html"  
options (background_color="white"
fontfamily="Arial"
header_bcolor="66CC99" 

gridline_color="66CC99" 
frozen_headers="yes"
orientation="landscape"
pageheight="12 cm" );

Les options de mise en page

Les options

  • Les options de mise en page permettent de personnaliser l'en-tête (PRINT_HEADER), le pied-de-page (PRINT_FOOTER), l'orientation de la page à l'impression (ORIENTATION), les marges (LEFT_MARGIN, RIGHT_MARGIN, TOP_MARGIN, BOTTOM_MARGIN), la réduction ou l'agrandissement à l'impression (PRINT_ZOOM, FIT2PAGE)

Illustration

La page HTML a été créée avec une en-tête et un pied de page, en mode portrait. Un zoom permet de s'assurer que le tableau ne sera pas tronqué en largeur à l'impression. L'aperçu avant impression (image scindée en 2) :

Pour la page HTML ci-dessus, les options utilisées sont :

  1. l'en-tête de la page
  2. le pied-de-page
  3. le mode portrait pour l'impression
  4. un zoom sur le tableau

 


ods tagsets.tableeditor file="Page_Setup.html" style=science
options (Print_Header='Généré le &d' 
Print_Footer='&b&b Page &p sur &P'
orientation="portrait"
print_zoom="0.75" ); 

La table des matières

La table des matières peut être personnalisée avec l'ajout d'images (OPEN_IMAGE_PATH, CLOSED_IMAGE_PATH, LEAF_IMAGE_PATH), le choix de la trame de fond (TOC_BACKGROUND), ou encore l'ajout d'un bouton « Impression » pour le corps de la page (TOC_PRINT)

Les messages d'information

D'autres options permettent :

  • L'ajout de fichier dans le corps de la page de type HTML, RTF ou PDF (INCLUDE)
  • Le choix du titre de la fenêtre (WINDOW_TITLE)
  • L'affichage d'un message d'attente lors du chargement de la page (LOAD_MSG),
  • L'affichage d'un message d'avertissement une fois la table chargée (ALERT_TEXT).

Pré-requis et installation

La personne qui créée la page HTML doit utiliser SAS®9. Pour installer le tagset, les étapes à suivre sont :

  1. Récupérer le tagset: télécharger le fichier compressé contenant le fichier tableeditor.pl 
  2. Ouvrez le tableeditor.pl depuis la fenêtre Enhanced Editor depuis SAS et soumettre le code (PROC TEMPLATE).

La personne qui consulte la page n'a pas d'installation à réaliser, mais doit respecter les pré-requis suivants :

  1. Utiliser Internet Explorer
  2. Autoriser l'exécution d'ActiveX :
    1. IE > Outils > Options > Sécurité > Personnaliser le niveau : cocher « Exécuter les contrôles ActiveX et les plugins »
    2. Sous Windows XP, lorsqu'une barre d'avertissement indique « Pour vous aider à protéger votre ordinateur, Internet Explorer a restreint l'affichage du contenu actif de ce fichier, qui pourrait accéder à votre ordinateur. », il faut cliquer sur la barre et choisir « Autoriser le contenu bloqué », puis valider le choix.

Liens utiles

Présentation, installation et documentation complète du tagset TableEditor

Liste des couleurs : TS-688 "Defining Colors using Hex Values" 

L'activeX ScriptX

L'activeX TableEditor devrait prochainement s'enrichir de nouvelles fonctionnalités, telles que la génération de diapositives Powerpoint ou encore le masquage de colonne. Les filtres automatiques seront améliorés. N'hésitez pas à consulter le site http://support.sas.com/rnd/base/ods/odsmarkup/index.html pour vous tenir informé !


Géraldine Deschamps
 Consultant Support Clients - SAS France