Power Apps モデル駆動型アプリセクションの表示/非表示を切り替える JavaScript (Dynamics 365でも動く）

セクション部分の表示非表示を条件によって切り替えたいと思うことってあると思います。

例えば、このような選択肢があったときに、オプションによって、必要なセクションだけを表示したいときです。

部屋を選んたときには部屋のセクションだけが表示され、駐車場を選んだときには駐車場のセクションが表示される。そんなイメージです。

実は、これ標準のビジネスルールでできそうでできないことなんです。

開発の流れ

今回はこれをJavaScript で実現してみましょう。

エディターを入手する

例えばVisual Studio Code などのエディタでJavaScript のコードを記述します。もし持っていない場合は以下よりダウンロードできます。

https://aka.ms/VSCode

JavaScript を記述する

ビジネス要件にあったJavaScript のコードを記述します。

モデル駆動型アプリにアップロードする

モデル駆動型アプリのWeb リソースにアップロードします。

フォームに関連付ける

JavaScript 関数とイベントハンドラーの関連付けを行います。これで完成です。

この後問題なく動いているか必要に応じてテストします。

今回は、特定の選択肢列から選択肢を選んだら、関連する3種類のセクションの表示・非表示が切り替わるようにします。

以下のようなコントロールが存在しているとします。

表示名	コントロール種別	論理名
収益種別	選択肢列	geek_shuuekishubetsu 選択肢: ・部屋 (内部番号: 100,000,000) ・駐車場 (内部番号: 100,000,001) ・その他 (内部番号: 100,000,002)
収益の詳細	タブ	tab1
部屋	セクション	room
駐車場	セクション	car
その他	セクション	other

仕組みの解説

モデル駆動型アプリでは、フォームが表示されたときに開いたデータを取得する事ができるようになっています。この処理はフォームデザイナー画面のイベントの構成で確認できます。

このように、実行コンテキストを最初のパラメーターとして割らすことができるようになっていますので、これを利用することでフォームのデータをJavaScript に読み込みすることができます。

この取得したデータを利用できるUI要素の取得のAPI リファレンスは以下のとおりです。

UI要素	説明
フォーム	実行コンテキストからフォーム情報を取得します。実行コンテキストを`executionContext` 引数で取得した場合、 `getFormContext()` 関数にて取得できます。例: `var FormContext = executionContext.getFormContext()`
タブ	タブは宣言したFormContext から取得できます。論理名を指定します。例: `var tab = FormContext.ui.tabs.get("tab1")`
セクション	セクションは宣言した`tab`から取得できます。論理名を指定します。例: `var room = tab.sections.get("room")`
フィールド	フィールドは`FormContext`から`getAttribute`関数を用いて取得できます。論理名を指定します。更に、コントロールに設定されている値を取得する場合は `getValue`関数を利用します。選択肢の場合は、ラベルではなく値が入ってきます。例: `var option = FormContext.getAttribute("geek_shuuekishubetsu").getValue()`

JavaScript コード

この仕組みを利用して、hideTab 関数を作成します。

セクションの表示を切り替えているのでhideSectionのほうが適切ですが、名前の変更を忘れました

コピーしました！

JavaScript

function hideSection(executionContext) {
    var FormContext = executionContext.getFormContext();
    var option = FormContext.getAttribute("geek_shuuekishubetsu").getValue();
    var tab = FormContext.ui.tabs.get("tab1");
    var room = tab.sections.get("room");
    var car = tab.sections.get("car");
    var other = tab.sections.get("other");
    if ( option == 100000000) {
        room.setVisible(true);
        car.setVisible(false);
        other.setVisible(false);

    } else if (option == 100000001) {
        room.setVisible(false);
        car.setVisible(true);
        other.setVisible(false);
    } else if (option == 100000002) {
        room.setVisible(false);
        car.setVisible(false);
        other.setVisible(true);
    } else {
        room.setVisible(false);
        car.setVisible(false);
        other.setVisible(false);
    } 
}

作成したコードはhide.js等と名前をつけて保存しましょう。これをWeb リソースにアップロードして、イベントに関連付けます。