PowerAppsとSharePointリストを連携し、Excelのようなデータ構造を持つリストをもとに、画面上の各セルをボタン風に操作して「!」を付与するシステムを構築する方法を紹介します。左右に分割された画面デザインを用い、左側にはリストの各行を選択できるギャラリー、右側にはその行のセルが順次表示されるギャラリーを配置。さらに、セルをタップすると対象の列に「!」が追加され、視覚的フィードバック（色の変化など）で操作状況を把握できる仕組みを実装しました。今回は、PowerAppsの画面構成や操作手順、コード例、UI最終調整まで、初心者でも理解できるよう詳しく説明しています。
はじめに
僕は今回、Excelで整備されているデータ構造をSharePointリストに変換し、PowerAppsを用いてそのリストからセルごとに操作できるアプリを作成しました。このアプリは、左右に分割された画面で構成され、左側で対象の行を選択し、右側ではその行の各セルの値をボタン風に表示します。ボタンをタップすると、対象セルの先頭に「!」を追加し、色が変わることで操作状態を明確に示します。以下に、操作手順と共にUI調整、コード例を交えて解説しています。
PowerAppsとSharePointリストの連携手順
SharePointリスト「MyDataList」への接続
PowerAppsアプリ作成の第一歩は、既にSharePoint上に準備済みのリスト（Excelで整備した「リスト.xlsx」と同構造のリスト）「MyDataList」と接続することです。
- PowerAppsスタジオで「データの追加」をクリックし、接続先としてSharePointを選択します。
- 対象のSharePointサイトを選び、リスト一覧から「MyDataList」を選択。
- 接続が完了すると、左側のツリービューに「MyDataList」が表示され、以降はデータソースとして利用可能になります。
この操作で、アプリからSharePointデータの読み込み・更新ができる基盤が整ったことになります。
画面レイアウトの初期設定
ページデザインの選択と分割画面の構成
PowerAppsでは、「ページデザインで開始する」を選び、左右に分割されたレイアウトを採用します。僕の操作手順は以下の通りです。
- PowerApps起動時に「ページデザインで開始する」を選択する。
- 次に、分割画面（左右にコンテナがあるレイアウト）を選びます。
- 初期状態では、左右にそれぞれ白いパネルが配置された状態の画面が生成されます。
続いて、この初期画面からアプリの各操作パネルを構築していく流れになります。
左側ギャラリーの構築（Gallery1）
ギャラリー1のデータ表示設定
左側のギャラリー（垂直ギャラリー）を利用して、SharePointリスト「MyDataList」の各行を選択できるようにします。最初は、従来はIDを表示していましたが、今回の仕様ではIDは不要で、代わりにデータ内のCAT1列とCAT2列の値を用いた表示に変更します。
表示内容の変更
- ギャラリー1（Gallery1）の
Itemsプロパティは、引き続きMyDataListのままとなっています。 - もともとタイトル部分にIDを表示していたコントロール（Title1）を選択し、下記の数式に変更します。
"1桁目：" & Text(ThisItem.CAT1) & " 2桁目：" & Text(ThisItem.CAT2)
この設定で、例えばCAT1が「5」、CAT2が「0」の場合は以下のように表示されます。
1桁目：5 2桁目：0
この表示により、ユーザーは選択された行の基本情報（各桁の値）を直感的に把握できます。
右側ギャラリーの構築（Gallery3）
Gallery3の基本設定
右側のギャラリーは、左側で選択した行の各セルのデータを表示するものです。ここでは、Excelのように各列（0～9）をボタン風に表示させます。初期設定では4列分の数値が表示されていましたが、これを9列まで拡張するように調整します。
Gallery3のItemsプロパティ（9列まで表示する場合）
以下のコードは、左側のGallery1で選択された行の各列を一覧化するテーブルを作成します。リストの列名が、数字（0～9）で構成されている前提です。具体的には、
Table(
[
{ ColName: "0", Value: Gallery1.Selected.'0' },
{ ColName: "1", Value: Gallery1.Selected.'1' },
{ ColName: "2", Value: Gallery1.Selected.'2' },
{ ColName: "3", Value: Gallery1.Selected.'3' },
{ ColName: "4", Value: Gallery1.Selected.'4' },
{ ColName: "5", Value: Gallery1.Selected.'5' },
{ ColName: "6", Value: Gallery1.Selected.'6' },
{ ColName: "7", Value: Gallery1.Selected.'7' },
{ ColName: "8", Value: Gallery1.Selected.'8' },
{ ColName: "9", Value: Gallery1.Selected.'9' }
]
)
このテーブルにより、右側には常に最新の選択行の各セルが一覧として表示され、どのセルがどの列に属しているかが把握できます。
Gallery3内の各セル操作：タイトル部分のOnSelect設定
次に、右側の各セルをタップするとSharePointリストの対象セルに「!」を付加する動作を実装します。以前は4列対応のSwitch文を使っていましたが、これも9列まで拡張する形にします。以下は、Switch文を用いたコード例です。
Switch(
ThisItem.ColName,
"0", Patch(MyDataList, Gallery1.Selected, { '0': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"1", Patch(MyDataList, Gallery1.Selected, { '1': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"2", Patch(MyDataList, Gallery1.Selected, { '2': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"3", Patch(MyDataList, Gallery1.Selected, { '3': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"4", Patch(MyDataList, Gallery1.Selected, { '4': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"5", Patch(MyDataList, Gallery1.Selected, { '5': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"6", Patch(MyDataList, Gallery1.Selected, { '6': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"7", Patch(MyDataList, Gallery1.Selected, { '7': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"8", Patch(MyDataList, Gallery1.Selected, { '8': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) }),
"9", Patch(MyDataList, Gallery1.Selected, { '9': If(StartsWith(ThisItem.Value, "!"), ThisItem.Value, "!" & ThisItem.Value) })
)
このSwitch文によって、右側の各セルがタップされた際、選択された行の対応列のみが更新されることになります。これにより、全36列に対して正しい「!」が追加され、視覚的に更新される仕組みが実現できました。
UI最終調整と視覚的フィードバック
セルの背景色変更
操作性向上のために、セルが更新済みかどうかを背景色で示す設定を行いました。たとえば、右側ギャラリーのTitle3のFillプロパティに以下の式を設定しています。
If(
StartsWith(ThisItem.Value, "!"),
RGBA(255, 200, 200, 1),
RGBA(255, 255, 255, 1)
)
この設定により、対象セルに「!」が付加されると、背景色がグレーまたは赤っぽい色に変化し、一目で押された状態を確認できるようになっています。
表示上の「!」を隠す工夫
実際のデータは「!」付きですが、ユーザーには先頭の「!」を隠して見せるために、Title3のTextプロパティを以下のように設定しました。
If(
StartsWith(ThisItem.Value, "!"),
Mid(ThisItem.Value, 2, Len(ThisItem.Value) - 1),
ThisItem.Value
)
この式により、データ自体は「!500」と保存されても、表示上は「500」となり、ユーザーから不要な記号を隠すことができます。これにより、見た目の統一感が保たれ、UI全体がすっきりと仕上がります。
ラベルとボタンの使い分け
今回、数多くのセルを一度に表示するため、できるだけ軽量なラベルや矩形（Rectangle）を用いて操作感・押し感を実現しました。
なお、PowerAppsのLabelにはBorderRadiusプロパティがないため、角丸の効果が必要な場合はボタンやRectangleと重ね合わせる工夫が必要ですが、今回はシンプルに角丸は省略しました。これにより、パフォーマンス面でも優れた表示が可能となっています。
全体のまとめと応用可能な拡張アイディア
本記事で紹介したPowerAppsアプリは、左右分割の画面レイアウトを活用して、以下のような特徴を持ちます。
- 左側ギャラリー（Gallery1）
- SharePointリスト「MyDataList」から、CAT1とCAT2の値を横書きで表示
- 「1桁目：◯ 2桁目：◯」とわかりやすく整形
- 右側ギャラリー（Gallery3）
- 選択行の各セル（0～9列）を一覧表示
- 各セルは、タップすると動的に「!」が追加され、対象セルのデータが更新される
- 表示上では3桁目と結合結果（例：500）を「3桁目：0 つまり：500」と表示
- 視覚的フィードバック
- 押下時の背景色の変化で、ユーザーが操作状況を即座に把握できる
- 表示上、先頭の「!」を隠す処理でユーザーにとって見やすい表記に調整
このアプリ構成は、実務で多数のセル更新が必要なシステムでも応用可能です。たとえば、対象セルの状態によってボタンの色やアイコンを変更する、さらなるデータフィルタリングやユーザーごとのアクセス制限を加えるなど、拡張性も高い設計となっています。
実装を通じたポイントと学び
操作性とパフォーマンスの両立
大量のデータセルを一画面に表示する場合、パフォーマンスは非常に重要ですが、今回の設計では左右分割の画面を採用することで、必要な行のみを選択表示し、操作対象を絞る工夫がされています。これにより、各セルの更新操作がスムーズに行われ、ユーザー体験を損なわずに済むようになっています。
水平思考によるUI改善
シンプルな設計ながら、細かな視覚効果（背景色の変化、テキストの整形）や動的な更新処理の実装など、水平思考を活かしたUI改善策を次々と取り入れることで、ユーザーにとって直感的で使いやすいアプリが実現しました。各操作手順やUI調整の工程は、よりわかりやすく、柔軟に応用できる実装例となっています。
メンテナンス性と拡張性
今回の構成では、各セルの更新処理にSwitch関数を使って動的な更新を実現しましたが、実際の運用では拡張可能なコード設計が求められます。たとえば、列の数が変動する場合の対応や、条件に応じた書式設定、ユーザー操作履歴の記録など、今後の機能追加のベースとしても有用な設計思想が反映されています。
この記事を通して、PowerAppsとSharePointリストを使ったシンプルかつ高機能なセル更新アプリの構築手順とUI最終調整のコツが理解できたと思います。実際の業務やプロジェクトで同様の課題に直面した際に、ぜひ参考にしてほしい内容になっています。アプリ作成の各工程を着実に進めることで、ユーザーの操作性と視覚的な美しさを両立させたシステム構築が可能です。
コメント