Les tableaux sont composés de colonnes configurables et peuvent répertorier les valeurs d'objets SKOOR ou les données provenant d'une source de données externe.

Chaque ligne d'un tableau correspond à un seul objet SKOOR ou à une ligne dans la source de données externe et peut répertorier ses différentes valeurs.

Filtres

Pour chaque colonne, un filtre peut être défini dans la boîte de dialogue de filtrage ou dans l'en-tête de la colonne s'il est configuré dans le widget. Il peut être utilisé pour filtrer les lignes du tableau afin qu'elles correspondent à une chaîne de texte spécifique ou pour n'afficher que les lignes qui correspondent à une valeur ou à un texte actuellement répertorié à l'aide d'une liste déroulante. La boîte de dialogue de filtrage offre une interface intuitive permettant de créer facilement des filtres complexes. Dans la section « filtres en ligne », vous pouvez apprendre à configurer les filtres en ligne hérités qui s'affichent dans l'en-tête.

Dans la boîte de dialogue du filtre : sélectionnez facilement des opérateurs tels que « contient », « est égal à », « est supérieur à », etc. et saisissez des valeurs sans avoir à mémoriser la syntaxe :

• Filtres de plage : spécifiquement pour les colonnes numériques et de date, vous pouvez facilement définir des plages (De...À)

• Sélecteurs de date et d'heure : les sélecteurs intégrés pour les colonnes de date et d'horodatage facilitent la sélection des plages de temps.

• Sélection multiple : sélectionnez plusieurs valeurs dans une liste pour les requêtes « IN ».

Caractères génériques

Tous les filtres de texte prennent en charge l'* des caractères génériques. Cela permet de rechercher des parties d'une chaîne.

• Dev*

• Dev*ment

• *ment

• 100*

• 2022*

Colonnes contenant des nombres ou des dates

• IN(x,y,z)
  Spécifiez une seule valeur ou plusieurs valeurs. Les résultats ne comprennent que les enregistrements dont les données de la colonne correspondent à la valeur du filtre.

• NOT(IN(x,y,z))
  Inversion de « in

• BETWEEN(x,y)      
  Spécifiez deux valeurs. Le résultat ne comprend que les enregistrements dont les données de la colonne se situent entre les deux valeurs données.

• >
  Spécifiez une seule valeur. Les résultats ne comprennent que les enregistrements dont les données de la colonne sont supérieures à la valeur du filtre.

• <
  Spécifiez une seule valeur. Les résultats ne comprennent que les enregistrements dont les données de la colonne sont inférieures à la valeur du filtre.

• >=
  Spécifiez une seule valeur ou plusieurs valeurs. Les résultats ne comprennent que les enregistrements dont les données de la colonne sont supérieures ou égales à la valeur du filtre.

• <= 
  Spécifiez une seule valeur ou plusieurs valeurs. Les résultats ne comprennent que les enregistrements dont les données de la colonne sont inférieures ou égales à la valeur du filtre.

Colonnes contenant du texte

• AND(x,y,z)
  Spécifiez deux chaînes ou caractères ou plus. Les résultats incluent uniquement les enregistrements contenant toutes les chaînes spécifiées.

• OR(x,y,z)
  Spécifiez deux chaînes ou caractères ou plus. Les résultats incluent uniquement les enregistrements contenant au moins une des chaînes spécifiées.

• NOT(x)
  Spécifiez un caractère ou une chaîne. Les résultats ne comprennent que les enregistrements ne contenant aucune occurrence de la chaîne donnée.

Les filtres de texte peuvent également être imbriqués.

Réinitialiser les filtres

Tous les filtres peuvent être réinitialisés (restauration des valeurs par défaut) ou effacés à l'aide du lien correspondant situé au-dessus du tableau ou dans la boîte de dialogue du filtre :

Filtres en ligne et valeurs par défaut

Les filtres peuvent être affichés en ligne dans l'en-tête de colonne si l'option « Afficher dans l'en-tête » est cochée dans la configuration de la colonne, qui affiche également les champs de configuration hérités « correspondance de texte » et « filtre par défaut ».

