LoginSignup
4

More than 1 year has passed since last update.

Power Apps で Excel のようなレイアウトを表現してみる

Last updated at Posted at 2022-05-28

※2022/07/14 追記
コンポーネントで作る記事になっていますが、コンポーネントの代わりにコンテナでも作れることが分かりました。

下記のような Excel を用意して、これを Power Apps で表現していきます。
Excel テンプレートは下記からダウンロードして、適当なデータを3件入力しています。
https://www.microsoft.com/ja-jp/office/pipc/template/result.aspx?id=14487&th=31
image.png
このデータを表現するため下記のような SharePoint リストを作って、データを入れます。
image.png
Power Apps でキャンバスアプリを作って、データの追加で SharePointリストを追加し、縦の空 Gallery の Items に設定します。
image.png
一つ一つ対応する項目を追加します。今回はラベルで追加しました。入力したい場合はテキスト入力でもいいと思います。
image.png
Gallery の端までくるとドラッグアンドドロップで移動できないので x値を入力して調整します。
image.png
項目が多いので見切れる項目が出てきます。そのままだと横スクロールバーが出ないので一度コンポーネント化してから水平コンテナにいれていきます。
image.png
Component の下に作った Gallery を移植していきます。外部からテーブルを設定できるようにカスタムプロパティで DataSource を作成し、SharePointリストを設定し、Gallery の Items に DataSource を設定します。 Componet のサイズは何でも構いませんがここでは 1800 × 300 にします。
image.png
Gallery のサイズは Parent.Height、Parent.Width にしてコンポーネントのサイズに合わせます。スクロールバーの表示をONにします。
image.png
Gallery のテンプレートパディングを0にして詰めて、各項目の罫線を1にしてセルを表現します。
image.png
作成したコンポーネントを水平コンテナに入れて、水平方向のオーバーフローをスクロールにすることで項目が多くても横スクロールで見ることが出来ます。
image.png
同様にヘッダーをコンポーネントで作成します。
image.png
コンポーネントを水平コンテナに入れるとヘッダずれを起こさない表が出来ます。
image.png
あとはタイトルと現在日時を表示するラベルを追加すれば完成です。
image.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4