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

[アーティクル]
04/17/2024

この記事では、クライアント 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 関数を使用してレコードを取得します。

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

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

テーブルのリボン CommandDefinition を OpenRecordItem にカスタマイズして、上記の関数を呼び出し、CrmParameter を値 SelectedControlSelectedItemReferences に含めます。

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

カスタムページでは、アプリの OnStart プロパティをオーバーライドして、Param 関数を使って recordId とルックアップレコードを取得します。
```
App.OnStart=Set(RecordItem, 
    If(IsBlank(Param("recordId")),
        First(<entity>),
        LookUp(<entity>, <entityIdField> = GUID(Param("recordId"))))
    )
```
注意

OnStart プロパティを変更した後は、アプリのコンテキストメニューから OnStart を実行する必要があります。この関数は、セッション内で 1 度だけ実行されます。
カスタムページで、RecordItem パラメータをレコードとして使用することができます。以下に、EditForm の使用例を示します。
```
EditForm.Datasource=<datasource name>
EditForm.Item=RecordItem
```

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

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

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

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

カスタムページでは、アプリの OnStart プロパティをオーバーライドして、Param 関数を使って recordId とルックアップレコードを取得します。
```
App.OnStart=Set(RecordItem, 
    If(IsBlank(Param("recordId")),
        First(<entity>),
        LookUp(<entity>, <entityIdField> = GUID(Param("recordId"))))
    )
```
注意

OnStart プロパティを変更した後は、アプリのコンテキストメニューから OnStart を実行する必要があります。この関数は、セッション内で 1 度だけ実行されます。
カスタムページで、RecordItem パラメータをレコードとして使用することができます。以下に、EditForm の使用方法を示します。
```
EditForm.Datasource=<datasource name>
EditForm.Item=RecordItem
```

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

次の方法で共有

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

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

論理名を見つける

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

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

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

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

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

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

その他のリソース

次の方法で共有

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

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

論理名を見つける

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

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

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

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

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

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

関連記事

その他のリソース

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

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

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