Pour les filtres affichés dans la boîte de dialogue de filtrage, un champ de filtre par défaut plus intuitif est disponible.

En-têtes et colonnes fixes

Un nombre fixe d'en-têtes et de colonnes peut être configuré dans les paramètres du tableau :

Agrégation et sous-agrégation

Les lignes contenant des valeurs numériques peuvent être agrégées (somme, moyenne, minimum, maximum). De plus, les valeurs peuvent être regroupées par valeurs de colonne et agrégées à nouveau :

Types de colonnes

Les types de colonnes suivants peuvent être configurés :

Modification du widget Tableau :

Principes de base

La configuration du tableau est divisée en deux parties.

• Dans la première partie, les paramètres généraux du tableau sont configurés, tels que l'en-tête du tableau, le nombre de lignes par page ou les fonctions d'agrégation

• La deuxième partie, la section Source de données, concerne les données réelles du tableau, principalement générées par des objets SKOOR ou stockées dans une base de données. Dans cette section, les données peuvent être chargées, filtrées, enrichies par des superpositions, etc.

  • Les objets SKOOR peuvent être chargés à l'aide d'un filtre d'objets. Chaque objet généré par le filtre donne lieu à une ligne dans le tableau.

  • Les bases de données peuvent être interrogées à l'aide du type de recherche Source de données (tableaux ou vues) ou Requête de données (SQL).

Paramètres du tableau

Paramètre	Description
Taille de la page	Nombre de lignes visibles par page. S'il y a plus de lignes, un sélecteur de page s'affiche.
Afficher toutes les pages dans le rapport	Si cette option n'est pas cochée, seule la première page d'un tableau paginé sera visible dans les rapports.
Afficher les lignes vides	Afficher les lignes vides si le nombre de lignes est inférieur à la taille de la page.
Afficher l'en-tête	Afficher ou masquer l'en-tête du tableau. Veuillez noter que les filtres de colonne par défaut sont toujours utilisés, même si une colonne ou l'ensemble de l'en-tête est masqué
En-tête fixe	L'en-tête reste visible lorsque les lignes sont défilées verticalement. Cela nécessite généralement une hauteur de widget configurée pour permettre le défilement à l'intérieur.
Couleur d'arrière-plan alternée des lignes	Les lignes adjacentes sont affichées dans des couleurs légèrement différentes afin d'améliorer la lisibilité.
Nombre de colonnes fixes	Nombre de colonnes à partir de la gauche qui resteront visibles lors du défilement horizontal.
Ligne agrégée	Ajoute une ligne avec des valeurs agrégées au tableau. S'applique uniquement aux colonnes numériques pour lesquelles l'option Afficher la valeur agrégée est activée.
Position de la ligne agrégée	Affiche les valeurs agrégées en haut ou en bas du tableau
Nombre de colonnes sous-agrégées	Ajoute une ligne d'agrégation basée sur une ou plusieurs colonnes. Si le nombre de colonnes est défini sur 2, le titre de la ligne d'agrégation sera ajouté à la troisième colonne, suivi des valeurs agrégées Les titres d'agrégation tels que Sous-total ou Moyenne ne seront pas ajoutés aux colonnes de type numérique ou date L'agrégation peut être activée ou désactivée dans la configuration des colonnes
Afficher les sous-agrégats imbriqués	Ajoute un sous-total sur un groupe de valeurs agrégées. L'exemple suivant montre le total de toutes les succursales plus le sous-total par succursale et par département
Conserver les filtres	Si l'option Conserver les filtres est activée, les filtres de colonne dynamiques ne sont pas effacés lors d'un changement de page.
Autoriser l'exportation	Les données peuvent être exportées aux formats CSV ou XLSX
Action sur clic	Spécifiez une action à effectuer lorsqu'un élément est cliqué dans le tableau. Les espaces réservés suivants sont disponibles : ${params.<paramName>} ${object} ${customObject} ${columns.<columnName>} ${columnName} ${value}
Fournir le paramètre de filtre du tableau	Fournit le filtre actuellement appliqué sous forme de paramètre URL, y compris les filtres d'en-tête, la matrice de filtrage et la requête de recherche. Cela peut être utilisé pour transmettre ce filtre à d'autres widgets qui doivent afficher des informations basées sur les éléments actuellement affichés.
Nom du paramètre de filtre du tableau	Nom du paramètre URL pour le filtre du tableau. La valeur par défaut est tableFilter.

