演習 - クライアント スクリプトを使用してフォーム セクションを非表示にする

  • 9 分

この演習では、クライアント スクリプトを使用して、プロジェクトの開始日が指定されていない場合または未来である場合に [状態] セクションを非表示にするというビジネス要件を実装します。

重要

Microsoft Dataverse がプロビジョニングされていて、サンプル アプリが有効になっているテスト環境を使用してください。 テスト環境がない場合は、コミュニティ プランに新規登録できます。

タスク 1: ソリューションとフォームを作成する

このタスクでは、ソリューションを作成し、ソリューションに既存のテーブルを追加して、ソリューションに追加したテーブルのメイン フォームを作成します。

  1. Power Apps Maker Portal に移動して、サンプル アプリが有効になっている正しい環境にいることを確認します。

    環境名のスクリーンショット。

  2. ソリューション、+ 新しいソリューションの順に選択します。

  3. 表示名に イノベーション チャレンジの拡張と入力し、公開元に CDS default publisher を選択して、作成を選択します。

    新しいソリューションのプロパティのスクリーンショット。

  4. 作成したイノベーション チャレンジの拡張が開きます。

  5. + 既存の追加、テーブルの順に選択します。

  6. 検索テキストボックスに「チーム」と入力し、チーム プロジェクトを選択して、次へをクリックします。

    メモ

    チーム プロジェクト テーブルが見つからない場合は、環境にサンプル アプリがない可能性があります。 サンプル アプリがインストールされている別の環境を選択するか、新しい環境を作成してください。

  7. オブジェクトの選択ボタンを選択します。

    コンポーネントの選択ボタンのスクリーンショット。

  8. フォーム タブを選択し、フォーム タイプがメインである情報フォームを選択して、追加を選択します。

    コンポーネントの追加ウィンドウのスクリーンショット。

  9. 追加をもう一度選択します。

  10. ソリューションに追加したチーム プロジェクト テーブルを開きます。

  11. データ エクスペリエンス カードで、フォームを選択します。

  12. フォームの種類がメインである情報フォームを開きます。

    情報フォームのスクリーンショット。

  13. 状態セクションを選択します。

    状態セクションのスクリーンショット。

  14. プロパティ ペインで、名前を section_status に変更して、非表示チェックボックスをオンにします。 既定では、セクション名には GUID が割り当てられます。 これを、スクリプトで参照するためにわかりやすい名前に変更します。 また、既定でこのセクションを非表示にして、フォームの読み込み時に表示と非表示を切り替える手間を減らします。

    非表示チェック ボックスのスクリーンショット。

  15. ツリー ビューに移動して、全般タブを選択します。

    全般タブのスクリーンショット。

  16. [プロパティ] ペインで、名前を tab_general に変更します。

  17. プロジェクトの開始列を選択します。

    プロジェクトの開始列のスクリーンショット。

  18. プロパティ ペインに移動して、テーブル列の名前の横にある (i) を選択します。

  19. 論理名 (sample_projectstart) をコピーして、メモ帳に貼り付けます。 この名前は、データ列を参照するためにスクリプトで使用します。

    情報ボタンと論理名が表示されているスクリーンショット。

  20. 保存して公開を選択して、変更内容を保存します。 公開が完了するまで待ちます。

  21. 戻るボタンを選択します。

    「戻る」ボタンのスクリーンショット。

  22. すべてを選択します。

  23. すべてのカスタマイズの公開を選択し、公開が完了するまで待ちます。

タスク 2: クライアント スクリプトを作成する

このタスクでは、プロジェクトの開始日に基づいて [状態] セクションの表示/非表示を切り替えるスクリプトを作成します。

[状態] セクションを非表示にします。 プロジェクトの開始日が空白または未来の日付ではない場合は、[状態] セクションを表示します。

  1. Visual Studio Code の新しいインスタンスを起動するか、任意のコード エディターを使用します。 Visual Studio Code は、このリンクからダウンロードしてインストールできます。

  2. フォルダーを開くを選択します。

    フォルダーを開くボタンのスクリーンショット。

  3. ドキュメント フォルダーにフォルダーを作成して、ClientScriptLab という名前を付けます。

  4. 作成した ClientScriptLab フォルダーを選択して、フォルダーの選択を選択します。

    フォルダーの選択画面とボタンのスクリーンショット。

  5. CLIENTSCRIPTLAB フォルダーにカーソルを合わせて、新しいファイルを選択します。

    新しいファイル ボタンのスクリーンショット。

  6. ファイルに FormTeamProject.js という名前を付けます。

  7. FormTeamProject.js に以下の関数を追加します。 関数は、一意の名前を持つか、名前空間を使用して一意にする必要があります。

    function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

  8. OnLoad 関数にこのスクリプトを追加します。 [プロジェクトの開始] 列の名前が sample_projectstart であることに注意してください。 これは、前に保存した論理名です。 このコードは、onChange のイベント ハンドラーを登録し、セクションを表示/非表示にする一般的な関数を呼び出します。 プロジェクトの開始日の入力によって表示/非表示の要件が変わった場合の変更を処理する必要があります。

    var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);

    OnLoad 関数のスクリーンショット。

  9. OnChange 関数にこのスクリプトを追加します。 このコードは、formContext を取得して、表示/非表示にする一般的な関数を呼び出します。

    var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);

  10. hideOrShowStatusSection 関数にこのスクリプトを追加します。 タブ名が tab_general、セクション名が section_status、列名が sample_projectstart であることに注意してください。

    var tabGeneral = formContext.ui.tabs.get('tab_general');
