Définition des actions de la barre d'outils à l'aide d'une table d'informations

Mashup Builder > Widgets > Widgets standard > Widget Barre d'outils (thématisable) > Définition des actions de la barre d'outils à l'aide d'une table d'informations

Utilisez la forme de données ToolbarAction pour créer une table d'informations qui définit les actions à afficher sur la barre d'outils. Chaque ligne de la table d'informations correspond à une action de la barre d'outils. Vous pouvez créer une table d'informations pour configurer le widget de la manière suivante :

• Définissez le nombre et le type d'actions à afficher.

• Contrôlez l'ordre et la position des actions.

• Contrôlez la visibilité de chaque action en la soumettant à une condition ou un événement.

• Définissez la largeur maximale de chaque action.

La procédure ci-après décrit les étapes à suivre pour ajouter et configurer un widget Barre d'outils.

1. Définissez les exigences fonctionnelles, puis concevez les actions à afficher dans la barre d'outils.

2. Dans Composer, créez un service de configuration de barre d'outils formaté avec la forme de données ToolbarAction.

3. Dans le Mashup Builder, ajoutez le widget Barre d'outils à l'application composite, puis ajoutez l'entité avec le service de configuration de la barre d'outils.

4. Liez la propriété Toutes les données du service de barre d'outils à la propriété ActionsData du widget.

Les propriétés pouvant être liées pour chaque action de la barre d'outils s'affichent dans le panneau Propriétés au format suivant :

• <ActionID>_<NomPropriété>

5. Dans le panneau Propriétés, configurez le widget, puis créez des liaisons à d'autres widgets ou fonctions.

Pour plus d'informations sur les propriétés du widget, consultez la rubrique Widget Barre d'outils (thématisable).

Définitions de champ communes

• actionID : ID de l'action dans la table d'informations. Cette valeur est utilisée pour identifier chaque action lors de la configuration du widget dans le panneau Propriétés du Mashup Builder.

• actionMaxWidth : définition de champ permettant de spécifier une largeur maximale personnalisée pour l'action. Par défaut, chaque action de la barre d'outils s'affiche avec une largeur maximale de 100 pixels.

• actionTooltip : définit le contenu d'un message d'info-bulle. Vous pouvez également ajouter une icône à l'info-bulle à l'aide de la propriété actionTooltipIcon.

• actionVisible : contrôle la visibilité de l'action sur la barre d'outils.

• actionDisabled : désactive l'action. Vous pouvez contrôler cette valeur par programmation pour activer ou désactiver l'action en fonction d'une condition dans l'application composite.

• actionLabel : étiquette à afficher pour l'action sur la barre d'outils. Pour les actions de type bouton et bouton bascule, l'étiquette s'affiche dans l'action.

• alignRight : aligne l'action sur le côté droit.

Outre les propriétés communes, la forme de données contient des définitions de champ qui vous permettent de configurer vos actions Bouton, Bouton bascule, Lien et Liste déroulante. La section suivante décrit les propriétés disponibles pour chaque type d'action en illustrant le fonctionnement par un exemple.

Bouton

buttonIcon : spécifie l'icône à afficher dans le bouton en référençant le nom d'une entité de média.

Vous pouvez afficher les icônes SVG de la bibliothèque d'icônes SVG à l'aide de la syntaxe suivante : cds:<icon_name>.

Pour plus d'informations sur les icônes disponibles, consultez la rubrique Utilisation des icônes SVG.

buttonType : spécifie le style visuel à utiliser pour le bouton. Options : primary, secondary, tertiary, danger, transparent.

Bouton bascule

toggleChipIcon : permet d'afficher une icône indiquant l'état du bouton à bascule. Options : true, false.

toggleLabelPosition : contrôle la position de l'étiquette par rapport à l'icône. Options : left, right.

L'action du bouton bascule s'affiche sous la forme d'une case à cocher et d'une étiquette dans le menu de débordement lorsque la fenêtre de visualisation est trop petite pour afficher toutes les actions.

Lien

linkTargetWindow : spécifie la façon dont s'ouvre l'URL liée. Options : new, same, popup.

linkType : type de lien.

Liste déroulante

• dropdownSeelctedText : permet de sélectionner un élément dans la liste déroulante par défaut à l'aide du texte de la valeur. Par exemple, utilisez l'expression suivante pour sélectionner Item 2 par défaut :

dropdownSeelctedText: "value2";

• dropdownLabelPosition : spécifie la position de l'étiquette de liste déroulante. Options : top, left

• dropdownData : valeur JSON qui contient des données pour chaque élément dans la liste. Chaque élément est représenté par un objet JSON contenant les noms de champs et les valeurs associées. Par exemple :

[{label:"Item 1", value: "value1"}, {label:"Item 2", value: "value2"}, {label:"Item 3", value: "value3"}]

Bouton de menu