Source de données

Annotations

Cochez Autoriser les annotations pour activer la fonctionnalité d'annotations. Assurez-vous qu'une ou plusieurs colonnes sont définies ici comme clés, qui sont utilisées pour mapper chaque annotation à une ligne de données :

Colonnes

Cliquez sur Synchroniser les colonnes pour ajouter toutes les colonnes disponibles à partir du tableau ou de la requête de données configurés. Si seul un sous-ensemble des colonnes disponibles est utilisé, cliquez sur Ajouter une colonne pour ajouter des colonnes ou supprimer celles qui ne sont pas utilisées après les avoir toutes synchronisées. Pour modifier l'ordre des colonnes, il suffit de glisser-déposer les éléments de colonne.

Ouvrez les paramètres en cliquant sur un élément de colonne :

Paramètre	Description
Type	Type de colonne dépendant du type de recherche défini dans la section Source de données du widget
Nom	Nom de la colonne. Il s'affiche dans l'en-tête du tableau
Titre	Champ d'expression à utiliser des espaces réservés comme en-tête de colonne. S'il est vide, la valeur dans Nom sera utilisée.
Déclencher sur double-clic	L'action définie dans la section Action sur clic n'est déclenchée que par un double clic.
Largeur	Largeur exacte en pixels ou en % (facultatif)
Largeur minimale	Largeur minimale de la colonne en pixels ou en % (facultatif)
Align	Aligner le texte à gauche, au centre ou à droite
Hauteur de l'en-tête	Hauteur de l'en-tête en pixels
Type de filtre	Type de filtre dynamique aucun sélectionner (filtrer selon les valeurs disponibles dans le tableau actuel) texte (filtrer par texte) sélection multiple
Afficher dans l'en-tête	Disponible uniquement si le type de filtre est défini sur « text » (Afficher dans l'en-tête) ou « select » (Afficher dans la colonne). Permet d'afficher le filtre dans l'en-tête de colonne au lieu de la boîte de dialogue du filtre. Si coché, affiche la correspondance de texte héritée et le filtre par défaut. Si cette option n'est pas cochée, un champ combiné opérateur/valeur par défaut apparaît.
Correspondance de texte	Disponible uniquement si le type de filtre est défini sur « text ». Définit le comportement du filtre de table. exact : effectue une correspondance exacte. contains : effectue une correspondance si la valeur contient le texte du filtre. starts_with : correspond si les valeurs commencent par le texte du filtre. ends_with : correspond si la valeur se termine par le texte du filtre. Le caractère générique * peut être utilisé dans tous les modes de correspondance de texte (même dans exact).
Filtre par défaut	Le texte du filtre dynamique peut être prédéfini. Veuillez noter que le filtre est actif même si la colonne n'est pas affichée.
Priorité de tri	Définissez une priorité de tri pour rendre la colonne triable. Les lignes sont triées en fonction de la priorité de tri. Si deux colonnes ont la même priorité de tri, la priorité est déterminée par l'ordre des colonnes.
Sens de tri par défaut	Trier par ordre croissant ou décroissant par défaut
Afficher	Afficher la colonne (par défaut) ou non. Veuillez noter que les filtres par défaut sont actifs même pour les colonnes masquées
Masquer si vide	Masquer la colonne si aucune ligne du tableau ne contient de valeur pour cette colonne
Masquer sur les petits écrans	Masquer la colonne si elle ne tient pas dans l'écran
Masquer les répétitions	Masquer les valeurs répétitives. Cela peut être utilisé pour obtenir une sorte de regroupement :
Fusionner les lignes en double	N'afficher qu'une seule des lignes ayant la même valeur dans cette colonne
Afficher la valeur agrégée	Activer ou désactiver cette valeur dans les lignes d'agrégation en haut ou en bas du tableau
Direction de l'en-tête	En-tête horizontal ou vertical. Si vous choisissez l'option verticale, vous devez définir la hauteur de l'en-tête sur une valeur appropriée (pour des raisons techniques, la taille de l'en-tête ne peut pas être déterminée automatiquement)
Afficher en HTML	Interpréter les balises HTML dans cette colonne
Classe conditionnelle	Spécifiquement pour les colonnes Compter. Utilisez cette option pour spécifier des classes conditionnelles pour les valeurs, ce qui permet d'appliquer un style à l'aide de ces classes.
Objet personnalisé	Définir pour utiliser un objet SKOOR personnalisé

