Boutons de grille

Les boutons de la barre d’outils à grille contrôlent la façon dont les utilisateurs interagissent avec les enregistrements dans un MainGrid ou SubGrid. Les boutons sont placés à l’intérieur du Buttons fragment de rendu et apparaissent automatiquement dans la barre d’outils de la grille.

Catégories de boutons

Il existe trois catégories de boutons de grille selon leur gestion des opérations d’enregistrement :

  • Boutons de dialogue — Ouvrez un formulaire dans une boîte de dialogue pour créer ou modifier des enregistrements en ligne sans quitter la page.
  • Boutons de navigation — Naviguez vers une URL de page distincte pour créer ou modifier des enregistrements.
  • Boutons d’action — Effectuez des opérations comme supprimer, lier ou délier directement des enregistrements.

Choisir la bonne approche

Choisissez la forme du bouton en fonction du contexte dont l’utilisateur a besoin et de la quantité de nouvel état impliqué. Les trois seaux ci-dessous couvrent les cas typiques.

  • Dialogue (en ligne) — Utilisez NewRecordGridButton / OpenRecordGridButton lorsque le formulaire correspond à une seule boîte de dialogue et que l’utilisateur bénéficie de rester sur la page actuelle (par exemple, en ajoutant un contact à un enregistrement de compte sans perdre les autres modifications non enregistrées du compte). Combinez avec Behavior="GridActionBehavior.WithGridContext" (par défaut) pour intégrer la sauvegarde du nouvel enregistrement dans le commit transactionnel du contexte parent.
  • Naviguer (page complète) — Utiliser NavigateNewRecordGridButton / NavigateOpenRecordGridButton lorsque la création ou la modification a besoin d’une surface plus riche que ce qu’un dialogue peut offrir confortablement : de nombreux champs, plusieurs onglets, des enregistrements liés propres, des pièces jointes ou des URL partageables. La route possède la sienne RecordContext, donc la grille mère n’a pas besoin d’être consciente de la complexité du formulaire.
  • Assistant (dialogue en plusieurs étapes) — À utiliser NewRecordGridButton FormType="FormType.WizardForm" lorsque le formulaire comporte suffisamment de champs pour qu’un écran soit chargé, mais que les entrées sont suffisamment interdépendantes pour que la répartition entre les pages vaille le coût de navigation. Forme courante : la page 1 capture l’identité / la classification, la page 2 capture des détails qui dépendent des choix de la page 1.

Modes de flux et comportement de sauvegarde

Chaque bouton de grille basé sur le dialogue (NewRecordGridButton, OpenRecordGridButton, la paire lien/déliaison M2M) accepte un Behavior paramètre qui contrôle quand l’appel Dataverse sous-jacent est déclenché. Les deux valeurs correspondent à des séquences de requêtes substantiellement différentes :

Comportement = Immédiatement

Le bouton Enregistrer de la boîte de dialogue envoie la demande de création / mise à jour / association / dissociation directement à Dataverse via ExecuteMultipleAsync, rafraîchit la grille, puis ferme la boîte de dialogue. Le / RecordContext environnant MainContext (s’il y en a) ne voit pas le changement — il est déjà engagé.

  1. L’utilisateur clique sur Enregistrer dans la boîte de dialogue.
  2. Le dialogue valide, puis envoie un ou plusieurs OrganizationRequests à ExecuteMultipleAsynctravers .
  3. Retour serveur ; la grille se rafraîchit ; Le dialogue se termine.

Choisissez ceci : le dialogue est autonome (pas de bouton Enregistrer au niveau de la page environnant), ou l’utilisateur souhaite vraiment que chaque action au niveau de ligne soit un commit à part entière. Chaque sauvegarde ici est indépendante — la complétion partielle d’un flux de travail multi-lignes reste sur le serveur.

Comportement = AvecContexteGrille (par défaut)

