演習 - コマンドを含むカスタム ページの使用

完了

この演習では、モーダル ダイアログでカスタム ページを表示するコマンド バー ボタンを追加します。

重要

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

タスク: カスタム ページの作成

このタスクでは、資金調達アプリケーション用の新しいカスタム ページを追加します。

  1. https://make.powerapps.com に移動し、テスト環境が選択されていることを確認します。

  2. アプリを選択し、資金調達アプリケーションを選択して、編集を選択します。

    アプリケーションの編集ボタンのスクリーンショット。

  3. + 新規を選択します。

    [新しいページの追加] ボタンのスクリーンショット。

  4. カスタム ページを選択し、次へを選択します。

  5. 新しいカスタム ページの作成を選択し、[名前] に What if と入力して、追加を選択します。

    カスタム ページの作成ダイアログ スクリーンショット。

  6. データ タブを選択し、データの追加を選択します。

    データの追加ボタンのスクリーンショット。

  7. 資金調達を検索し、資金調達テーブルを選択します。

    データの追加ダイアログのスクリーンショット。

  8. ツリー ビュー タブを選択し、アプリ オブジェクトを選択します。

  9. 数式バーで [OnStart] を選択し、その下に式を貼り付けます。 この式によって、以下の変数が作成されます。

    1. レコード変数には、フォーム上に現在のレコードが保持されます。

    2. remainingAmount 変数には、資金調達目標の残りの金額が保持されます。

    3. numberOfPeople 変数は、資金調達目標の達成に向けて支援する人数を追跡します。 この変数は 1 で初期化されます。

    4. averageDonation 変数は、各人が資金調達目標に到達するために支援する金額を追跡します。 残額でこの変数を初期化しました。

    Set(record,LookUp(Fundraisers,Fundraiser=GUID(Substitute(Substitute(Param("recordId"),"{",""),"}",""))));Set(remainingAmount,record.'Fundraiser Goal'-record.'Total Donations');Set(numberOfPeople,1);Set(averageDonation,remainingAmount)

    app on-start 式のスクリーンショット。

  10. Screen1 を選択し、+ 挿入を選択します。

  11. レイアウト グループを展開し、垂直コンテナーを選択します。

    垂直コンテナーの挿入ボタンのスクリーンショット。

  12. コンテナーを選択します。

  13. 数式バーに移動し、コンテナーの値を 1280 に変更します。

  14. コンテナーの高さ値を 680 に変更します。

  15. コンテナーが以下の図のようになります。

    サイズが変更されているコンテナーのスクリーンショット。

  16. コンテナーを選択し、+ 挿入ボタンを選択します。

  17. 人気グループからラベルを選択します。

  18. [テキスト] にユーザー数と入力します。

    ラベル テキストの値のスクリーンショット。

  19. コンテナーを選択し、+ 挿入ボタンを選択します。

  20. 人気グループからテキスト ボックスを選択します。

  21. テキスト ボックス ユーザー数の名前を変更します。

  22. [ユーザー数] テキスト ボックスのNumberOfPeople に設定します。

    テキスト ボックスの値のスクリーンショット。

  23. コンテナーを選択し、+ 挿入ボタンを選択します。

  24. 人気グループからラベルを選択します。

  25. [テキスト] に 1 人あたりの金額と入力します。

  26. コンテナーを選択し、+ 挿入ボタンを選択します。

  27. 人気グループからテキスト ボックスを選択します。

  28. テキスト ボックス 1 人あたりの金額の名前を変更します。

  29. 1 人あたりの金額テキスト ボックスの値を averageDonation に設定します。

    テキスト ボックスの値のスクリーンショット。

  30. [1 人あたりの金額] テキスト ボックスの OnChange 値を以下の式に設定します。 この式は、寄贈された平均金額に基づく人数を設定します。

    If(Value('Amount per person'.Value) > 0, Set(numberOfPeople, remainingAmount /'Amount per person'.Value), Set(numberOfPeople, 1))

    テキスト ボックスの on-change 値のスクリーンショット。

  31. ユーザー数テキスト ボックスを選択します。

  32. [ユーザーの人数] テキスト ボックスの OnChange 値を以下の式に設定します。 この式は、寄贈した人数に基づく平均金額を設定します。

    If(Value('Number of people'.Value) > 0, Set(averageDonation, remainingAmount / 'Number of people'.Value), Set(numberOfPeople, 1);Set(averageDonation, remainingAmount))

  33. 保存を選択し、ページが保存されるまで待ちます。

  34. 公開を選択します。

  35. このバージョンを公開するを選択して、公開が完了するまで待ちます。

  36. カスタム ページ エディターのブラウザー ウィンドウまたはタブを閉じます。

  37. これで、モデル駆動型アプリケーションのエディターに戻ります。 OK を選択します。

    アプリケーションの再公開ダイアログのスクリーンショット。

  38. 保存を選択し、アプリが保存されるまで待ちます。

  39. 公開を選択し、アプリが公開されるまで待ちます。

  40. ブラウザーで新しいセッションを開始して https://make.powerapps.com に移動し、テスト環境が選択されていることを確認します。

  41. ソリューションを選択し、既定のソリューションを開きます。

  42. ページを選択し、作成した What if ページを見つけて、名前をコピーします。 今後の手順で必要になるため、この名前をメモ帳に保存しておきます。

    カスタム ページ名のスクリーンショット。

  43. 名前をコピーした後は、このブラウザ セッションを閉じてかまいません。