Paramètres des types de colonnes

Nom

Affiche le nom de l'objet de ligne. Aucun paramètre disponible.

Type

Affiche le type de l'objet de ligne. Aucun paramètre disponible.

Sous-type

Affiche le sous-type de l'objet ligne. Aucun paramètre disponible.

État

Affiche l'état de l'objet ligne sous forme d'ampoule ou de texte.

Paramètre	Description
Type d'affichage	Sélectionnez le mode d'affichage de l'état d'un objet SKOOR : Ampoule Format
Colonne	La colonne dans laquelle l'état peut être trouvé.
Tous les états dans la sélection	Afficher tous les états dans le filtre.

Lorsque le type de recherche renvoie des objets SKOOR, l'action de clic peut être définie pour la colonne. En activant Objet personnalisé, vous pouvez afficher l'état d'un objet SKOOR arbitraire (sélectionné par le filtre d'objet). 

Lorsque le type de recherche est une source de données ou une requête de données, sélectionnez la colonne qui contient les états requis dans le menu déroulant Colonne :

Si la colonne d'état est utilisée dans un tableau basé sur une source de données ou une requête de données, les valeurs peuvent être mappées aux états (SKOOR Dashboard >= 7.1.2).

Pour mapper plusieurs valeurs à un seul état, les valeurs peuvent être définies sous forme de liste séparée par des virgules.

Statistiques d'état

Calcule le pourcentage de l'objet se trouvant dans l'état sélectionné. Si un objet personnalisé est configuré dans la colonne, plusieurs objets peuvent être sélectionnés par le filtre de recherche. Dans ce cas, tous les objets sont agrégés par la fonction d'agrégation sélectionnée.

Propriété

Affiche une propriété de l'objet ligne.

Compter

Compte les objets en fonction d'un filtre d'objet

Le champ Conditions accepte les espaces réservés habituels.

Pour obtenir une référence à l'objet ligne, vous pouvez utiliser l'extrait de condition suivant :

{
  "item": "id",
  "operator": "eq",
  "expression": %id%
}

Il est également possible de définir une classe personnalisée pour un nombre donné. Cela est particulièrement utile pour colorer les nombres supérieurs à une valeur spécifiée :

Classes utiles :

• bold

• majeur

• Minor

• Warning

• OK

Valeur

