Composants

Documentation > Actions > App Builder > Composants

Présentation

Cette page fournit une liste de composants d’interface utilisateur que vous pouvez utiliser lors de la création d’applications dans App Builder.

De nombreuses propriétés de composant vous permettent de choisir parmi des valeurs fournies. Si vous souhaitez utiliser une expression pour la valeur d’une propriété, cliquez sur </> à côté de la propriété pour utiliser l’éditeur de code.

Tout composant capable de déclencher un événement dispose d’une liste de réactions disponibles dans événements et réactions. Ces composants peuvent également utiliser des réactions personnalisées.

Pour plus d’informations sur l’utilisation de JavaScript dans App Builder, consultez JavaScript Expressions. Pour plus d’informations sur l’enregistrement de vos composants en tant que modèle, consultez Reusable Modules.

Composants disponibles

Bouton

Les composants de bouton possèdent les propriétés suivantes.

Général

Étiquette: Le texte qui s’affiche sur le bouton.
Valeur: chaîne ou expression

Apparence

Intent: Contrôle la couleur du bouton, les couleurs représentant l’intention du bouton.
Valeurs fournies: default, danger, success, warning
Est primaire: Conçu pour attirer l’attention de l’utilisateur sur la ou les actions les plus importantes pour une page ou un workflow donné.
Valeurs fournies: on, off
Est sans bordure: Supprime la bordure de tout bouton. Au survol, il obtient un remplissage d’arrière-plan.
Valeurs fournies: on, off
Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies : on, off
Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur : click
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Valeur de l’appel

Les composants de valeur d’appel possèdent les propriétés suivantes.

Général

Étiquette: Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression
Valeur: La valeur mise en évidence par l’appel.
Valeur: chaîne ou expression
Unité: L’unité associée à la valeur.
Valeur: chaîne ou expression

Style

Style: Le style visuel du composant.
Valeurs fournies: default, success, warning, danger, blue, purple, pink, orange, yellow, red, green, gray, vivid blue, vivid purple, vivid pink, vivid orange, vivid yellow, vivid red, vivid green
Size: Dimensionne la métrique de manière réactive afin qu’elle soit proportionnelle à la taille de la valeur.
Valeurs fournies : sm, md, lg, xl

Apparence

Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies : on, off
Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application EC2 Instance Manager.

Case à cocher

Les composants de case à cocher ont les propriétés suivantes.

Général

Étiquette

Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression

Options

La liste des cases à cocher parmi lesquelles un utilisateur peut choisir. Le format est un tableau d’objets où chaque objet se compose d’une paire clé-valeur label et value. Le nombre minimal d’options est de 1.
Valeur: expression
Exemple:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Apparence

Est multiligne: Détermine si le texte de la case à cocher doit passer à la ligne ou être tronqué par des points de suspension.
Valeurs fournies : on, off
Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur : change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Conteneur

Les composants conteneurs possèdent les propriétés suivantes.

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Custom chart

Les Custom chart components possèdent les propriétés suivantes.

Général

Spécification Vega: Une chaîne représentant une spécification JSON Vega-Lite ou Vega valide.

Apparence

Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies: on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour un exemple montrant comment utiliser ce composant, voir Custom charts.

Date picker

Les composants Date picker possèdent les propriétés suivantes.

Général

Étiquette: L’étiquette affichée en haut du Date picker.
Valeur: chaîne ou expression
Info-bulle: L’info-bulle à afficher lors du survol de l’étiquette de saisie. L’info-bulle peut contenir du markdown.
Valeur: chaîne ou expression
Valeur par défaut: La date par défaut du Date picker, affichée sous forme d’horodatage UNIX en millisecondes.
Valeur: entier
Autoriser les dates futures: Détermine si la date peut être définie après la date du jour.
Valeurs fournies: on, off

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : Voir State functions.

Inspecter les données

Affiche les propriétés et les valeurs au format JSON. Les valeurs sont affichées à la fois sous forme d’horodatage UNIX en millisecondes et au format ISO (année, mois, jour, heure, minutes, secondes et millisecondes).

Outil de sélection de la plage de dates

Les composants de sélection de plage de dates possèdent les propriétés suivantes.

Général

Période par défaut: La période par défaut affichée par le sélecteur de date.
Valeurs fournies: 5 dernières minutes, 30 dernières minutes, 1 dernière heure, 4 dernières heures, 1 dernier jour

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies: on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Séparateur

