クライアント API を使用してカスタム ページに移動する

  • [アーティクル]

この記事では、クライアント API を使用して、モデル駆動のアプリのページからカスタム ページに移動する例を紹介します。

この記事では、クライアント API を使用して、カスタム ページをフルページ、ダイアログ、またはペインで開く手順の概要を説明します。 カスタムを navigateTo (クライアント API 参照) の pageType 値として使用する例を紹介します。

重要

カスタム ページは製品が大幅に変更された新機能であり、現在、カスタム ページの既知の問題に概説されているいくつかの既知の制限があります。

モデル ページからカスタム ページへの移動

論理名を見つける

以下のクライアント API の例では、カスタム ページの論理的な名前を必須パラメータとして使用しています。 論理名は、ソリューション エクスプローラーでのページの名前の値です。

ページの論理名を検索します。

コンテキストなしでインラインのフルページとして開く

モデル駆動型アプリの Client API イベント ハンドラ内で、以下のコードを呼び出し、name パラメータをページの論理名に更新します。

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

レコードのコンテキストでインラインのフルページとして開く

この例では、NavigateTo 関数内の recordId パラメータを使用して、カスタムページに使用するレコードを提供しています。

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

カスタムページ内の Param 関数は、値を取得し、Lookup 関数を使用してレコードを取得します。

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

重要

URL を更新し、URL から起動したアプリが recordId が GUID であることを検証するため、recordId パラメーターは GUID である必要があります。

中央揃えのダイアログで開く

モデル駆動型アプリの Client API イベント ハンドラ内で、以下のコードを呼び出し、name パラメータをカスタム ページの論理名に更新します。 このモードでは、メイン フォーム ダイアログと同様のサイズ調整パラメータをサポートしています。

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

横詰めのダイアログで開く

モデル駆動型アプリの Client API イベント ハンドラ内で、以下のコードを呼び出し、name パラメータをカスタム ページの論理名に更新します。

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

グリッドのプライマリ フィールドのリンクからレコード ID 付きのフルページとして開く

この例では、NavigateTo 関数内の recordId パラメータを使用して、カスタムページに使用するレコードを提供しています。 カスタムページ内の Param 関数は、値を取得し、Lookup 関数を使用してレコードを取得します。

このより完全な例は、エンティティにバインドされたグリッド内のデータ行の既定のオープン動作を上書きする にあります。

  1. JScript タイプの Web リソースを作成し、name パラメーターを論理的なページ名に更新します。 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. テーブルのリボン CommandDefinition を OpenRecordItem にカスタマイズして、上記の関数を呼び出し、CrmParameter を値 SelectedControlSelectedItemReferences に含めます。

        <CommandDefinition Id="Mscrm.OpenRecordItem">
        <Actions>
            <JavaScriptFunction FunctionName="run" Library="$webresource:cr62c_OpenCustomPage">
                <CrmParameter Value="SelectedControlSelectedItemReferences" />
            </JavaScriptFunction>
        </Actions>
    </CommandDefinition>

  3. カスタムページでは、アプリの OnStart プロパティをオーバーライドして、Param 関数を使って recordId とルックアップ レコードを取得します。

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

    注意

    OnStart プロパティを変更した後は、アプリのコンテキスト メニューから OnStart を実行する必要があります。 この関数は、セッション内で 1 度だけ実行されます。

  4. カスタム ページで、RecordItem パラメータをレコードとして使用することができます。 以下に、EditForm の使用例を示します。

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

選択したレコードから編集可能なグリッドで、レコード ID の中央に配置されたダイアログとして開きます

編集可能なグリッドは、ビューで特定のレコードが選択されたときにアクションを実行するシナリオで、OnRecordSelect イベントのトリガーに使用することができます。 この例では、NavigateTo 関数内の recordId パラメータを使用して、カスタムページに使用するレコードを提供しています。 レコード ID は、GridEntity オブジェクトの getId メソッドを使って取得します。 カスタムページ内の Param 関数は、値を取得し、Lookup 関数を使用してレコードを取得します。

  1. テーブル内の編集可能なグリッド コントロールを有効にします。

  2. JScript タイプの Web リソースを作成し、name パラメータを論理的なページ名に更新します。 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. カスタムページでは、アプリの OnStart プロパティをオーバーライドして、Param 関数を使って recordId とルックアップ レコードを取得します。

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

    注意

    OnStart プロパティを変更した後は、アプリのコンテキスト メニューから OnStart を実行する必要があります。 この関数は、セッション内で 1 度だけ実行されます。

  4. カスタム ページで、RecordItem パラメータをレコードとして使用することができます。 以下に、EditForm の使用方法を示します。

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

モデル駆動型アプリのカスタムページの概要
モデル駆動型アプリにカスタム ページを追加する
navigateTo (クライアント API 参照)