Le bouton Enregistrer de la boîte de dialogue met en scène la requête dans la file d’attente de la grille (_rowsToCreate / _rowsToUpdate dans Blazor, l’équivalent React dans useGridContext()) et ferme la boîte de dialogue. L’appel Dataverse lui-même ne s’active qu’une fois que le bouton Enregistrer de / RecordContextenvironnant MainContext n’est pas cliqué.

  1. L’utilisateur clique sur Enregistrer dans la boîte de dialogue → enregistrement (ou mise à jour / associé / dissociation) est mis en file d’attente sur la grille.
  2. Le dialogue se ferme. Le contexte parent de la page bascule vers IsDirty=true; le bouton Enregistrer au niveau de la page s’active.
  3. L’utilisateur clique sur la sauvegarde au niveau de la page → chaque changement de grille en file + la mise à jour propre de l’enregistrement parent + toutes les demandes en attente des autres descendants sont regroupées en un seul ExecuteMultipleAsyncfichier .
  4. Retour serveur ; la page se rafraîchit ; files d’attente dégagées ; IsDirty se retourne en arrière.

Choisissez ceci : la page a un parent RecordContext avec son propre bouton Enregistrer — l’utilisateur s’attend à une sémantique « sauvegarder toute la page », et un commit partiel (parent sauvegardé, lignes enfants non) serait un pire résultat que de tout reconstituer. C’est la norme pour cette raison.

Par défaut, c’est WithGridContext

WithGridContext est la fonction par défaut pour chaque bouton basé sur le dialogue — Immédiatement est l’option d’adhésion. Si votre grille se trouve en dehors d’un contexte parent (une page d’annonce autonome sans enregistrement au-dessus), la file n’a nulle part où se vider et le dialogue revient automatiquement à la sémantique Immédiatement.

NouveauBouton de la Grille du Record

Ouvre un formulaire de dialogue pour créer un nouvel enregistrement. Nécessite un TForm paramètre de type spécifiant le composant Razor pour être rendu en tant que forme.

Utilisez Location pour contrôler où apparaît le dialogue : DialogLocation.Center (par défaut) ou DialogLocation.Right (panneau latéral).

Utilisez FormType pour choisir entre une forme standard (FormType.Form) ou un assistant à plusieurs étapes (FormType.WizardForm).

À utiliser Behavior pour contrôler la date de création de l’enregistrement : GridActionBehavior.Immediately sauvegarde immédiatement sur Dataverse, tandis que GridActionBehavior.WithGridContext (par défaut) reporte la sauvegarde jusqu’à ce que le contexte parent soit validé.

React
Blazor

Exemple de type standard

Le TForm paramètre de type spécifie un composant Razor qui définit la disposition du formulaire. Un formulaire standard est simplement un composant Razor contenant des composants d’éditeur. Il peut inclure des onglets, des sections ou toute mise en page dont vous avez besoin.

React
Blazor

Exemple de formulaire Wizard

Un formulaire d’assistant divise le processus de création en plusieurs étapes. Définissez chaque étape à l’aide de WizardRecordPage composants. Utilisez FormType="FormType.WizardForm" le bouton pour activer le mode assistant.

React
Blazor

Note

Lors de l’utilisation d’une forme d’assistant, on met FormType="FormType.WizardForm" sur le NewRecordGridButton. L’assistant affiche la navigation Retour/Suivant et valide chaque page avant d’avancer.

Validation par page

Chacune WizardRecordPage se place par défaut sur ForceSuccessfulValidationBeforeSave="true": le bouton suivant de l’assistant exécute les validateurs de la page active avant d’avancer et annule la transition si un champ requis est vide ou invalide. Réglez false sur des pages qui ne contiennent que des champs optionnels pour que l’utilisateur puisse les passer. Le bouton Terminer de la page finale valide toujours, peu importe ce drapeau — le rejet côté serveur de la création est la seule façon de le contourner.

React
Blazor

Enregistrement partagé entre les pages

Tous WizardRecordPage les composants à l’intérieur d’un NewRecordGridButton partagent le même objet sous-jacent TableRecord — l’édition firstname à la page 1 et annualincome à la page 2 aboutit à une seule charge utile de création à la fin. Les s par page RecordContextse lient à la même instance d’enregistrement, de sorte que la navigation entre les étapes préserve les modifications en cours.

