Création de volets latéraux à l’aide d’une API cliente

Les développeurs peuvent créer et gérer des volets latéraux d’application dans une application basée sur un modèle en utilisant l’API Xrm.App.sidePanes, qui représente la collection de volets latéraux. Appeler la méthode createPane permet d’ajouter un nouveau volet pour la navigation vers n’importe quel formulaire d’application pilotée par modèle ou page personnalisée. Les pages affichées dans le volet latéral doivent tenir dans la largeur minimale de 300 pixels et être redimensionnées à des largeurs plus grandes en fonction de la largeur du volet.

Les onglets sont répertoriés dans le volet latéral en deux groupes non fermables et fermables. Dans chaque groupe, les onglets sont répertoriés dans l’ordre dans lequel ils ont été créés. Le groupe supérieur contient les volets qu’un utilisateur ne peut pas fermer et le groupe inférieur contient des volets pouvant être fermés par l’utilisateur. Le groupe ne pouvant pas être fermé est rempli lorsque l’application est ouverte, tandis que le groupe pouvant être fermé est ajouté en fonction des actions de l’utilisateur au sein de l’application.

Vous pouvez utiliser un en-tête fourni par la plateforme avec le titre et le bouton Fermer, ou vous pouvez utiliser un en-tête personnalisé.

Vous pouvez ajouter un badge dans le volet latéral pour indiquer à l’utilisateur qu’un changement nécessite son attention. Le badge prend en charge trois modes : un point simple, un compteur ou une image. Par défaut, le badge est effacé lorsque l’utilisateur bascule vers le volet. Vous pouvez contrôler à quel moment le badge est effacé.

Les volets latéraux des applications ne sont pris en charge que dans les navigateurs Web et ne sont pas disponibles dans les lecteurs natifs.

Note

Cette API n’est pas disponible pour les déploiements locaux Dynamics 365 Customer Engagement. En savoir plus : API clientes non prises en charge dans Customer Engagement (on-premises)

Exemples

Afficher une page générative dans un volet latéral

Utilisez la méthode du volet pageType: "generative" avec navigate et l’ID de la page générative :

const pane = await Xrm.App.sidePanes.createPane({
    title: "My Generative Page",
    paneId: "GenPage",
    canClose: true,
    width: 400
});

await pane.navigate({
    pageType: "generative",
    pageId: "<genPageID>"
});

Pour plus d’informations sur le passage du contexte d’enregistrement et des paramètres personnalisés, consultez Naviguer vers et à partir d’une page générative.

Affichage d’une vue par défaut dans le volet latéral

Les exemples de cette section montrent comment afficher la vue par défaut d’un tableau dans le volet latéral de l’application. Une liste de réservation et une liste de produits s’ouvrent sous forme de volets non fermables.

Xrm.App.sidePanes.createPane({
    title: "Reservations",
    imageSrc: "WebResources/sample_reservation_icon",
    paneId: "ReservationList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_reservation",
    })
});

Capture d’écran montrant un tableau des réservations avec une liste des réservations actives, y compris le nom, l’équipement et la date de début de la réservation. 

Xrm.App.sidePanes.createPane({
    title: "Products",
    imageSrc: "WebResources/sample_product_icon",
    paneId: "ProductList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_product",
    })
});

Capture d’écran montrant un tableau Produits avec une liste de produits pouvant être réservés.

Afficher une ligne de tableau

Cet exemple montre comment afficher une ligne dans le volet latéral. La ligne de réservation s’ouvre dans un volet latéral où l’en-tête par défaut est masqué et la largeur est définie sur 600 pixels.

Xrm.App.sidePanes.createPane({
    title: "Reservation: Ammar Peterson",
    imageSrc: "WebResources/sample_reservation_icon",
    hideHeader: true,
    canClose: true,
    width: 600
}).then((pane) => {
    pane.navigate({
        pageType: "entityrecord",
        entityName: "sample_reservation",
        entityId: "00aa00aa-bb11-cc22-dd33-44ee44ee44ee",
    })
});

Capture d’écran montrant une liste de réservations actives ouverte à un enregistrement individuel.

Afficher une ressource web

Cet exemple montre comment afficher une ressource web dans le volet latéral. Une page HTML personnalisée s’ouvre dans un volet latéral où l’en-tête par défaut est visible et le bouton fermer est masqué.

Xrm.App.sidePanes.createPane({
                        title: "Registration Page",
                        imageSrc: "WebResources/msfp_SurveyIcon_32",
                        paneId: "RegistrationPage",
                        canClose: false
                    }).then((pane) => {
                        //navigate to webresource
                        pane.navigate({
                            pageType: "webresource",
                            webresourceName: "new_RegistrationPage",
                        })
                    });

Gestion des volets latéraux

En plus de créer des volets latéraux et d’afficher des lignes ou des vues dans le volet latéral, vous pouvez également :

  • Utilisez la méthode state pour réduire le volet latéral par programmation :

    Xrm.App.sidePanes.state = 0;

  • Utilisez la méthode state pour développer le volet latéral par programmation :

    Xrm.App.sidePanes.state = 1;

  • Modifiez les propriétés en obtenant le volet sélectionné :

    var lastPane = Xrm.App.sidePanes.getSelectedPane();
    lastPane.width = 400;

  • Récupérer un volet spécifique en utilisant le paramètre paneId :

    var reservationPane = Xrm.App.sidePanes.getPane("ReservationList");
    reservationPane.close();

  • Activer la propriété de badge sur un volet :

    Xrm.App.sidePanes.getSelectedPane().badge = 1;

Utiliser avec Xrm.App.panels.loadPanel

L’API Xrm.Panels.loadPanel est remplacée par Xrm.App.sidePanes.createPane , car l’ancienne prend uniquement en charge un seul volet, tandis que celui-ci prend en charge plusieurs volets. Pour activer la transition de loadPanel à createPane, les deux API peuvent fonctionner avec certaines limitations. Si vous utilisez uniquement loadPanel dans une application basée sur un modèle, l’expérience reste la même. Toutefois, si vous utilisez les deux loadPanel et createPane, la première limitation est qu’une icône d’espace réservé apparaît pour le loadPanel. La deuxième limitation est que lorsque l’utilisateur passe de l’application loadPanel à l’autre createPane, l’application décharge le contenu loadPanel pour économiser la mémoire et le recharge lors du retour sans l’état. Ce comportement de commutateur d’onglet est le même que celui utilisé dans le mode d’application multisession pour gérer la mémoire utilisée par l’application. La plupart des types de pages sont restaurés correctement. Toutefois, lorsque l’on ouvre un site externe ou une ressource web, l’état n’est pas restauré.

En passant à l’utilisation de createPane, vous pouvez éviter les deux limitations en fournissant une icône et en activant alwaysRender. Le alwaysRender conserve le contenu du volet lorsque l’utilisateur change d’onglet, mais consomme plus de mémoire ; utilisez-le donc avec parcimonie.

sidePanes (référence API client)
loadPanel (Référence de l’API client)
Procédure pas-à-pas : écrire votre premier script client

  • Dernière mise à jour :