Modification de données dans le widget Grille
Pour activer la modification dans le widget Grille, procédez comme suit :
1. Dans Mashup Builder, sélectionnez le widget Grille dans le canevas ou utilisez le panneau Explorateur.
2. Dans le panneau Propriétés, définissez IsEditable sur "vrai", puis cliquez sur 
pour ouvrir la boîte de dialogue de configuration du widget.
pour ouvrir la boîte de dialogue de configuration du widget.3. Dans le volet de gauche, sélectionnez une colonne, puis dans le volet de droite, cochez la case Modifiable.
Si vous le souhaitez, configurez les options suivantes :
◦ Cochez la case Obligatoire pour toujours exiger une valeur lors de la modification du contenu de la cellule.
◦ Définissez une expression de validation dans la zone Expression de validation pour appliquer des règles de validation au contenu de la cellule.
◦ Définissez les messages et les détails à afficher pour la validation.
4. Répétez l'étape précédente pour toute colonne que vous souhaitez modifier.
5. Cliquez sur Terminé pour fermer la boîte de dialogue, puis enregistrer l'application composite.
Choix d'un mode de modification
Pour contrôler la façon dont vous pouvez modifier la grille au moment de l'exécution, définissez la propriété EditLevel du widget sur l'une des options suivantes :
• Grille entière : modifiez des cellules spécifiques et enregistrez les modifications manuellement à l'aide d'un bouton ou d'un service.
• Ligne unique : modifiez des lignes spécifiques à l'aide d'un formulaire.
• Cellule unique : modifiez des cellules spécifiques et enregistrez les modifications automatiquement dès qu'elles sont effectuées.
Lorsque vous apportez des modifications à une colonne pour laquelle la validation est activée, l'entrée est évaluée afin de s'assurer que les données saisies sont valides. Lorsque la validation échoue, un message d'erreur s'affiche et les modifications ne sont pas enregistrées. Pour plus d'informations sur la validation, consultez la rubrique Validation des entrées dans la grille.
Vous pouvez également activer la propriété EditButton à la place de la propriété IsEditable. Si vous définissez cette propriété sur "vrai", un bouton de modification est ajouté à la barre d'outils de la grille. Vous pouvez cliquer sur le bouton au moment de l'exécution pour activer ou désactiver le mode de modification.
Mode de modification de la grille
Le mode de modification de la grille permet de mettre à jour plusieurs cellules, puis de cliquer sur un bouton Enregistrer pour enregistrer toutes les modifications en même temps.
L'image ci-après illustre les boutons de modification dans la zone supérieure gauche du widget à l'exécution lors de la modification de la grille entière.
Lorsque vous cliquez sur Modifier, les boutons Enregistrer et Annuler s'affichent. Les contrôles de modification s'affichent pour chaque cellule dont la modification est activée dans la grille. Vous pouvez modifier les données d'une ou de plusieurs cellules, puis cliquer sur Enregistrer pour enregistrer les modifications. Pour mettre en surbrillance les cellules contenant des modifications non enregistrées, définissez la propriété HighlightDraftState sur "vrai". Une couleur d'arrière-plan différente est utilisée pour représenter les cellules qui ont fait l'objet de modifications.
Les événements de modification suivants sont disponibles pour ce mode :
• EditStarted : se déclenche lorsque vous cliquez sur Modifier.
• EditCompleted : se déclenche lorsque vous cliquez sur Enregistrer.
• EditCancelled : se déclenche lorsque vous cliquez sur Annuler.
Mode de modification de ligne
La modification de ligne permet de modifier une ligne à la fois. Lorsque vous activez ce mode, une colonne contenant des contrôles de modification est ajoutée au côté gauche de la grille. L'image ci-après illustre le widget Grille défini en mode de modification de ligne.
Pour modifier une ligne, cliquez sur le lien ou l'icône de modification. Un formulaire de modification contenant les cellules de la ligne s'affiche. Une fois que vous avez apporté des modifications aux valeurs, cliquez sur Mettre à jour pour enregistrer les modifications apportées à la ligne active.
Les événements de modification suivants sont disponibles pour ce mode :
• EditRowStarted : se déclenche lorsque vous cliquez sur le lien ou l'icône de modification pour commencer à modifier une ligne à l'aide du formulaire.
• EditRowCompleted : se déclenche lorsque vous cliquez sur Mettre à jour.
• EditCancelled : se déclenche lorsque vous cliquez sur Annuler.
Mode de modification de cellule
Les événements de modification suivants sont disponibles pour ce mode :
• EditCellStarted : se déclenche lorsque vous cliquez sur le lien ou l'icône de modification pour commencer à modifier une cellule.
• EditCellCompleted : se déclenche lorsque vous appuyez sur la touche ENTREE ou que vous cliquez en dehors de la cellule après avoir modifié la valeur.
• EditCancelled : se déclenche lorsque vous annulez la modification de la cellule.
Vous pouvez modifier une cellule en cliquant sur son lien ou son icône de modification. Lorsque la zone de modification est active, la valeur brute s'affiche sans formatage. Une fois la modification terminée, le programme de rendu de colonne est appliqué pour formater la valeur. Pour plus d'informations sur les programmes de rendu, consultez la rubrique Options de rendu de colonne et formats.
 | Pour annuler une modification sans enregistrer vos modifications, appuyez sur la touche Echap. |
Configuration des contrôles de modification
Utilisez la propriété EditControlType pour afficher une icône ou un lien pour le contrôle de modification. Vous pouvez remplacer l'icône par n'importe quelle entité de média sur le serveur à l'aide de la propriété EditControlIcon. Pour modifier l'étiquette de modification par défaut du lien, utilisez la propriété EditControlLabel. Par défaut, les contrôles de modification s'affichent lorsque vous placez le pointeur sur une cellule. Vous pouvez configurer la visibilité des contrôles de modification à l'aide de la propriété EditControlVisibility.
Activation de la modification à l'aide de données de configuration JSON
Ajoutez la propriété globale de niveau supérieur suivante pour activer la modification de cellule dans la configuration JSON.
var config = { “cellEditingEnabled”: true, “columns”: ... } };
Pour activer la modification d'une colonne, ajoutez les données JSON suivantes :
...
“ColumnFormatter”: {
“type”: “boolean”,
“format”: “notext”,
“cellEditor”: {
“enabled”: true, // *{boolean} to indicate whether cell editing is enable for this column
},
}
...
“ColumnFormatter”: {
“type”: “boolean”,
“format”: “notext”,
“cellEditor”: {
“enabled”: true, // *{boolean} to indicate whether cell editing is enable for this column
},
}
...