タスク: コマンド ボタンの追加

このタスクでは、資金調達テーブルのメイン フォームに新しいコマンド ボタンを追加します。

  1. メモ帳を開き、下にJavaScriptを貼り付けます。 JavaScript が中央揃えのダイアログを開きます。

    function calculate(itemId)
    {
    // Centered Dialog
    var pageInput = {
        pageType: "custom",
        name: "[YOUR CUSTOM PAGE NAME]",
    	recordId: itemId
    };
    var navigationOptions = {
        target: 2, 
        position: 1,
        width: {value: 50, unit:"%"},
        title: "What if"
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions)
        .then(
            function () {
                // Called when the dialog closes
            }
        ).catch(
            function (error) {
                // Handle error
            }
        );
    }
    
  2. [YOUR CUSTOM PAGE NAME] を、タスク 1 にコピーしたカスタム ページ名と置き換えます。

    JavaScript ファイルのスクリーンショット。

  3. ファイルをコンピューターにローカルに保存し、WhatIf.js と名付けます。 ファイル拡張子が .js であることを確認してください。

  4. モデル駆動型アプリ デザイナーに戻ります。

  5. 資金調達の省略記号 (...) ボタンを選択し、コマンド バーの編集を選択します。

    コマンド バーの編集ボタンのスクリーンショット。

  6. メイン フォームを選択し、編集を選択します。

  7. + 新規を選択し、コマンドを選択します。

    新しいコマンドの追加ボタンのスクリーンショット。

  8. Power Fx を選択し、続行を選択します。

  9. [ラベル] に What if と入力し、アイコンの使用再計算を選択して、[アクション] に JavaScript の実行を選択します。

    アクション ドロップダウンの値のスクリーンショット。

  10. + ライブラリの追加を選択します。

    ライブラリの追加ボタンのスクリーンショット。

  11. + 新しい Web リソースを選択します。

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

  12. ファイルの選択を選択します。

  13. 作成した WhatIf.js ファイルを選択し、開くを選択します。

  14. [表示名] に What If JS、[名前] に WhaIfJS と入力し、[タイプ] に JavaScript (JS) を選択して、保存して公開を選択します。

    新しい Web リソースの追加ダイアログのスクリーンショット。

  15. what if を検索して、さきほど追加した What If JS Web リソースを選択し、追加を選択します。

    JavaScript ライブラリの追加ダイアログのスクリーンショット。

  16. [関数名] に計算と入力し、+ パラメーターの追加を選択します。

    パラメーターの追加ボタンのスクリーンショット。

  17. [パラメーター 1] に FirstPrimaryItemId を選択します。

  18. 保存して公開を選択し、公開が完了するまで待ちます。

  19. 再生を選択します。

  20. 資金調達者を選択し、いずれかの資金調達レコードを開きます。

  21. 追加した [What If] コマンド バー ボタンが表示されます。 [What If] コマンド バー ボタンを選択します。

    What If ボタンのスクリーンショット。

  22. [What If] ダイアログが表示されます。

    カスタム ページ ダイアログ スクリーンショット。

  23. 人数値を 5 に変更します。 1 人あたりの金額は、各人が資金調達目標を達成するために支援する必要がある金額に更新する必要があります。

    計算済みの寄贈のスクリーンショット。

  24. 1 人あたりの金額の値を変更し、人数の計算がどのようになるかを確認します。

  25. お疲れさまでした。これで、カスタム ページを作成して、コマンド バー ボタンを使用してそのページをダイアログとして開く操作が完了しました。