Freigeben über


Navigieren zu einer benutzerdefinierten Seite mithilfe der Client-API

Dieser Artikel enthält Beispiele für die Navigation von einer modellgesteuerten App-Seite zu einer benutzerdefinierten Seite mithilfe der Client-API. Erfahren Sie, wie Sie benutzerdefinierte Seiten als Ganzseiten-, Dialogfeld- oder Bereichsansichten in modellgesteuerten Apps öffnen.

In diesem Artikel werden die Schritte zum Verwenden der Client-API zum Öffnen einer benutzerdefinierten Seite als Vollständige Seite, Dialogfeld oder Bereich beschrieben. Es enthält Beispiele für benutzerdefinierte Werte in pageType.

Von Bedeutung

Benutzerdefinierte Seiten sind ein neues Feature mit erheblichen Produktänderungen. Sie weisen derzeit eine Reihe bekannter Einschränkungen auf, die in bekannten Problemen mit benutzerdefinierten Seiten beschrieben sind.

Finden Sie den logischen Namen

Jedes der folgenden Client-API-Beispiele verwendet den logischen Namen der benutzerdefinierten Seite als erforderlichen Parameter. Der logische Name ist der Name-Wert der Seite im Lösungs-Explorer.

Suchen Sie den logischen Namen der Seite.

Als Inline-Ganzseite ohne Kontext öffnen

Rufen Sie in einem modellgesteuerten App-Client-API-Ereignishandler den folgenden Code auf, und aktualisieren Sie den Namensparameter als logischen Namen der Seite.

// 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
        }
    );

Als Inline-Ganzseite mit einem Datensatzkontext öffnen

In diesem Beispiel wird der recordId Parameter in der NavigateTo-Funktion verwendet, um die benutzerdefinierte Seite mit dem zu verwendenden Datensatz bereitzustellen.

// 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
        }
    );

Die Param Funktion auf der benutzerdefinierten Seite ruft den Wert ab und verwendet die Nachschlagefunktion, um den Datensatz abzurufen.

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

Von Bedeutung

Der recordId-Parameter muss eine GUID sein, da er die URL aktualisiert und weil eine App, die von der URL startet, prüft, ob recordId eine GUID ist.

Als zentriertes Dialogfeld öffnen

Rufen Sie in einem modellgesteuerten App-Client-API-Ereignishandler den folgenden Code auf, und aktualisieren Sie den Namensparameter als logischen Namen der benutzerdefinierten Seite. Dieser Modus unterstützt die Größenparameter ähnlich wie die Hauptformulardialoge.

// 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
        }
    );

Als seitenseitiges Dialogfeld öffnen

Rufen Sie in einem modellgesteuerten App-Client-API-Ereignishandler den folgenden Code auf, und aktualisieren Sie den Namensparameter als logischen Namen der benutzerdefinierten Seite.

// 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
        }
    );

In diesem Beispiel wird der recordId Parameter in der NavigateTo-Funktion verwendet, um die benutzerdefinierte Seite mit dem zu verwendenden Datensatz bereitzustellen. Die Param Funktion auf der benutzerdefinierten Seite ruft den Wert ab und verwendet die Lookup Funktion zum Abrufen des Datensatzes.

Ein vollständiges Beispiel finden Sie unter Überschreiben des standardmäßigen offenen Verhaltens von Datenzeilen in einem entitätsgebundenen Raster.

  1. Erstellen Sie eine Webressource vom Typ JScript , und aktualisieren Sie den Namensparameter als logischen Seitennamen. Fügen Sie der Webressource den folgenden Code hinzu.

    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. Passen Sie das Menüband "CommandDefinition " für OpenRecordItem an, um die Funktion früher aufzurufen und den CrmParameter mit dem Wert SelectedControlSelectedItemReferences einzuschließen.

        <CommandDefinition Id="Mscrm.OpenRecordItem">
            <Actions>
                <JavaScriptFunction FunctionName="run" Library="$webresource:cr62c_OpenCustomPage">
                    <CrmParameter Value="SelectedControlSelectedItemReferences" />
                </JavaScriptFunction>
            </Actions>
        </CommandDefinition>
    
  3. Überschreiben Sie auf der benutzerdefinierten Seite die App-OnStart-Eigenschaft, um die Param-Funktion zu nutzen, um den recordId und lookup Datensatz abzurufen.

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

    Hinweis

    Nach dem Ändern der OnStart Eigenschaft müssen Sie OnStart über das Kontextmenü der App ausführen. Diese Funktion wird nur einmal innerhalb einer Sitzung ausgeführt.

  4. Anschließend kann die benutzerdefinierte Seite den RecordItem-Parameter als Datensatz verwenden. Das folgende Beispiel zeigt, wie sie in einem EditForm-Formular verwendet wird.

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

Aus einem ausgewählten Datensatz im bearbeitbaren Raster als zentriertes Dialogfeld mit Datensatz-ID öffnen

Verwenden Sie ein bearbeitbares Raster, um das OnRecordSelect-Ereignis auszulösen, wenn Sie eine Aktion ausführen möchten, nachdem Sie einen bestimmten Datensatz in einer Ansicht ausgewählt haben. In diesem Beispiel wird der recordId Parameter in der NavigateTo-Funktion verwendet, um die benutzerdefinierte Seite mit dem zu verwendenden Datensatz bereitzustellen. Die getId Methode im GridEntity-Objekt ruft die Datensatz-ID ab. Die Param Funktion auf der benutzerdefinierten Seite ruft den Wert ab und verwendet die lookup Funktion zum Abrufen des Datensatzes.

  1. Aktivieren sie bearbeitbares Rastersteuerelement in der Tabelle.

  2. Erstellen Sie eine Webressource vom Typ JScript , und aktualisieren Sie den Namensparameter als logischen Seitennamen. Fügen Sie der Webressource den folgenden Code hinzu.

    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. Überschreiben Sie auf der benutzerdefinierten Seite die OnStart-Eigenschaft der App, um die Param-Funktion zu verwenden, um die recordId- und lookup-Datensätze abzurufen.

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

    Hinweis

    Nach dem Ändern der OnStart Eigenschaft müssen Sie OnStart über das App-Kontextmenü ausführen. Diese Funktion wird nur einmal innerhalb einer Sitzung ausgeführt.

  4. Anschließend kann die benutzerdefinierte Seite den RecordItem-Parameter als Datensatz verwenden. Das folgende Beispiel zeigt, wie sie in einem EditForm-Formular verwendet wird.

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

Übersicht über die benutzerdefinierte Seite der modellgesteuerten App
Eine benutzerdefinierte Seite zu ihrer modellgesteuerten App hinzufügen
navigateTo (Client-API-Referenz)