このサイトはアフィリエイトリンクを含んでいます
スポンサーリンク

PowerAppsでギャラリー表示が勝手に変わる！？変数管理と検索ボタン活用で解決した実践レポート

スポンサーリンク

PowerAppsを使ってSharePointリストのデータを表示・編集するアプリを作成していると、思わぬ動作や表示の乱れに悩まされることがあります。たとえば、テキスト入力に数字を1つ入力しただけなのに、ギャラリー内のチェック欄に「OK」が表示されたり、フォーカスが外れた瞬間に表示が一変したりする現象です。今回、僕はこうした現象に直面し、何度も試行錯誤を重ねた結果、入力値と確定値を分離する設計にたどり着きました。本記事では、その実践経験をもとに、原因の特定から解決策の導入までのプロセスを詳しく解説します。

スポンサーリンク

アプリ作成の初期設定と狙い

目的と基本フロー

僕が目指したのは、以下のような機能を持つPowerAppsアプリです。

  • SharePointリストのデータ表示
    リスト「MyDataList」から管理用のキーに応じたデータを抽出し、ギャラリーに表示する。
  • データの編集と更新
    ギャラリー内で「OK／NO」の選択やコメントの入力を行い、Patch関数でSharePointリストに更新する。
  • 一括操作機能
    すべてのチェック欄を一括で「OK」にするボタン（すべてOKボタン）を実装し、後で送信ボタンを押すと変更内容をリストに確定的に保存する。

当初の実装と問題点

最初の実装では、テキスト入力コントロール「txtKeyNumber」に入力された値をそのままギャラリーのフィルター条件に使っていました。

Items = Filter(
    MyDataList,
    KeyNumber = txtKeyNumber.Text
)

この実装だと、ユーザーが数字を入力するたびに即座にギャラリーが再計算され、入力途中の状態が反映されてしまいます。たとえば、数字「1」を打ち込んだだけでも、その時点のリストデータがフィルターされ、チェック欄の表示が変わる現象が発生しました。

また、ギャラリー内のチェック用ドロップダウンのDefaultプロパティには以下のような式を使用していました。

If(
    varAllApproved,
    "OK",
    If(
        IsBlank(ThisItem.columnStatus2.Value),
        "",
        ThisItem.columnStatus2.Value
    )
)

この式は「varAllApproved」というフラグ変数がtrueの場合に無条件で「OK」を表示するため、前の操作の影響が次のデータにも一瞬反映されてしまうという問題がありました。ユーザーが新しい管理用キーを入力しても、前のフラグ状態が残っていると、ギャラリー上に一時的に「OK」が表示されるという現象が確認されたのです。

入力値のリアクティブ更新が招く混乱

テキスト入力の動作と再評価のタイミング

PowerAppsでは、コントロールの値が変わるたびに自動的に再評価が行われる仕組みになっています。これ自体は非常に強力な機能ですが、入力中の値がそのままフィルター条件に反映される場合、ユーザーの意図とは異なるタイミングでギャラリーの内容が変わってしまいます。

  • 入力途中の状態
    ユーザーが「txtKeyNumber」に数字を入力している最中は、まだ確定していない状態です。しかし、この状態でギャラリーのItemsプロパティが再評価されると、中途半端な値でフィルターがかかり、表示が不安定になります。
  • フォーカス解除タイミング
    入力が確定してフォーカスが外れると、やっと本来のフィルター条件で再評価され、正しいデータが表示されます。しかし、フォーカス中と解除後で表示が大きく変動するため、ユーザーは操作に混乱してしまいます。

すべてOKフラグとの相乗効果

さらに、チェック用ドロップダウンのDefaultプロパティで「varAllApproved」を利用していることが、問題を複雑化させました。すべてOKボタンを押すと「varAllApproved」がtrueになり、どのデータに対しても無条件で「OK」が表示されるため、前の状態が次の管理用キーにも影響を与え、意図しない瞬間にチェック欄が「OK」になってしまいます。

Enterキーだけで確定する設計の試行錯誤

Enterキーでの確定操作を目指して

最初は、テキスト入力で数字を打った際、Enterキーを押したときだけフィルターを更新できないかと考えました。しかし、PowerAppsは単独のキー入力イベント（KeyPressなど）を細かく扱えないため、Enterキーを唯一のトリガーにすることはできませんでした。

  • OnChangeの限界
    OnChangeイベントは、入力が確定したタイミング（フォーカスが外れるなど）でしか発生しないため、入力中の状態を検知することができず、またマウスクリックなどでも同じ動作になってしまいます。

このため、Enterキーのみで確定する仕組みを作ることは現実的ではなく、別のアプローチが求められました。