OpenRecordGridButton

Ouvre un formulaire de dialogue pour modifier le(s) enregistrement(s) sélectionné(s). Par exemple NewRecordGridButton, il nécessite un TForm paramètre de type. Lorsque plusieurs enregistrements sont sélectionnés, le formulaire affiche des champs partagés et applique des modifications à tous les enregistrements sélectionnés.

Le bouton d’édition se déclenche automatiquement lorsqu’une ligne est double-cliquée dans la grille. Réglez AllowNavigateOnRowDoubleClick="false" sur la grille pour supprimer le gestionnaire de double-clic.

Par défaut, la colonne du nom principal du tableau s’affiche également comme un hyperlien à chaque ligne, et cliquer sur le lien déclenche la même action d’édition que le double-clic. Définissez AllowNavigateOnPrimaryNameClick="false" sur la grille pour supprimer l’hyperliaison et afficher la cellule du nom principal en texte clair. Le lien hypertexte n’apparaît que lorsqu’un OpenRecordGridButton ou NavigateOpenRecordGridButton est enregistré, donc les grilles sans bouton d’édition ne sont pas affectées.

React
Blazor

NaviguerNouvelleEnregistrementBoutonGrille

Navigue vers une URL pour créer un nouvel enregistrement. Définissez le Url paramètre sur la page cible. Lorsqu’il est utilisé dans un SubGrid, le contexte de relation de l’enregistrement parent est automatiquement ajouté sous forme de paramètres de chaîne de requête.

Utilisez le OnClick rappel pour définir dynamiquement l’URL en fonction du contexte de la grille. Cela est utile pour les grilles multi-tables où l’URL dépend de la table de la vue sélectionnée.

React
Blazor

NaviguerOuvrirEnregistrementGrilleBouton

Navigue vers une URL pour modifier l’enregistrement sélectionné. Le Url paramètre prend en charge {0} comme un substitut pour l’ID de l’enregistrement sélectionné.

React
Blazor

NaviguerEnregistrerBoutonGrille

Un bouton de navigation polyvalent avec une étiquette, une icône et une URL personnalisées. Utilisez cela pour des actions de navigation personnalisées qui ne correspondent pas au nouveau schéma ou à l’édition.

React
Blazor

SuppresserEnregistrementBoutonGrille

Supprime les enregistrements sélectionnés après avoir demandé la confirmation. À utiliser Mode pour contrôler si les enregistrements sont supprimés BulkOperationMode.Individually (un par un avec la progression) ou dans un seul lot.

React
Blazor

LinkExistingRecordGridButtonGrille

Ouvre une boîte de dialogue de recherche pour trouver et associer des enregistrements existants via une relation plusieurs-à-plusieurs. Applicable uniquement dans SubGrid les relations N :N.

React
Blazor

DélierExistingRecordGrillBouton

Dissocie les dossiers sélectionnés d’une relation de plusieurs à plusieurs après avoir été sollicité pour confirmation. Applicable uniquement dans SubGrid les relations N :N.

React
Blazor

GridButton

Un bouton entièrement personnalisé avec un OnClick rappel qui reçoit le fichier courant GridContext. Utilisez cela pour implémenter des actions personnalisées dans la barre d’outils.

React
Blazor

Paramètres communs

  • Behavior — Contrôle si l’opération est exécutée immédiatement (GridActionBehavior.Immediately) ou différée jusqu’à ce que le contexte parent sauvegarde (GridActionBehavior.WithGridContext).
  • Mode — Pour les boutons supprimer/lien/délier, il s’agit de contrôler si les opérations en bloc s’exécutent individuellement avec un retour d’avancement ou dans une seule requête batch.
  • IsButtonEnabled / IsButtonVisible — Prédice qui contrôle l’état du bouton en fonction de la ligne sélectionnée en cours.
Réagir Blazor

GridButton Classe

Paramètres