Les composants séparateurs ont les propriétés suivantes.

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les propriétés au format JSON.

Entrée de fichier

Les composants d’entrée de fichier ont les propriétés suivantes.

Général

Types de fichiers acceptés: Détermine les types de fichiers que le composant d’entrée de fichier accepte.
Valeurs: .csv, .json

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies: on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Image

Les composants image ont les propriétés suivantes.

Général

Source: L’image à afficher. Les formats pris en charge sont JPG, PNG et GIF. La taille de téléchargement maximale est de 4 Mo.
Valeurs: URL ou fichier

Apparence

Ajustement: Détermine les dimensions de l’image dans les limites du composant image.
Valeurs fournies: fill, contain, cover, none
Remplissage: Détermine la largeur de l’espace entre les limites de l’image et les limites du composant image.
Valeurs fournies: none, small, medium, large
Alignement vertical: Détermine la position verticale de l’image dans les limites du composant image.
Valeurs fournies: aligner en haut, aligner au centre, aligner en bas
Alignement horizontal: Détermine la position horizontale de l’image dans les limites du composant image.
Valeurs fournies : aligner à gauche, aligner au centre, aligner à droite
Bordure: Détermine si le composant image possède une bordure visuelle autour de ses bords.
Valeurs fournies : on, off
Arrière-plan transparent: Détermine si l’arrière-plan à l’intérieur du composant image est transparent.
Valeurs fournies : on, off
Est en chargement: Détermine si une icône de chargement est affichée pendant le chargement de l’image.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les propriétés au format JSON.

Logo d’intégration

Les composants de logo d’intégration possèdent les propriétés suivantes.

Général

Identifiant d’intégration: Spécifie l’icône de logo d’intégration à afficher.
Valeur: chaîne ou expression
Exemples: datadog, amazon-s3, postgres, okta

Apparence

Alignement horizontal: Contrôle le positionnement horizontal du logo dans le composant.
Valeurs fournies: aligner à gauche, aligner au centre, aligner à droite
Alignement vertical: Contrôle le positionnement vertical du logo dans le composant.
Valeurs fournies : aligner en haut, aligner au centre, aligner en bas
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off
Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies : on, off

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Formulaire

Les composants de formulaire possèdent les propriétés suivantes.

Général

Title: Le titre du formulaire.
Valeur: chaîne ou expression
Valeur par défaut: La valeur par défaut que l’application renseigne dans le formulaire. Pour renseigner un champ spécifique, vous pouvez utiliser la notation JSON, par exemple {"org":"frontend"} pour renseigner le champ org avec la valeur frontend.
Valeur: chaîne ou expression

Champs

Chaque élément représente un champ dans le formulaire. Les champs ont chacun l’un des types suivants: textInput, select, textArea ou text.

Les champs possèdent certaines ou toutes les propriétés suivantes selon leur type de champ :

Nom du champ: L’identifiant unique d’un champ. Vous pouvez utiliser cet identifiant pour référencer le champ dans une expression.
Valeur: chaîne ou expression
Étiquette: L’étiquette qui s’affiche au-dessus du champ.
Valeur: chaîne ou expression
Contenu: Le contenu qui s’affiche dans un champ text.
Valeur: chaîne ou expression
Options: Les options disponibles dans un champ select. Les options doivent être un tableau d’objets, avec une clé const pour la valeur de l’option et une clé title facultative pour l’étiquette de l’option.
Valeur: La label et le value de chaque objet peuvent être une chaîne ou une expression.
Vous pouvez remplir chaque objet à l’aide de l’interface graphique (par défaut), ou basculer Raw pour utiliser une saisie JSON brute afin de fournir l’ensemble du tableau d’objets.
Texte d’espace réservé: Le texte qui s’affiche dans un champ textInput ou textArea lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression
Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le champ est visible dans le formulaire.
Valeurs fournies : on, off
Est requis: Détermine si le champ est requis pour soumettre le formulaire.
Valeurs fournies : on, off

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off
Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off

Événements

Événement: Valeur : submit, change, validate
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : form0.setValue({name: 'node-group-1'}) définit la valeur du composant form0 sur {name: 'node-group-1'}.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Entrée JSON

Les composants d’entrée JSON ont les propriétés suivantes.

Général

