演習 - ギャラリーへのデータの取り込みとフィルター処理

完了

これで、Power Apps へのデータ ソースの追加、ギャラリーの追加、Dataverse へのデータの入力が完了し、データを表示する準備が整いました。 キャンバス アプリに戻って、Scr_AllExpenses 画面に移動します。 この画面を別のタブで開いた場合は、ギャラリーがまだ生成されていないことに注意してください。 Power Apps はデータ ソースをキャッシュします。変更時には、それが最新のバージョンとは限りません。

この問題を避けるには、次の手順に従います。

  1. 左側のメニューで データ ボタンを選択し、経費清算書 を見つけます。

  2. 経費精算書 の横の省略記号 (...) メニューを選択し、更新 を選択します。

    データ ペインで経費精算書の横の省略記号ボタンを選択して更新オプションを表示しているスクリーンショット。

    経費精算書のデータがギャラリーに入力されます。

  3. さまざまなコントロールを選択できる ツリー ビュー に戻ります。 (ヒント: ツリー ビュー アイコンは重ねた紙のようなアイコンです。)

  4. ギャラリーをドラッグして、画面の上部に配置します。 どのプロパティが影響するかを知りたい場合は、配置 領域で Y プロパティを 236 に設定し、サイズ 領域で Height プロパティを 900 に設定します。 ギャラリーは、次のスクリーンショットのようになります。

    ギャラリーで配置の Y を 236、サイズの高さを 900 に設定したスクリーンショット。

次に、より有用な情報を表示する必要があります。 この場所の情報は有用ですが、ギャラリーに表示されている日付は 1 つのみであり、この日付が出発日か到着日かは不明です。

  1. Subtitle2 を選択し、プロパティ タブの Text プロパティを確認します。ギャラリーには別のフィールドが割り当てられている場合がありますが、この場合は ThisItem.'Created On' が表示されています。 ギャラリーのテーブルのすべての情報は、行を指定する ThisItem で始まります。 そのため、操作できるのは最初の行のみで、その他の行はロジックを使用して取得して実行する必要があります。 これについては、後で説明します。ここでは、このフィールドを出発日に変更します。

  2. 次のスクリーンショットに示すように、Text プロパティに ThisItem.'Departure Date' と入力します。

    Power Apps で Text プロパティを選択して新しい値を入力したスクリーンショット。

    この出発日には、問題が 2 つあります。 まず、時刻が表示されていますが、この演習では必要ありません。 次に、どちらの日付が表示されているのかが、まだわかりません。 ここでは、いくつかのテキストを操作する必要があります。 形式を設定する場合には、Text 関数がよく使用されます。

  3. Text プロパティを Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate) に更新します。

    ここでは、前と同じ情報を必要な形式で設定する必要があります。 テキストの文字列をつなげるには、アンパサンド (&) を使用します。また、式バーでテキストを定義するには、引用符を使用します (最初の画面を作成した場合と同様)。 これらの原則を組み合わせて、出発日と到着日を作成して、日付範囲として表示します。

  4. 式を次のコードに更新します。 式の更新が完了したら、Subtitle2 のテキストは次のスクリーンショットのようになります。 Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate) & " - " & Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate)

    Subtitle2 のテキストの式のスクリーンショット。

    式バーの外側をクリックすると、式の DateTimeFormat の部分が表示されなくなります。 このような状況は一部の関数で発生しますが、コードに悪影響を与えるものではありません。 式バーに戻ってクリックすると、式全体が表示されます。

これで、ギャラリーに必要な形式が整いました。次は、データ行を追加する必要があります。 出張者が確認する必要があるのは、自分のレコードのみです。 現時点では、全員の経費精算書が表示されます。 データをフィルター処理するには、ギャラリーの Items プロパティを変更します。 まず、サインインしているユーザーの情報を収集する必要があります。

  1. App コントロールは、ツリー ビュー の他のすべてのコントロールの上に表示されます。 App を選択し、プロパティ ドロップダウン メニューで OnStart を選択します。

    ツリー ビューで App が選択され、OnStart プロパティが強調表示されているスクリーンショット。

    このプロパティでは、アプリの起動時に実行する 1 つ以上の関数を入力できます。 この場合は、サインインしているユーザーの情報を収集します。 このデータ ソースはアプリの任意のインスタンスで呼び出すことができますが、1 回だけ呼び出して、アプリでその後に使用するために保存するのが最善の方法です。 データ ソースを呼び出すたびに (この場合は Microsoft Azure Active Directory から)、アプリでパフォーマンスの負荷が発生し、リソースが使用されます。 そのため、特にユーザー データなど、アプリ インスタンス全体で同じものを使用する場合は、できるだけ呼び出しを少なくすることをお勧めします。

    後で使用する情報を格納するために、変数を設定できます。 基本的に、変数はテキスト、日付、数値、レコード (データ行) などのさまざまな形式の情報です。 従来のコードでは、多くの場合、使用する変数の型を定義する必要があります。 ただし、Power Apps は変数の型を自動で判別します。 変数を設定する場合は、その変数に対して常に同じ型 (定義) を使用してください。

  2. 変数を定義するには、OnStart プロパティの式に Set(VarUser, User()) と入力します。

    OnStart 変数で式が定義されているスクリーンショット。

    VarUser は変数名です。User() は定義で、この場合は Azure AD から情報を収集する関数です。 変数には任意の名前を使用できます。ただし、コントロールと同様に、変数の先頭に var と付けたり、その他の後でわかりやすい命名規則を使用したりすることをお勧めします。

    ユーザーは、OnStart プロパティをトリガーするように指示する必要はありませんが、作成中にこのプロパティを変更する場合はトリガーする必要があります。

  3. App の横の省略記号 (...) を選択して変数をトリガーし、OnStart の実行 を選択します。

    ツリー ビュー ペインで App の横の省略記号が選択され、OnStart の実行が強調表示されているスクリーンショット。

