Ajout d'actions personnalisées à la barre d'outils de la grille
Vous pouvez définir des actions personnalisées à afficher dans la barre d'outils de la grille.
Vue d'ensemble
• Bouton
• Liste déroulante
• Lien
• Bouton bascule
Configuration d'actions personnalisées pour la barre d'outils du widget Grille
1. Dans Composer, créez un service de données contenant une table d'informations qui renvoie les données requises pour les définitions d'action. Pour plus d'informations sur les formats de données pris en charge, consultez la rubrique Exemple de configuration du widget Barre d'outils.
2. Dans Mashup Builder, ajoutez le service à l'application composite à l'aide du panneau Données.
3. Liez la table d'informations de service à la propriété ToolbarActions du widget Grille. Des propriétés supplémentaires pour les actions personnalisées sont répertoriées dans le panneau Propriétés.
4. Dans le panneau Propriétés, configurez les actions de barre d'outils. Pour créer des liaisons internes de widget, utilisez la boîte de dialogue de configuration des liaisons.
5. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Propriétés des actions personnalisées
Le tableau ci-après répertorie les propriétés de chaque type d'action personnalisée que vous pouvez ajouter au widget Grille.
|
Type d'action
|
Nom de propriété/d'événement
|
Description
|
Exemple
|
|---|---|---|---|
|
Bouton
|
<actionId>_Clicked
|
Evénement qui se déclenche lors d'un clic sur le bouton.
|
Button1_Clicked
|
|
<actionId>_Disabled
|
Désactive le bouton sur la barre d'outils.
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
Contrôle la visibilité du bouton sur la barre d'outils.
|
Button1_Visible
|
|
|
Liste déroulante
|
<actionId>_Disabled
|
Désactive la liste déroulante sur la barre d'outils.
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
Cette propriété pouvant être liée vous permet de définir et de récupérer la valeur du texte sélectionné dans l'action de liste déroulante.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
Evénement qui se déclenche lorsque l'élément sélectionné dans la liste déroulante est modifié.
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
Contrôle la visibilité de la liste déroulante sur la barre d'outils.
|
Dropdown1_Visible
|
|
|
Lien
|
<actionId>_Disabled
|
Désactive le lien sur la barre d'outils.
|
Link1_Disabled
|
|
<actionId>_Visible
|
Contrôle la visibilité de l'action de lien sur la barre d'outils.
|
Link1_Visible
|
|
|
Bouton bascule
|
<actionId>_Disabled
|
Désactive le bouton bascule sur la barre d'outils.
|
Toggle1_Disabled
|
|
<actionId>_State
|
Cette propriété pouvant être liée vous permet de définir et de récupérer l'état de l'action de bouton bascule.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
Evénement qui se déclenche lorsque l'état du bouton bascule change.
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
Contrôle la visibilité de l'action de bouton bascule sur la barre d'outils.
|
Toggle1_Visible
|
Exemple de création d'un service pour configurer des actions personnalisées pour la barre d'outils de la grille
L'exemple suivant illustre un service qui crée les actions personnalisées suivantes dans la barre d'outils de la grille :
• Liste déroulante qui contrôle la hauteur de ligne.
• Bouton bascule qui contrôle la visibilité des numéros de ligne.
• Bouton d'exportation permettant d'exporter les lignes sélectionnées sur la grille.
Dans Composer, créez un service de données qui renvoie une table d'informations avec les données requises pour les actions personnalisées. Pour plus d'informations sur les formats de données pris en charge, consultez la rubrique Définition des actions de la barre d'outils à l'aide d'une table d'informations.
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
Dans Mashup Builder, créez les liaisons suivantes :
• Pour contrôler la hauteur des lignes de la grille, liez la propriété de liste déroulante SelectedText à une fonction Expression qui convertit le type de base chaîne en un nombre. Vous pouvez ensuite lier la sortie de la fonction à la propriété de grille MinRowHeight.
• Pour contrôler la visibilité des numéros de ligne, liez la propriété T1_State du bouton bascule à la propriété de grille ShowRowNumbers.
• Pour afficher le bouton d'exportation lorsque des lignes sont sélectionnées, liez la propriété de grille RowsSelected à la propriété de bouton B1_Visible.
Pour plus d'informations sur les options de configuration disponibles pour les actions personnalisées, consultez la rubrique Exemple de configuration du widget Barre d'outils.