Partager via


Navigation vers une page personnalisée à l’aide de l’API cliente

Cet article fournit des exemples de navigation d’une page d’application pilotée par modèle vers une page personnalisée à l’aide de l’API cliente.

Cet article décrit les étapes d’utilisation de l’API cliente pour ouvrir une page personnalisée en tant que page complète, boîte de dialogue ou volet. Il fournit des exemples de données personnalisées sous forme pageType de valeur dans navigateTo (référence de l’API cliente).

Important

Les pages personnalisées sont une nouvelle fonctionnalité avec des modifications importantes du produit et présentent actuellement un certain nombre de limitations connues décrites dans Problèmes connus de la page personnalisée.

Recherche du nom logique

Chacune des exemples d’API cliente suivante prend le nom logique de la page personnalisée comme paramètre requis. Le nom logique est la valeur Name de la page dans l’Explorateur de solutions.

Recherchez le nom logique de la page.

Ouvrir en tant que page complète inline sans contexte

Dans un gestionnaire d’événements d’API cliente d’application pilotée par modèle, appelez le code suivant et mettez à jour le paramètre de nom comme nom logique de la page.

// Inline Page
var pageInput = {
    pageType: "custom",
    name: "<logical name of the custom page>",
};
var navigationOptions = {
    target: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when page opens
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );

Ouvrir en tant que page complète inline avec un contexte d’enregistrement

Cet exemple utilise le recordId paramètre dans la fonction NavigateTo pour fournir à la page personnalisée l’enregistrement à utiliser.

// Inline Page
var pageInput = {
    pageType: "custom",
    name: "<logical name of the custom page>",
    entityName: "<logical name of the table>",
    recordId: "<record id>",
};
var navigationOptions = {
    target: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when page opens
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );

La Param fonction dans la page personnalisée récupère la valeur et utilise la fonction Lookup pour récupérer l’enregistrement.

App.OnStart=Set(RecordItem, 
    If(IsBlank(Param("recordId")),
        First(<entity>),
        LookUp(<entity>, <entityIdField> = GUID(Param("recordId"))))
    )

Important

Le paramètre recordId doit être un GUID car il met à jour l’URL, et une application démarrant à partir de l’URL validera que recordId est un GUID.

Ouvrir en tant que boîte de dialogue centrée

Dans un gestionnaire d’événements d’API cliente d’application pilotée par modèle, appelez le code suivant et mettez à jour le paramètre de nom comme nom logique de la page personnalisée. Ce mode prend en charge les paramètres de dimensionnement similaires aux dialogues de formulaire principal.

// Centered Dialog
var pageInput = {
    pageType: "custom",
    name: "<logical custom page name>",
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 50, unit:"%"},
    title: "<dialog title>"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );

Ouvrir dans une boîte de dialogue latérale

Dans un gestionnaire d’événements d’API cliente d’application pilotée par modèle, appelez le code suivant et mettez à jour le paramètre de nom comme nom logique de la page personnalisée.

// Side Dialog
var pageInput = {
    pageType: "custom",
    name: "<logical page name>",
};
var navigationOptions = {
    target: 2, 
    position: 2,
    width: {value: 500, unit: "px"},
    title: "<dialog title>"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );

Cet exemple utilise le recordId paramètre dans la fonction navigateTo pour fournir à la page personnalisée l’enregistrement à utiliser. La Param fonction dans la page personnalisée récupère la valeur et utilise la fonction Lookup pour récupérer l’enregistrement.