検索ボタンと確定値用変数の導入

入力値と確定値の分離アプローチ

最終的に解決策として採用したのは、テキスト入力の値を直接Filterに使うのではなく、検索ボタンを用意して、そこで入力値を確定用変数にセットする方法です。

実装の概要

  • テキスト入力コントロール (txtKeyNumber)
    ユーザーはここに自由に数字を入力しますが、入力中はギャラリーには影響しません。
  • 検索ボタン (btnSearch)
    ユーザーが入力を確定するために、このボタンを押します。ボタンのOnSelectプロパティには、以下のコードを設定します。powerappsコピーするSet(varAllApproved, false); Set(varFilterKey, txtKeyNumber.Text)
  • ギャラリー (galItems)
    ギャラリーのItemsプロパティには、確定用変数を用いたフィルターを設定します。powerappsコピーするFilter(MyDataList, KeyNumber = varFilterKey)

この方法により、ユーザーがテキスト入力に値を入力している段階ではギャラリーの表示が変わらず、検索ボタンを押したタイミングで初めてフィルターが適用されるため、入力途中の不安定な更新が抑えられます。

すべてOKフラグのリセットによる影響軽減

すべてOKボタンを押すと「varAllApproved」がtrueになり、ギャラリー内のチェック用ドロップダウンは無条件で「OK」を表示します。しかし、次に新しいキー番号で検索するときに前のフラグが影響しないよう、検索ボタンのOnSelectで必ず「varAllApproved」をfalseにリセットするようにしました。

Set(varAllApproved, false);
Set(varFilterKey, txtKeyNumber.Text)

この工夫により、前の状態が持ち越されることなく、新たな検索結果で正しい表示が維持されるようになりました。

実際のコード例と動作確認

コード例の全体像

以下は、最終的に確定値用変数とすべてOKフラグを組み合わせた実装例です。

// btnSearch（検索ボタン）の OnSelect
Set(varAllApproved, false);
Set(varFilterKey, txtKeyNumber.Text);

// galItems の Items プロパティ
Filter(MyDataList, KeyNumber = varFilterKey);

// チェック用ドロップダウンの Default プロパティ
If(
    varAllApproved,
    "OK",
    If(
        IsBlank(ThisItem.columnStatus2.Value),
        "",
        ThisItem.columnStatus2.Value
    )
);

動作の流れ

  1. 数字入力中
    ユーザーが「txtKeyNumber」に数値を入力しても、ギャラリー「galItems」は何も更新されません。
  2. 検索ボタン押下
    ユーザーが「btnSearch」を押すと、varFilterKeyに入力値が格納され、同時にvarAllApprovedがfalseにリセットされるので、ギャラリーは新しいキー番号に基づいて正しくフィルターされます。
  3. すべてOKボタンの影響
    すべてOKボタン（別途用意）を押すとvarAllApprovedがtrueになり、ギャラリー内のチェック用ドロップダウンがすべて「OK」を表示します。
  4. 再検索時のリセット
    次に再び「btnSearch」を押すと、前回のすべてOK状態はリセットされ、新しい入力値に合わせた表示が行われます。

この実装により、入力値と確定値を分離して管理することで、リアクティブ更新による混乱とすべてOKフラグの影響を防ぎ、ユーザーが意図したとおりの表示と更新が実現できました。

失敗事例から学んだ教訓と今後の展望

失敗から得た3つの重要なポイント

1. リアクティブ更新は利点でもあり欠点でもある

PowerAppsの自動再評価機能は非常に便利ですが、入力中の不確定な状態が画面に反映されるとユーザー体験を損ねる可能性があります。入力値と確定値を分けるアプローチは、この欠点を克服する一つの方法です。

2. 変数管理の徹底が不可欠

一度設定した変数が次の操作に影響を及ぼすことがないよう、操作毎に変数をリセットすることが大切です。今回の実装では、検索ボタンを押すたびにvarAllApprovedをfalseに戻すことで、この問題を解決しました。

3. ユーザーの意図に沿った操作フローを設計する

リアルタイムで自動更新させる設計は一見スマートですが、ユーザーが誤操作や混乱を起こさないよう、明確な確定操作（検索ボタンなど）を取り入れることで、より直感的な操作体験を提供できます。

今後の展望

今回の実装を通じて、PowerAppsのリアクティブな動作と変数管理の重要性を再認識しました。今後は、さらに複雑なシナリオにも対応できるよう、より高度な変数制御や条件分岐を検討し、ユーザーが直感的に操作できるUI設計を目指していきます。もし同じような悩みに直面している方がいれば、今回の解決策が一助となることを願っています。

コメント

タイトルとURLをコピーしました