Affiche une valeur de l'objet de ligne. En activant Objet personnalisé, vous pouvez afficher la valeur d'un objet SKOOR arbitraire (sélectionné par le filtre d'objet). 

La valeur peut être définie par sa clé de valeur. Les valeurs de retour et les valeurs de chaîne acceptent l'index dans la notation de tableau (par exemple, returnValue[0]) ou le nom de l'unité définie.

Nom du périphérique

Affiche le nom du périphérique associé si l'objet est une tâche.

Parent

Affiche l'objet parent de l'objet actuel.

Motifs

Raison pour laquelle les objets se trouvent dans un état tel que Major, Minor ou Warning.

Message

Affiche le message d'information sur la tâche, s'il est disponible.

Sélection 

Ajoute des options pour ajouter ou supprimer la maintenance ainsi qu'une case à cocher à chaque ligne.

Maintenances

Affiche les maintenances en cours.

Source de données

Affiche une valeur de colonne d'une table de source de données.

La fonction d'agrégation peut être définie pour agréger les valeurs de la colonne.

Si la colonne est de type float, il est possible de définir la précision de la valeur.

Requête de données

Affiche une valeur de colonne d'une requête de données. Les mêmes options de configuration que pour les sources de données s'appliquent également aux colonnes de requête de données.

Expression

Les colonnes d'expression peuvent calculer des valeurs à partir d'autres colonnes configurées dans ce widget de tableau. Les autres colonnes peuvent être référencées de deux manières :

• ${columns.<nom de la colonne>}

• ${columns[« <nom de colonne»]}

Veuillez également consulter la page Placeholders pour plus de détails.

Annotation

Avec ce type de colonne, les utilisateurs peuvent enrichir les données d'une source de données ou d'une requête de données par des annotations. Il existe cinq types de colonnes d'annotation :

Paramètre	Description
Type d'affichage	Une liste déroulante avec le type d'annotation souhaité : Bouton Statut Description Créé Utilisateur
Bouton	Ajoute un bouton à chaque ligne du tableau pour ajouter des annotations. De plus, un ensemble fixe d'états peut être configuré ici avec des transitions possibles entre eux. Cliquez sur le bouton Ajouter pour ajouter des états : Une transition depuis l'état Undefined doit être configurée. Sinon, aucune annotation ne pourra être ajoutée.
Statut	Affiche l'état actuel des annotations de chaque ligne.
Description	Affichez la description actuelle de l'annotation.
Créé	Afficher la date de création de l'annotation
Utilisateur	Afficher l'utilisateur qui a créé l'annotation

Veuillez consulter la page Annotations pour plus de détails.

Paramètres avancés des colonnes

Actions sur les clics

Selon le type de colonne, les actions sur clic peuvent être définies pour effectuer une analyse descendante ou pour naviguer vers un autre emplacement lorsque vous cliquez. Pour plus d'informations, consultez la section Action sur clic.

Style des cellules

Il est possible de personnaliser le style de chaque cellule du tableau à l'aide de CSS. Pour ce faire, vous pouvez utiliser soit du CSS en ligne (style de cellule d'en-tête, style de cellule de tableau), soit des classes CSS qui peuvent être définies dans les paramètres de style d'un tableau de bord.

Styliser les tableaux

Icône dépendante du contenu

Grâce à la fonctionnalité introduite avec SKOOR Dashboard 7.1.2, l'exemple ci-dessous se présenterait comme suit :

Problème

Le contenu de la cellule du tableau (par exemple OK) doit être remplacé par une icône (par exemple une ampoule).

Solution

1. Définir la classe de cellule de tableau dans les paramètres de colonne

Dans l'exemple ci-dessus, la valeur de la classe est tirée de la troisième colonne de chaque ligne. Dans l'exemple, cela donnera une classe définie sur status statusOK.

2. Ajoutez du code CSS dans la boîte de dialogue des paramètres du tableau de bord

/* Set a lightbulb as default background image for tds with class status */
td.status {
  background-image: url('assets/images/lightbulb-grey.svg');
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center 6px;
}

/* 
 * Absolute positioned elements (the tooltip in this case) always take the 
 * next not static positioned element as the anchor point
 */
td.status > div {
  position: relative;
  overflow: visible; 
}

/* 
 * Makes the inner td absolute positioned and style the span that it looks like a tooltip.
 * Initially, the tooltip is hidden.
 */
td.status > div > span {    
    padding: 2px;
    display:none;
    position: absolute;
    top: -3px;
    left: 30px;    
    text-align: left;
    background-color: #eff0f1;
    border: 1px solid #c7cbce;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Shows the tooltip on hover */
td.status:hover > div > span {
  display: block;
}

/* 
 * Defines the background image for the defined value. 
 * You need one of those for each possible content, undefined values
 * will display the default image.
 */
td.statusOK {
  background-image: url('assets/images/lightbulb-green.svg');
}

Cela permettra d'afficher une jolie icône avec le texte d'origine au survol.

Au lieu d'utiliser une URL de fichier pour les images, il est également possible d'intégrer les images directement dans le CSS à l'aide d'URL de données :

td.statusOK {
  background-image: url('data:image/png;base64,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');
}

le résultat ressemblerait à ceci :