Vous trouverez un exemple plus complet de ce problème sous Remplacer le comportement d'ouverture par défaut des lignes de données dans une grille liée à l’entité.

  1. Créez une ressource web de type JScript et mettez à jour le paramètre de nom comme nom de page logique. Ajoutez le code suivant à la ressource web.

    function run(selectedItems)
    {
        let selectedItem = selectedItems[0];
    
        if (selectedItem) {     
            let pageInput = {
                pageType: "custom",
                name: "<logical page name>",
                entityName: selectedItem.TypeName,
                recordId: selectedItem.Id,
            };
            let navigationOptions = {
                target: 1
            };
            Xrm.Navigation.navigateTo(pageInput, navigationOptions)
                .then(
                    function () {
                        // Handle success
                    }
                ).catch(
                    function (error) {
                        // Handle error
                    }
                );
        }
    }
    
  2. Personnalisez le ruban de la table CommandDefinition pour OpenRecordItem afin d'appeler la fonction mentionnée plus haut et d'y intégrer le CrmParameter avec la valeur SelectedControlSelectedItemReferences.

        <CommandDefinition Id="Mscrm.OpenRecordItem">
            <Actions>
                <JavaScriptFunction FunctionName="run" Library="$webresource:cr62c_OpenCustomPage">
                    <CrmParameter Value="SelectedControlSelectedItemReferences" />
                </JavaScriptFunction>
            </Actions>
        </CommandDefinition>
    
  3. Dans la page personnalisée, remplacez la propriété OnStart de l′application pour utiliser la fonction Param et obtenir l′enregistrement de recherche recordId.

    App.OnStart=Set(RecordItem, 
        If(IsBlank(Param("recordId")),
            First(<entity>),
            LookUp(<entity>, <entityIdField> = GUID(Param("recordId"))))
        )
    

    Note

    Après avoir modifié la OnStart propriété, vous devez exécuter OnStart à partir du menu contextuel de l’application. Cette fonction ne s’exécute qu’une seule fois par session.

  4. Ensuite, la page personnalisée peut utiliser le paramètre RecordItem comme enregistrement. Vous trouverez ci-dessous un exemple sur la façon de l’utiliser dans un objet EditForm.

    EditForm.Datasource=<datasource name>
    EditForm.Item=RecordItem
    

Ouvrir à partir d’un enregistrement sélectionné dans une grille modifiable sous la forme d’une boîte de dialogue centrée avec l’ID d’enregistrement

La grille modifiable peut être utilisée pour déclencher l’événement OnRecordSelect pour les scénarios dans lesquels vous souhaitez effectuer une action lorsqu’un enregistrement particulier est sélectionné dans une vue. Cet exemple utilise le recordId paramètre dans la fonction navigateTo pour fournir à la page personnalisée l’enregistrement à utiliser. L’ID d’enregistrement est récupéré à l’aide de la méthode dans l’objet getIdGridEntity . La Param fonction dans la page personnalisée récupère la valeur et utilise la fonction de recherche pour récupérer l’enregistrement.

  1. Activez le contrôle de grille modifiable dans la table.

  2. Créez une ressource web de type JScript et mettez à jour le paramètre de nom comme nom de page logique. Ajoutez le code suivant à la ressource web.

    function RunOnSelected(executionContext) {
    // Retrieves the record selected in the editable grid
    var selectedRecord = executionContext.getFormContext().data.entity;
    var Id = selectedRecord.getId().replace(/[{}]/g, ""); 
    
    // Centered Dialog
    var pageInput = {
        pageType: "custom",
        name: "<logical page name>",
        recordId: Id,
    };
    var navigationOptions = {
        target: 2,
        position: 1,
        width: { value: 50, unit: "%" },
        title: "<dialog title>"
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions)
        .then(
            function () {
                // Called when the dialog closes
            }
        ).catch(
            function (error) {
                // Handle error
            }
        );
     }
    
  3. Dans la page personnalisée, remplacez la propriété OnStart de l′application pour utiliser la fonction Param et obtenir l′enregistrement de recherche recordId.

    App.OnStart=Set(RecordItem, 
        If(IsBlank(Param("recordId")),
            First(<entity>),
            LookUp(<entity>, <entityIdField> = GUID(Param("recordId"))))
        )
    

    Note

    Après avoir modifié la OnStart propriété, vous devez exécuter OnStart à partir du menu contextuel de l’application. Cette fonction s'exécute une seule fois par session.

  4. Ensuite, la page personnalisée peut utiliser le paramètre RecordItem comme enregistrement. Vous trouverez ci-dessous comment l’utiliser dans un objet EditForm.

    EditForm.Datasource=<datasource name>
    EditForm.Item=RecordItem
    

Présentation d’une page personnalisée d’application pilotée par modèle
Ajouter une page personnalisée à votre application pilotée par modèle
navigateTo (référence sur l’API cliente)