Étiquette: Le texte qui s’affiche en haut du composant.
Valeur par défaut: La valeur JSON par défaut que le composant affiche.

Apparence

Est en lecture seule: Détermine si le composant est en lecture seule.
Valeurs fournies: on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies: on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Fenêtre modale

Les composants modaux ont les propriétés suivantes.

Général

Title: Le titre de la modale.
Valeur: chaîne ou expression

Apparence

Size: L’échelle de la modale.
Valeurs fournies: sm, md, lg
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies: on, off

Événements

Événement: Valeurs: toggleOpen, close, open
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setIsOpen
Exemple: modal0.setIsOpen(true) définit l’état de modal0 sur ouvert.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Saisie numérique

Les composants de saisie numérique ont les propriétés suivantes.

Étiquette: Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression
Valeur par défaut: La valeur par défaut que l’application renseigne dans la zone de saisie.
Valeur: nombre ou expression qui s’évalue en un nombre
Texte d’espace réservé: Le texte qui s’affiche lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression

Validation

Min: La valeur minimale que la saisie numérique accepte.
Valeur: nombre ou expression qui s’évalue en un nombre
Max: La valeur maximale que la saisie numérique accepte.
Valeur: nombre ou expression qui s’évalue en un nombre

Apparence

Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : numberInput0.setValue(3) définit la valeur du composant numberInput0 sur 3.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le modèle d’application ECS Task Manager.

Radio

Les composants radio ont les propriétés suivantes.

Général

Étiquette

Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression

Options

La liste des options de bouton radio parmi lesquelles un utilisateur peut choisir. Le format est un tableau d’objets où chaque objet se compose d’une paire clé-valeur label et value.
Valeur: expression
Exemple:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": « production »
  }
]}

Valeur par défaut

La valeur qui est sélectionnée lors du chargement de la radio.
Valeur : chaîne ou expression

Apparence

Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : radioButtons0.setValue("production") définit la valeur du composant radioButtons0 sur "production".
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

React renderer

Les composants React renderer possèdent les propriétés suivantes.

Général

Définition du composant React: Le code qui est exécuté pour créer un composant React.
Props d’entrée du composant: Les props qui sont transmises au composant React et qui sont accessibles dans l’objet props du composant.
État initial du composant: Définit les valeurs d’état initiales pour votre composant. Cet état est utilisé lors du premier rendu du composant ou si aucun état n’a encore été défini. Le composant peut accéder à ces données via props.state.

Apparence

Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies: on, off

Événements

Événement: Valeurs: définir l’état du composant, fonction de rappel
Nom de la fonction: Valeur: props.customFunctionName
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Relations

Affiche les dépendances de données entre le React renderer et les composants de l’application.

Exemple

Pour un exemple montrant comment utiliser ce composant, consultez React renderer.

Rechercher des monitors

Les composants de recherche possèdent les propriétés suivantes.

Général

Valeur par défaut: La valeur par défaut que l’application renseigne dans la zone de recherche.
Valeur: chaîne ou expression
Texte d’espace réservé: Le texte qui s’affiche lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression

Apparence

Size: L’échelle du composant de recherche.
Valeurs fournies: sm, md, lg
Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies: on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeurs : change, submit
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : search0.setValue("search query") définit la valeur du composant search0 sur "search query".
Voir Fonctions d’état pour plus d’informations.

Pour plus d’informations sur les événements, consultez Events.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application EC2 Instance Manager.

Sélectionner

Les composants Select ont les propriétés suivantes.

Général

Étiquette

Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression

Texte d’espace réservé

Le texte qui s’affiche lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression

Options

La liste des options de sélection parmi lesquelles un utilisateur peut choisir. Le format est un tableau d’objets où chaque objet se compose d’une paire clé-valeur label et value.
Valeur: expression
Exemple:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": « production »
  }
]}

Valeur par défaut

La valeur qui est sélectionnée lors du chargement du Select.
Valeur : chaîne ou expression

Multiselect

Détermine si l’utilisateur peut sélectionner plus d’une option à la fois.
Valeurs fournies : on, off

Apparence

Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple: select0.setValue("staging") définit la valeur du composant select0 sur "staging".
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Panneau latéral

Les composants du panneau latéral ont les propriétés suivantes.

Général

Title: Le titre du panneau latéral.
Valeur: chaîne

Apparence

