Création / Modification
Pour la modification d'un tableau de bord, quel que soit son type, il suffit d'y simple-cliquer depuis la liste des tableaux de bord, il s'affichera alors dans la zone centrale.
L'affichage se compose en 2 parties
Barre d'informations/d'édition
Affichage du tableau de bord

Remarque
Seul le propriétaire d'un tableau de bord ou l’administrateur de Sentinelle peuvent éditer le tableau de bord
Barre d'informations
Cette partie contient les informations concernant votre tableau de bord. Dans l'illustration ci dessus :
- Nouveau : désigne le nom du tableau de bord (valeur par défaut) ;
- Description : est la description du tableau de bord (valeur par défaut) ;
- ref=316 : donne l'identifiant interne du tableau de bord, cet identifiant pourra nous être utile lorsque nous verrons l'inclusion des tableaux de bord.
- lien direct : un clic sur ce lien ouvrira le tableau de bord dans un nouvel onglet de votre navigateur. Le tableau s'affichera ainsi sans le "contexte" Sentinelle. Ce lien direct peut être utile si vous souhaitez communiquer rapidement la visualisation d'un tableau de bord pour un établissement donné à vos collaborateurs.
Note : l'accès au tableau de bord avec le lien direct nécessitera une authentification ou l'utilisation du mode 'profil invité'
Pour éditer le tableau de bord, il suffit de cliquer sur le bouton .
Édition
En mode édition, les champs "Nom" et "Description" deviennent éditables.
Une barre d'outils compléte la partie édition :
Cette barre d'édition propose des outils pour la création d'une page HTML. Le composante utilisée dans Sentinelle est le très populaire "CKEditor", éditeur de texte open source de type WYSIWYG pouvant servir pour la création de page Web.
Eh oui, un tableau de bord n'est rien d'autre qu'une page Web !
L'objectif n'est pas ici de détailler l'utilisation de ce composant, vous trouverez plein de ressources sur Internet traitant de ce sujet. Attachons-nous plutôt à décrire le principe de base de la création d'un tableau de bord.
Vous noterez également l'apparition de l'arborescence des composantes à droite.
Ajouter des composantes
Vous pouvez taper directement le nom de la composante dans l'éditeur ou vous aider de l'arborescence à droite pour les ajouter. En effet il suffit de double-cliquer sur la composante voulue dans l’arborescence pour la faire apparaître dans la zone d'édition.
Toute la puissance de la syntaxe évoquée au chapitre 'Expressions' est valable ici.
Truc & astuce:format
La fonction format d'une composante permet d'avoir un rendu graphique de la composante.
Par exemple le code suivant :
HORUS/usr : {HORUS./usr:format} {HORUS./usr:percent}%<br>
AMON DNS : {AMON.dns:format}
produira cet affichage :
Example
On notera au passage l'utilisation de la fonction percent sur une composante de type capacité disque.
Voir la source
Si vous souhaitez voir le code HTML que produit l'éditeur WYSIWYG, vous pouvez cliquer sur le bouton .
Vous noterez que l'éditeur WYSIWYG adaptera systématiquement votre code pour qu'il puisse correctement formater son affichage.
- L'avantage de cet éditeur, c'est qu'il permet au néophyte du code HTML de facilement produire une présentation correcte avec des éléments riches tels que : tableaux, styles, polices, couleurs, etc.
- L'inconvénient, c'est qu'il ne permet pas de scripter ou de faire du formatage un peu plus évolué nécessitant l'utilisation d'un balisage HTML/CSS spécifique. Eh oui, l'éditeur WYSIWYG bien que complexe ne permet pas tout. Pour toutes les personnes qui souhaitent avoir des tableaux de bord évolués, je vous conseille de passer par le mode "source"", ou mieux encore par le mode "raw" (= brut) que nous verrons juste après.
Sur un nouveau tableau de bord, vous noterez trois balises:
- style : cette balise vous permettra d'y définir à l’intérieur votre propre style CSS. Le sélecteur du css, est l'id qui est généré dans la balise div suivante.
- div : une balise div avec un id généré aléatoirement préfixé par votre uid. C'est à l'intérieur de cette div que seront les éléments de votre tableau de bord.
- script : cette balise vous permettra d'y définir vos scripts pour mettre en forme dynamiquement votre tableau de bord ou pour effectuer des actions.
Mode RAW
Si vous êtes un puriste du codage HTML et que l’éditeur WYSIWYG est plus pour vous un inconvénient qu'une aide, vous pouvez vous en passer en définissant votre tableau de bord en mode "raw".
ProcédurePassage en mode RAW
Cliquez sur
pour éditer votre tableau de bord.
Cliquez sur le bouton source, pour voir la source.
Ajoutez le commentaire suivant à la première ligne :
<!-- raw -->
Cliquez de nouveau sur source, pour annuler le mode source.
Cliquez sur
pour enregistrer la modification.
Cliquez sur
.
Styles
Comme mentionné un peu plus haut, il est possible de définir votre propre style pour votre tableau de bord. Il est cependant nécessaire d'avoir quelques notions de CSS3. Internet foisonne de tutoriels sur les bases du CSS (un exemple[1]).
Les styles doivent être mis dans des balises <style>.
Afin de ne pas venir redéfinir un style déjà présent dans Sentinelle, je préconise de toujours définir votre style en précisant le sélecteur d'ID de votre balise div.
Si votre div a l'id "cleonInfosPlusRouteurs", vos styles devront être préfixés par "#cleonInfosPlusRouteurs".
Scripts
Il est possible d'utiliser toute la puissance du javascript pour mettre en forme dynamiquement vos tableaux de bord. Sentinelle est fourni avec les librairies suivantes :
- jquery et jqueryui : nous détaillerons quelques exemples dans la partie 'Scripts et Fonctions' ;
- hightcharts, d3js, jquery.sparkline : pour les graphiques, que nous détaillerons dans la partie 'Graphiques'.
Les scripts doivent être mis dans des balises <script>.