はじめに
Power Platform 推進チームの小野です。
本稿では、テーブルのような見た目のギャラリーをテンプレート化した YAML について共有・解説します。
テーブルっぽいギャラリーの必要性
アプリの画面上に表形式でデータを表示する機会は多いはずです。多くの場合、アプリで実現したいことは「テーブルデータの操作」であり、テーブルにレコードを追加したり、レコードを選択して編集・削除したりする機能が求められます。レコードを選択する画面で、なじみ深い Excel のような表形式が好まれるのではないでしょうか。
Power Apps でテーブルを表示するコントロールとしては、データテーブル と ギャラリー があります。細かい比較は下記のサイトが大変参考になります。
データテーブル コントロールは、簡単に作成できる反面、細かい調整ができないデメリットがあります。各行に編集ボタン・削除ボタンを入れたり、条件によって色を変えたり、といったことができません。
ギャラリーならそういった調整が可能ですが、表形式として使うには、列の「見出し」を自分で追加する必要があります。見出しを作ったり、上下二段になっている表示を一段に変えたりすれば表形式の見た目を表現できるものの、作成するたびに調整の手間がかかります。
そこで、表形式に整えた「テーブルっぽいギャラリー」を YAML 形式で共有して再利用できるようにしようと考えました。
YAML 形式での表示について
先月、Power Apps のコントロールを YAML 形式で表示する機能が Public Preview されました。コントロールの各プロパティを一覧で確認したり、YAML をもとにコントロールを作成したりと、色々な使い方が考えられる機能です。
誤解を恐れずに言えば、YAML を介してコントロール単位でのエクスポート・インポートができるわけです。以下でも言及されているとおり、ブログなどで機能を紹介するときに、読者がすぐに試せるサンプルを YAML で提供できるようになったのはありがたいですね。
YAML の表示方法
コントロールの三点リーダや右クリックから「ビューを表示」で、YAML が表示できます。
なお、この画面での YAML の編集は、現時点ではできません。VS Codeなどに貼り付けて編集しましょう。
YAML からコントロールを作成
YAML をもとにコントロールを作成するには、YAML をクリップボードにコピーした状態で「コードを貼り付ける」をクリックします。現状ではこのクリップボードを経由した貼り付けが唯一の方法のようで、コントロール作成前に一部変更するようなことはできません。
YAML
以下が「テーブルっぽいギャラリー」の YAMLです。150行ほどあります。
※ご利用は自己責任でお願いします。
YAML
- TPG_Container_Table: Control: GroupContainer Variant: verticalAutoLayoutContainer Properties: Height: =500 LayoutDirection: =LayoutDirection.Vertical LayoutMode: =LayoutMode.Auto Width: =800 Children: - TPG_Container_Labels: Control: GroupContainer Variant: horizontalAutoLayoutContainer Properties: AlignInContainer: =AlignInContainer.SetByContainer FillPortions: =0 Height: =60 LayoutGap: =2 LayoutMinHeight: =60 LayoutMode: =LayoutMode.Auto Width: =Parent.Width Children: - TPG_Label1: Control: Label Properties: Text: ="ラベル1" BorderColor: = Color: =RGBA(255, 255, 255, 1) DisplayMode: =DisplayMode.View Fill: =RGBA(56, 96, 178, 1) FontWeight: =FontWeight.Bold Height: =Parent.Height PaddingLeft: =10 - TPG_Label2: Control: Label Properties: Text: ="ラベル2" BorderColor: = Color: =TPG_Label1.Color DisplayMode: =DisplayMode.View Fill: =TPG_Label1.Fill FontWeight: =FontWeight.Bold Height: =Parent.Height PaddingLeft: =10 - TPG_Label3: Control: Label Properties: Text: ="ラベル3" BorderColor: = Color: =TPG_Label1.Color DisplayMode: =DisplayMode.View Fill: =TPG_Label1.Fill FillPortions: =1 FontWeight: =FontWeight.Bold Height: =Parent.Height PaddingLeft: =10 - TPG_Gallery: Control: Gallery Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0 Properties: AlignInContainer: =AlignInContainer.SetByContainer DelayItemLoading: =true Layout: =Layout.Vertical LoadingSpinner: =LoadingSpinner.Data TemplatePadding: =0 TemplateSize: =80 Width: =Parent.Width X: =40 Y: =40 Children: - TPG_NextArrow: Control: Classic/Icon Variant: ChevronRight Properties: OnSelect: =Select(Parent) AccessibleLabel: =Self.Tooltip Tooltip: ="項目の詳細の表示" Color: =RGBA(166, 166, 166, 1) Height: =50 Icon: =Icon.ChevronRight PaddingBottom: =12 PaddingLeft: =12 PaddingRight: =12 PaddingTop: =12 Width: =50 X: =Parent.TemplateWidth - Self.Width - 12 Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2) - TPG_Container_Datas: Control: GroupContainer Variant: horizontalAutoLayoutContainer Properties: Height: =Parent.TemplateHeight LayoutGap: =TPG_Container_Labels.LayoutGap LayoutMode: =LayoutMode.Auto Width: =Parent.Width Children: - TPG_Data1: Control: Label Properties: OnSelect: = Text: =ThisItem.SampleHeading FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal) Height: =Parent.Height PaddingBottom: =0 PaddingLeft: =TPG_Label1.PaddingLeft PaddingRight: =0 PaddingTop: =0 Width: =TPG_Label1.Width X: =TPG_Label1.X - TPG_Data2: Control: Label Properties: OnSelect: = Text: =ThisItem.SampleHeading FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal) Height: =Parent.Height PaddingBottom: =0 PaddingLeft: =TPG_Label2.PaddingLeft PaddingRight: =0 PaddingTop: =0 Width: =TPG_Label2.Width X: =TPG_Label2.X - TPG_Data3: Control: Label Properties: OnSelect: = Text: =ThisItem.SampleText FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal) Height: =Parent.Height PaddingBottom: =0 PaddingLeft: =TPG_Label3.PaddingLeft PaddingRight: =0 PaddingTop: =0 Width: =TPG_Label3.Width X: =TPG_Label3.X - TPG_Rectangle: Control: Rectangle Properties: OnSelect: =Select(Parent) Fill: =TPG_Label1.Fill Height: =Parent.TemplateHeight - TPG_Separator.Height Visible: =ThisItem.IsSelected Width: =4 - TPG_Separator: Control: Rectangle Properties: OnSelect: =Select(Parent) Fill: =If(ThisItem.IsSelected, TPG_Label1.Fill, ColorFade(TPG_Label1.Fill, 0.5)) Height: =1 Width: =Parent.TemplateWidth Y: =Parent.TemplateHeight - Self.Height
使い方
YAML 貼り付けでコントロールを作成したあと、可変値になっている箇所を更新してください。最低限、下記の箇所は更新が必要だと思われます。
- TPG_Container_Table：Height、Width（コンテナー全体のサイズ）
- TPG_Label各種：Text（見出しの項目名。
DataSourceInfo関数を使うと、テーブルの列名を候補として表示できます）
DataSourceInfo([テーブル名], DataSourceInfo.DisplayName, [列名])
- TPG_Gallery：Items（Gallery として表示するテーブルを指定）
- TPG_Data各種：Text（ギャラリーに表示されるフィールド。ThisItem. で列の候補を表示できます）
ThisItem. で候補を表示
表示する列を増やしたい場合
TPG_Label と TPG_Data をコピーして同じコンテナー内にペーストします。選択して Ctrl+C → Ctrl＋V で、同じコンテナー内に複製できます。コントロール名や Text は適宜更新してください。
なお、TPG_Label と TPG_Data については、末尾のモノのみ「幅(伸縮可能)」をオンにしておくのがオススメ。コンテナーの幅に合わせて自動的に調整してくれます。
おわりに
データ テーブル コントロールはいろいろと融通が利かず、「テーブルっぽいギャラリー」は便利だと思い、共有しました。やはり Excel っぽい見た目だと、なじみがあって使いやすいのではと思います。ただ、データ テーブル コントロールはまだプレビュー段階なので、今後のアップデートで改善されていく可能性はあります。
Power Apps はノーコード・ローコードでアプリが作成できる反面、ソースコードを介して部品を共有する文化は醸成されにくいと感じていました。今回のアップデートによって、コントロール単位でソースコードを共有しやすくなりました。YAML 出力の機能をうまく使って「車輪の再発明」を防ぎ、アプリ作成を効率化したいと思います。