Largeur: Détermine la largeur du panneau latéral. Un signe de pourcentage (%) doit être inclus après la valeur.
Valeur: entier
Masquer le bouton de fermeture: Détermine si le panneau latéral affiche un X pour fermer le panneau.
Valeurs fournies: on, off

Événements

Événement: Valeurs : toggle open, close, open
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setIsOpen
Exemple : sidePanel0.setIsOpen(true) définit l’état de sidePanel0 sur open.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les propriétés et les valeurs au format JSON.

Onglet

Les composants Tabs ont les propriétés suivantes.

Tabs

Une liste de vues d’onglets. Utilisez le (+) pour ajouter des vues supplémentaires.

Style

Style: Le style de coloration utilisé pour le composant d’onglet.
Valeurs fournies: Par défaut, violet, rose, orange, rouge, vert
Alignement: La manière dont les Tabs sont alignés au sein du composant Tabs.
Provided values: Horizontal (→), vertical (↓)
Impact: Contrôle si l’arrière-plan du Tabs sélectionné est entièrement coloré ou si seule une petite bande en bas est colorée.
Provided values: High, low

Apparence

Masquer Tabs: Contrôle si les tab markers sont affichés.
Valeurs fournies: on, off
Masquer Body: Contrôle si le Body des Tabs est affiché.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeur: change
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setTabIndex
Exemple : tab0.setTabIndex(0) définit la valeur du composant tab0 sur le premier onglet.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Table (Tableau)

Les composants de tableau possèdent les propriétés suivantes.

Général

Title: Un titre pour le tableau. Sélectionnez Markdown pour un formatage personnalisé.
Valeur: chaîne
Source de données: Le tableau d’objets à afficher dans un tableau.
Valeurs: requête, données de démonstration, composants

Colonnes

Chaque colonne de données provenant de la source de données est représentée ici et possède les propriétés suivantes :

Étiquette: Le texte qui s’affiche en haut de la colonne.
Valeur: chaîne ou expression
Chemin de données: Chemin JSON pour accéder aux valeurs imbriquées dans les objets et les tableaux d’une colonne donnée.
Valeur: chaîne ou expression
Formatage: Le type de format que prend la colonne.
Valeurs fournies: chaîne, lien, pastille de statut, date / heure, markdown, tags, barre de pourcentage, nombre, barre de score, avatar
Triable: Détermine si l’utilisateur peut effectuer un tri par colonne.
Copiable: Détermine si l’utilisateur peut cliquer pour copier le contenu de la colonne.
Valeurs fournies: on, off
Filtrable: Détermine si une option de filtrage est disponible pour la colonne.
Valeurs fournies: on, off

Certaines colonnes possèdent des propriétés supplémentaires basées sur leur propriété Formatting.

Pagination

Possède un résumé: Détermine s’il faut afficher un résumé de pagination directement au-dessus du tableau.
Valeurs fournies: on, off
Taille de page: Nombre de lignes à afficher par page.
Valeur: nombre ou expression qui s’évalue en un nombre
Nombre total: Nombre total de lignes à afficher dans le tableau.
Valeur: nombre ou expression qui s’évalue en un nombre
Type: Détermine le type de pagination.
Valeurs fournies: côté client, côté serveur

Tri

Sélectionnez la colonne et la direction pour le tri par défaut du tableau.
Colonne: La colonne selon laquelle effectuer le tri.
Valeur: nom de colonne
Direction: La direction du tri.
Valeurs fournies: croissant, décroissant

Actions sur les lignes

L’ajout d’une action de ligne ajoute une colonne Actions au tableau, qui contient des boutons d’action définis par l’utilisateur. Les lignes peuvent avoir plusieurs actions. Les actions possèdent les propriétés suivantes :

Étiquette: Le texte qui s’affiche sur le bouton d’action.
Valeur: chaîne ou expression
Primaire: Conçu pour attirer l’attention de l’utilisateur sur la ou les actions les plus importantes pour une page ou un workflow donné.
Valeurs fournies: on, off
Sans bordure: Supprime la bordure de tout bouton. Au survol, il obtient un remplissage d’arrière-plan.
Valeurs fournies: on, off
Disabled: Applique un style désactivé et supprime les interactions.
Valeurs fournies : on, off
Niveau: Contrôle la couleur du bouton en fonction de son intention.
Valeurs fournies : default, danger, success, warning
Réactions: Les réactions que le bouton déclenche. Un bouton peut avoir plusieurs réactions.
Valeurs fournies : download file, open modal, close modal, open side panel, close side panel, open URL, set component state, set state variable value, toast notification, trigger action, custom
Certains types de réaction possèdent des propriétés supplémentaires.