Nom
Type
Par défaut
Description
AppearanceAppearance?
Stealth
Apparence visuelle du bouton de la barre d’outils. Par défaut à Appearance.Stealth Donc le bouton se lit comme transparent au repos et ne peint qu’un arrière-plan en survol — correspondant aux boutons Rafraîchissement et Paramètres de la grille. Le CSS à portée de la grille (FluentGridBase.razor.css) broches --neutre-remplissage-furtivité-repos vers transparent donc l’état de repos furtif n’a vraiment aucun remplissage. Annuler par bouton lorsque un Custom Action demande un poids visuel différent (par exemple, Appearance.Accent pour un appel à l’action principal).
Enabledbool?
True
Outrepasse l’état activé du bouton quel que soit le résultat du GridButton.IsButtonEnabled prédicat.
IconIcon?
Une icône optionnelle s’affiche sur le bouton.
IsButtonEnabledFunc<IEnumerable<GridRowContext>, bool>
Un prédicat évalué par rapport à la sélection de ligne courante pour déterminer si le bouton est activé.
IsButtonVisibleFunc<IEnumerable<GridRowContext>, bool>
Un prédicat évalué par rapport à la sélection de ligne en cours pour déterminer si le bouton est visible.
IsOpenRecordButtonbool
False
Précise que c’est le bouton « Modifier » pour la grille. Un seul bouton devrait avoir cette propriété réglée sur « vrai » dans une grille. Le gestionnaire d’événements de ce bouton est appelé lorsqu’une ligne est « double-cliquée » dans la grille.
Labelstring?
L’inscription du texte s’affichait sur le bouton.
Tooltipstring?
Une infobulle optionnelle s’affiche lorsque l’utilisateur survole le bouton.
Nom: Appearance
Type: Appearance?
Par défaut: Stealth
Description: Apparence visuelle du bouton de la barre d’outils. Par défaut à Appearance.Stealth Donc le bouton se lit comme transparent au repos et ne peint qu’un arrière-plan en survol — correspondant aux boutons Rafraîchissement et Paramètres de la grille. Le CSS à portée de la grille (FluentGridBase.razor.css) broches --neutre-remplissage-furtivité-repos vers transparent donc l’état de repos furtif n’a vraiment aucun remplissage. Annuler par bouton lorsque un Custom Action demande un poids visuel différent (par exemple, Appearance.Accent pour un appel à l’action principal).
Nom: Enabled
Type: bool?
Par défaut: True
Description: Outrepasse l’état activé du bouton quel que soit le résultat du GridButton.IsButtonEnabled prédicat.
Nom: Icon
Type: Icon?
Description: Une icône optionnelle s’affiche sur le bouton.
Nom: IsButtonEnabled
Type: Func<IEnumerable<GridRowContext>, bool>
Description: Un prédicat évalué par rapport à la sélection de ligne courante pour déterminer si le bouton est activé.
Nom: IsButtonVisible
Type: Func<IEnumerable<GridRowContext>, bool>
Description: Un prédicat évalué par rapport à la sélection de ligne en cours pour déterminer si le bouton est visible.
Nom: IsOpenRecordButton
Type: bool
Par défaut: False
Description: Précise que c’est le bouton « Modifier » pour la grille. Un seul bouton devrait avoir cette propriété réglée sur « vrai » dans une grille. Le gestionnaire d’événements de ce bouton est appelé lorsqu’une ligne est « double-cliquée » dans la grille.
Nom: Label
Type: string?
Description: L’inscription du texte s’affichait sur le bouton.
Nom: Tooltip
Type: string?
Description: Une infobulle optionnelle s’affiche lorsque l’utilisateur survole le bouton.

Événements

Nom
Type
Description
OnClickEventCallback<GridContext>
Déclenche lorsque le bouton est appuyé, fournissant le courant Components.GridContext au manipulateur.
Nom: OnClick
Type: EventCallback<GridContext>
Description: Déclenche lorsque le bouton est appuyé, fournissant le courant Components.GridContext au manipulateur.