変数に値が入力されたので、変数を使用してギャラリーのフィルター処理を行うことができます。

  1. ツリー ビューGal_ExpenseReports_AllExpenses を選択し、ドロップダウン メニューに Items プロパティが表示された状態にします。

  2. Expense ReportsFilter('Expense Reports', Traveler.'Primary Email'=VarUser.Email) に置き換えます。

    これで、データにフィルターが適用され、自分が出張者である項目に絞り込まれます。

    定義されているフィルターの式のスクリーンショット。

    式を入力すると、Power Apps に適切な言語で候補が表示されます。 この機能は、式と式の作成方法を知るために役立ちます。 また、メールを見つけるために出張者の情報をドリルダウンする必要があることにも注意してください。 これはルックアップ列であるため、Users テーブルのすべての情報が含まれています。 ピリオドは、参照する必要があるものを深く探すために役立つショベルのようなものです。 VarUser には、フルネーム、メール、写真などの User() 関数のすべての情報が含まれているため、同じようにピリオドを使用する必要があります。

これで、ギャラリーに必要なものが表示されるようになりました。 ただし、ページの機能を高め、ユーザー エクスペリエンス (UX) を向上させるには、ページにいくつかの項目を追加する必要があります。 次のタスクは、ユーザーが正しい画面が表示されていることを知ることができるタイトルを追加します。

  1. ギャラリーの上の空き領域をクリックして、挿入 タブを選択します。

  2. Label を選択して、画面に新しいラベルを追加します。

  3. プロパティ ペインまたは 詳細 ペインを使用して、Label コントロールの以下のプロパティを変更します。

    • テキスト: すべての経費精算書

    • サイズ: 24

    • フォントの太さ: 中太

    • X: 0

    • Y: 0

    • 配置: 中央揃え

    • 高さ: 92

    • : 640

    • Fill: RGBA(85, 106, 129, 1)

    これらのラベルのプロパティの設定が完了したら、前述の命名規則に従ってラベルの名前を変更します。 画面は次の図のようになります。

    入力したラベルのプロパティのスクリーンショット。

    次に、ホーム画面に戻る方法が必要です。 ボタンのアクションを使用することもできますが、さまざまなコントロールのアクションを使用することもできます。 それらのコントロールの 1 つがアイコンです。

  4. 挿入 タブで、アイコン ドロップダウン メニューを選択します。 必要なアイコンを追加するか、使用できるアイコンを選択して、プロパティのアイコンを変更できます。 開発者によっては、スクロールして必要なアイコンを見つけるのではなく、アイコンを検索することができるため、この方法を使用します。

  5. この演習では、戻る アイコンを使用して、このアイコンをクリックするとホームページに戻るようにします。

    アイコン ドロップダウン メニューで戻るアイコンが強調表示されているスクリーンショット。

  6. プロパティ ペインまたは 詳細 ペインを使用して、戻る アイコンの以下のプロパティを変更します。

    • X: 9

    • Y: 21

    • Height: 50

    • Width: 64

    • Color: RGBA(255, 255, 255, 1)

    • OnSelect: Back()

    Navigate() 関数を使用できる場合は、Back() 関数を使用して、ユーザーが現在の画面の直前の画面に戻れるようにします。 どちらの関数も使用できますが、この演習では Back() を使用して、他の有用な関数も使用できるようにします。

  7. アイコンの名前を Icn_Back_AllExpenses に変更します。

    アイコンとその新しい名前のスクリーンショット。

    ユーザー エクスペリエンスを高めるために追加できるもう 1 つのコンポーネントは、ユーザーが探している経費精算書をすぐに見つけることができる出張先のフィルターです。

  8. 別のラベルを画面に追加して、以下のプロパティを設定します。

    • Text: 出張先

    • Size: 18

    • X: 0

    • Y: 92

    • Height: 144

    • Width: 640

    • Fill: ColorFade(Lbl_Header_AllExpenses.Fill, 30%)

    • PaddingTop: 20

    • PaddingLeft: 40

    • VerticalAlign: VerticalAlign.Top

  9. ラベルの名前を Lbl_TripDestination_AllExpenses に変更します。

    ColorFade() 関数は、Fill プロパティに使用され、作成した最初のラベルの Fill プロパティを参照します。 他のコントロールへの参照はキャンバス アプリでよく使用されるため、コントロールの名前は非常に重要です。 ColorFade() 関数を使用すると、一定のパーセンテージで色を明るくまたは暗くすることができます。 正のパーセンテージでは明るい色が表示され、負のパーセンテージでは暗い色が表示されます。 この関数は、アプリをデザインするときに便利です。

    このラベルは表示が少し異なっています。 それは、ドロップダウン メニューを重ねようとしているためです。 ラベルやドロップダウン メニューの後ろに四角形を配置することはできますが、コントロールが多いと画面の読み込みが遅くなります。 そのため、できるだけ使用するコントロールは少なくし、結合できる場合は結合します。

    新しいラベルを追加して設定すると、次の画像のようになります。

    出張先ラベルが配置されているアプリのスクリーンショット。

  10. 引き続き、挿入 タブで 入力 ドロップダウン メニューを選択し、Drop Down コントロールを選択します。

  11. プロパティ ペインまたは 詳細 ペインを使用して、Drop Down コントロールの以下のプロパティを変更します。

    • X: 35

    • Y: 162

    • 高さ: 50

    • Width: 560

    • Fill: Lbl_Header_AllExpenses.Fill

    • ChevronBackground: Lbl_Header_AllExpenses.Fill

    • Size: 16

    • AllowEmptySelection: true

    • Items: Distinct(Filter('Expense Reports', Traveler.'Primary Email'=VarUser.Email), 'Trip Destination')

    Drop Down コントロールには、他のコントロールとは異なるプロパティがあります。 これは、より多くのコントロールを使用するにつれて、わかってきます。 また、この手順では、テーブルから 1 つのフィールドを選択して重複を削除する Distinct() 関数を使用しています。 そのため、同じ場所に複数回出張していても、その場所はドロップダウン メニューには 1 回だけ表示されます。

  12. Drop Down コントロール の名前を Ddn_Destination_AllExpenses に変更します。

    アプリは次の画像のようになります。

    出張先ラベルの下の名前を変更した Drop Down コントロールのスクリーンショット。

    この画面での最後のタスクは、Drop Down コントロールの選択内容に従ってギャラリーがフィルター処理されるようにすることです。

  13. ギャラリーの Items プロパティを次のように変更します。

    If(
         IsBlank(Ddn_Destination_AllExpenses.Selected.Result),
         Filter(
             'Expense Reports',
             Traveler.'Primary Email' = VarUser.Email
         ),
         Filter(
             'Expense Reports',
             Traveler.'Primary Email' = VarUser.Email,
             'Trip Destination' = Ddn_Destination_AllExpenses.Selected.Result
         ) 
    )
    

    式バーを展開して、入力できる範囲を広くすることができます。 式を入力したら テキストの書式設定 を選択して、テキストを読みやすくします。

    展開された式バーに式が追加され、テキストの書式設定ボタンが強調表示されているスクリーンショット。

この式は少し複雑なため、ここではその詳細を説明します。 まず、If() ステートメントで初期項目のプロパティをラップしています。これにより、1 つ以上の条件に応じて、異なる結果を指定できます。 この場合、ロジックのテスト (条件) は、Drop Down コントロールが空白かどうかです。 Drop Down コントロールが空白の場合 (true の値)、ギャラリーの項目はユーザーによってのみフィルター処理されます。 また、Drop Down コントロールが空白ではない場合 (false の値)、ギャラリーの項目はユーザーと出張先によってフィルター処理されます。

注意

ギャラリーの Items プロパティをリセットすると、特定のラベルが別のフィールドを参照するように切り替わる場合があります。 データが消えたように見える場合は、ラベルの Text プロパティが適切かどうかを確認してください。

ギャラリーのフィルターをテストするには、右上のボタンでアプリを 再生 モードにします。

保存したアプリで再生ボタンが強調表示されているスクリーンショット。

これで、経費精算書のすべてのデータを表示するための画面の設定は完了です。