Apparence

Défilable: Détermine les manières dont le tableau est défilable.
Valeurs fournies : both, vertical
Est en chargement: Affiche un indicateur de chargement.
Valeurs fournies : on, off
Retour à la ligne: Détermine si le texte de la cellule revient à la ligne.
Valeurs fournies : on, off
A des sous-lignes: Active les sous-lignes pour chaque ligne. Incluez la propriété subRows dans la source de données.
Valeurs fournies : on, off
Est interrogeable: Détermine s’il faut ajouter une barre de recherche au tableau.
Valeurs fournies : on, off
Afficher les options de tri: Ajoute un bouton Sort au tableau qui offre aux utilisateurs des options de tri.
Valeurs fournies : on, off
Afficher les options de colonne: Ajoute un bouton Columns au tableau pour afficher, masquer ou réorganiser les colonnes du tableau.
Valeurs fournies : on, off
Possède un filtre de plage de dates: Ajoute un filtre de plage de dates au tableau.
Valeurs fournies : on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement

Valeurs : pageChange, tableRowClick

Réaction

Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.

State Function

setSelectedRow
Exemples :

table0.setSelectedRow(0) définit la propriété selectedRow de table0 sur la première ligne.
table0.setSelectedRow(null) efface la propriété selectedRow.

setPageIndex
Exemple : table0.setPageIndex(0) définit la propriété pageIndex de table0 sur la première page.
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Pour des exemples montrant comment utiliser les fonctionnalités avancées des tables, consultez Tables.

Texte

Les composants texte possèdent les propriétés suivantes.

Général

Contenu: Le contenu affiché par le composant.
Valeur: chaîne ou expression
Type de contenu: Détermine comment le texte est rendu. Lorsque Markdown est sélectionné, le composant texte prend en charge la syntaxe Markdown de base, y compris les images que vous hébergez ailleurs.
Valeurs fournies: texte brut, Markdown

Apparence

Alignement du texte: Détermine l’alignement horizontal du texte au sein du composant.
Valeurs fournies : aligner à gauche, aligner au centre, aligner à droite
Alignement vertical: Détermine l’alignement vertical du texte au sein du composant.
Valeurs fournies : aligner en haut, aligner au centre, aligner en bas
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Relations

Affiche les dépendances de données entre les données de tableau et les composants de l’application.

Exemple

Pour voir ce composant en contexte, consultez le plan d’application Metrics Explorer & Monitors Builder.

Zone de texte

Les composants de zone de texte possèdent les propriétés suivantes.

Étiquette: Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression
Valeur par défaut: La valeur qui est sélectionnée au chargement de la zone de texte.
Valeur: chaîne ou expression
Texte d’espace réservé: Le texte qui s’affiche lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression

Apparence

Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies: on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeurs : change, submit
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : textArea0.setValue("text") définit la valeur du composant textArea0 sur "text".
Voir Fonctions d’état pour plus d’informations.

Inspecter les données

Affiche les paires de propriétés et de valeurs au format JSON.

Saisie de texte

Les composants de saisie de texte possèdent les propriétés suivantes.

Étiquette: Le texte qui s’affiche en haut du composant.
Valeur: chaîne ou expression
Valeur par défaut: La valeur sélectionnée au chargement de la saisie de texte.
Valeur: chaîne ou expression
Texte d’espace réservé: Le texte qui s’affiche lorsqu’aucune valeur n’est saisie.
Valeur: chaîne ou expression

Apparence

Est désactivé: Applique un style désactivé et supprime les interactions.
Valeurs fournies: on, off
Est visible: Détermine si le composant est visible pour l’utilisateur final. En mode édition, tous les composants restent visibles.
Valeurs fournies : on, off

Événements

Événement: Valeurs : change, submit
Réaction: Valeurs : les exemples incluent open modal, trigger action et set component state
Consultez Events pour obtenir la liste complète des réactions disponibles.
State Function: setValue
Exemple : textInput0.setValue("text") définit la valeur du composant textInput0 sur "text". Voir Fonctions d’état pour plus d’informations.