var sectionStatus = tabGeneral.sections.get('section_status');
var startDate = formContext.getAttribute('sample_projectstart').getValue();
var CurrentDate = new Date();
if (startDate == null || startDate > CurrentDate) {
  sectionStatus.setVisible(false);
} else {
  sectionStatus.setVisible(true);
}

  11. スクリプトは次の図のようになります。

    スクリプトの例のスクリーンショット。

  12. ファイル、保存を選択します。

タスク 3: スクリプトをアップロードする

このタスクでは、作成したスクリプトを環境に読み込みます。

  1. Power Apps Maker portal に移動して、正しい環境にいることを確認します。

  2. ソリューションを選択し、イノベーション チャレンジの拡張ソリューションを開きます。

  3. + 新規を選択し、詳細 | Web リソースを選択します。

    新しい Web リソースの追加ボタンのスクリーンショット。

  4. 名前に FormTeamProject.js、表示名に FormTeamProject.js と入力し、タイプに Java スクリプト (JS) を選択して、ファイルの選択を選択します。

    Web リソース ファイルの選択ボタンのスクリーンショット。

  5. さきほど作成した FormTeamProject.js ファイルを選択し、開くを選択します。

  6. 保存を選択します。

  7. これで、ソリューションにチーム プロジェクト テーブルと FormTeamsProject.js Web リソースが追加されました。

  8. このページから移動しないでください。

タスク 4: フォームを編集する

このタスクでは、チーム プロジェクト メイン フォームに JavaScript ライブラリを追加し、On Load イベントのイベント ハンドラーを追加します。

  1. イノベーション チャレンジの拡張ソリューションにいることを確認します。

  2. テーブルを展開し、チーム プロジェクト テーブルを展開します。

  3. フォームを選択し、情報フォームを開きます。

  4. プロパティ ペインに移動し、イベント タブを選択して、+ ライブラリの追加を選択します。

    フォームへの新しいライブラリの追加ボタンのスクリーンショット。

  5. 検索ボックスに team と入力し、Enter キーを押します。 FormTeamProject.js を選択し、追加を選択します。

    JavaScript ライブラリの追加ウィンドウのスクリーンショット。

  6. On Load セクションを展開して、+ イベント ハンドラーを選択します。

    イベント ハンドラーの追加ウィンドウのスクリーンショット。

  7. 関数に LearnLab_handleTeamProjectOnLoad と入力し、実行コンテキストを最初のパラメーターとして渡すチェックボックスをオンにして、完了を選択します。

    イベントの設定ダイアログを示すスクリーンショット。

  8. 保存して公開を選択し、変更が保存されるのを待ちます。

  9. 戻るボタンを選択します。

  10. すべてを選択します。

  11. すべてのカスタマイズの公開を選択し、公開が完了するまで待ちます。

タスク 5: テストする

このタスクでは、スクリプトをテストします。

  1. Power Apps Maker portal に移動して、正しい環境にいることを確認します。

  2. アプリを選択し、イノベーション チャレンジ アプリケーションを開きます。

  3. チーム プロジェクトを選択し、クラウド コンピューティング チーム プロジェクトを開きます。

  4. プロジェクトの開始列が空白であるため、状態セクションは表示されません。

    プロジェクトの開始列が空白で状態セクションが非表示のスクリーンショット。

  5. プロジェクトの開始の横のカレンダー アイコンをクリックして、今日の日付を選択します。

  6. 状態セクションが表示されます。

    プロジェクトの開始の値が今日に設定され、状態セクションが表示されたスクリーンショット。

  7. プロジェクトの開始を未来の日付に変更します。

  8. 状態セクションが非表示になります。

  9. プロジェクトの開始を過去の日付に変更します。

  10. 状態セクションがまた表示されます。

これで、JavaScript とクライアント API を使用して、ビジネス ルールなどの宣言型の方法では実装できないビジネス要件を実装しました。