• menuButtonData : valeur JSON qui contient des données pour chaque option de menu du bouton de menu. Chaque option est représentée par un objet JSON contenant les noms de champs appropriés et leurs valeurs associées basés sur la forme de données MenuEntry. Par exemple :

[
  {
    "menuId": "item1",
    "title": "Item 1",
    "linkType": "Mashup",
    "linkDestination": "Item1Mashup",
    "isDefault": false,
    "parentMenuId": "",
    "imageURL": "item1_icon.png",
    "linkTarget": "Replace",
    "description": "Description for Item 1"
  }
]

• DisplayMenuIcons : lorsque cette propriété est définie sur "faux", les icônes des options de menu sont masquées.

• allowMissingMenuIcons : lorsque cette propriété est définie sur "faux" et que DisplayMenuIcons est défini sur "vrai", une icône par défaut s'affiche en regard des options de menu si aucune icône n'est spécifiée dans les données du bouton de menu.

• selectedDataChanged : événement pouvant être lié qui se déclenche lors d'un clic sur une option de menu dans le bouton de menu.

Ajout d'un filtre de données

Vous pouvez utiliser les propriétés du widget pour ajouter et configurer un filtre sur le côté gauche ou droit de la barre d'outils. Pour plus d'informations, consultez la rubrique Widget Barre d'outils (thématisable).

Organisation des actions sur la barre d'outils

Utilisez la table d'informations du service de données du widget pour organiser les actions sur la barre d'outils. Les actions sont triées en fonction de leur ordre dans la table d'informations. En outre, vous pouvez aligner les actions à droite sur la barre d'outils à l'aide de l'option alignRight.

Forme de données ToolbarAction

La table suivante répertorie les définitions de champ de la forme de données ToolbarAction.

Définition de champ

Description

Type de base

actionMaxWidth

Largeur maximale de l'action sur la barre d'outils.

NUMBER

toggleState

Etat du bouton bascule.

BOOLEAN

toggleChipIcon

Affiche ou masque l'icône de jeton utilisée pour indiquer la sélection.

BOOLEAN

actionTooltip

Info-bulle de l'action.

STRING

actionVisible

Contrôle la visibilité de l'action.

BOOLEAN

alignRight

Aligne l'action sur le côté droit de la barre d'outils. Pour aligner l'action sur le côté gauche, définissez la valeur sur "faux" ou laissez le champ vide.

BOOLEAN

actionLabel

Etiquette de l'action.

STRING

actionTooltipIcon

Icône à afficher dans l'info-bulle de l'action.

IMAGELINK

actionType

Type d'élément à afficher pour l'action de la barre d'outils (bouton, lien, liste déroulante, bouton bascule ou bouton de menu).

STRING

linkDestination

URL du lien.

STRING

buttonIcon

Icône à afficher sur le bouton.

IMAGELINK

actionDisabled

Contrôle si l'action est interactive ou désactivée.

BOOLEAN

buttonType

Variante à afficher pour les boutons et les boutons de menu. Vous pouvez sélectionner Principal, Secondaire, Tertiaire, Danger ou Transparent.

STRING

dropdownData

Valeur JSON qui contient les données pour chaque élément de la liste déroulante. Chaque élément est représenté par un objet JSON qui contient l'étiquette de l'élément, sa valeur et son état (facultatif).

JSON

actionId

Cette définition de champ est utilisée comme clé primaire de la table d'informations.

Identificateur unique pour chaque ligne de la table d'informations. Chaque ID est utilisé comme préfixe pour les propriétés d'action pouvant être liées dans le panneau Propriétés du Mashup Builder.

STRING

linkTargetWindow

Contrôle l'ouverture de la fenêtre de la cible du lien. Vous pouvez ouvrir le lien dans une nouvelle fenêtre, dans la fenêtre active ou dans une boîte de dialogue contextuelle (Nouvelle fenêtre, Même fenêtre ou Fenêtre contextuelle).

STRING

linkType

Type de lien.

STRING

dropdownSelectedText

Valeur de chaîne de l'élément à sélectionner dans la liste déroulante.

STRING

toggleLabelPosition

Contrôle la position de l'étiquette du bouton bascule par rapport à l'icône d'état. Options : left, right

STRING

menuButtonData

Valeur JSON qui contient des données pour chaque option de menu du bouton de menu. Chaque option est représentée par un objet JSON contenant les noms de champs appropriés et leurs valeurs associées basés sur la forme de données MenuEntry.

JSON

displayMenuIcons

Lorsque cette propriété est définie sur "faux", les icônes des options de menu sont masquées.

BOOLEAN

allowMissingMenuIcons

Lorsque cette propriété est définie sur "faux" et que DisplayMenuIcons est défini sur "vrai", une icône par défaut s'affiche en regard des options de menu si aucune icône n'est spécifiée dans les données du bouton de menu.

BOOLEAN

Est-ce que cela a été utile ?