Overview

Le widget Table de Studio vous permet d'afficher vos données dans un tableau simple.

How do I create a table ?

Create the flow

Dans la charge utile (payload) envoyée au nœud Brainstudio, vous avez besoin d'une propriété pour chaque tableau que vous souhaitez alimenter.
Flow

Le contenu de cette propriété doit être un tableau (array). Ce tableau contiendra toutes les lignes de votre tableau (à l'exception des en-têtes). Chaque ligne est elle-même un tableau de valeurs.

Exemple :

//            Nom,         Min, Max, Valeur courante
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];

const simpleTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

msg.payload = {
    'simpleTable' : simpleTable
}

return msg;

Add a Table widget in your Studio

Sélectionnez le widget table parmi la liste de widgets :
drawer

Sélectionnez le sujet (le nom que vous avez donné au nœud brainstudio dans le Data Flow Manager). Ensuite, vous pouvez choisir la clé de charge utile (la propriété dans laquelle vous avez placé vos données dans le payload) :
Missing

Si le message « Awaiting data… » persiste, veuillez vérifier votre flux de données (dataflow).

Modifiez le nom des colonnes :
table

Résultat final :
simple

How do I format my table ?

Configure a fixed format

Dans le tiroir de configuration, vous pouvez adapter certains paramètres de votre tableau :
fixed
Vous pouvez configurer :

Le nom (il peut être laissé vide pour retirer la ligne associée),
Une description qui s'affichera sous le titre,
La propriété de densité pour réduire la hauteur des lignes et obtenir un affichage plus compact,
La couleur de police par défaut (qui peut être surchargée par du code HTML),
La couleur de la grille,
La couleur de fond (background),
Afficher / masquer la bordure.

Add a dynamic format

Il est possible de surcharger le formatage défini dans le panneau d'Édition en appliquant du code HTML provenant du flux :

Exemple pour modifier conditionnellement la couleur de la police :

//            Nom,         Min, Max, Valeur courante
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];
let fontTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

color = "black";
for (let i = 0 ; i < fontTable.length ; i++){
    const vari = fontTable[i];
    const min = vari[1];
    const max = vari[2];
    const val = vari[3];

    if(val >= min && val <= max) color = "green";
    else if (val >= min/1.5 && val <= max*1.5) color = "#FFDD00";
    else color = "red";

    const formattedString = `<b><font style="color:${color}">${val}</font></b>`

    fontTable[i][3] = formattedString;
}

msg.payload = {
    'fontTable' : fontTable,
}
return msg;

Exemple pour modifier conditionnellement la couleur d'arrière-plan :

//            Nom,         Min, Max, Valeur courante
const var1 = ["Variable 1", 0.1, 0.9, Math.random().toFixed(3)];
const var2 = ["Variable 2", 0.2, 0.8, Math.random().toFixed(3)];
const var3 = ["Variable 3", 0.3, 0.7, Math.random().toFixed(3)];
const var4 = ["Variable 4", 0.4, 0.6, Math.random().toFixed(3)];
const var5 = ["Variable 5", 0.1, 0.5, Math.random().toFixed(3)];
const var6 = ["Variable 6", 0.2, 0.6, Math.random().toFixed(3)];
const var7 = ["Variable 7", 0.3, 0.7, Math.random().toFixed(3)];
const var8 = ["Variable 8", 0.4, 0.8, Math.random().toFixed(3)];
const var9 = ["Variable 9", 0.5, 0.9, Math.random().toFixed(3)];
let backgroundTable = [var1, var2, var3, var4, var5, var6, var7, var8, var9];

color = "black";
for (let i = 0; i < backgroundTable.length; i++){
    const vari = backgroundTable[i];
    const min = vari[1];
    const max = vari[2];
    const val = vari[3];

    if(val >= min && val <= max) color = "green";
    else if (val >= min/1.5 && val <= max*1.5) color = "yellow";
    else color = "red";

    formattedString = `<font style="background-color:${color}">${val}</font>`

    backgroundTable[i][3] = formattedString;
}

msg.payload = {
    'backgroundTable' : backgroundTable
}

return msg;

cond

TABLE