今回は入力フォームとギャラリーを作成していきます。
前回までの内容で１．設定、２．コンテナ作成、３. ヘッダーとおこなってきました。
今回は、入力フォーム部分の実装を解説していきます。
今回から読み始めていただいた方は、下記ブログをまずは内容確認してください。
・Power Appsのレスポンシブレイアウトをやってみた ～準備編～
・Power Appsのレスポンシブレイアウトをやってみた ～コンテナ解説編～
・Power Appsのレスポンシブレイアウトをやってみた ～ヘッダー解説編～
完成形はこの様な形になります。
スマートフォンでスクリーンショットを撮影しています。
各コンテナーに名前・住所・電話・Faxのラベルとテキスト入力を設置していきます。
InputContainerName内部
■ラベル
名前：LabelName
Text："名前"
LayoutMinWidth：50
FillPortions：1
■テキスト入力
名前：InputName
Default：""
LayoutMinWidth：100
FillPortions：4
InputContainerName自体にも、余白と縦の表示位置を変更します。
PaddingTop：5
PaddingRight：5
PaddingBottom：5
PaddingLeft：5
LayoutAlignItems：Center
InputContainerAddress内部
■ラベル
名前：LabelAddress
Text："住所"
LayoutMinWidth：50
FillPortions：1
■テキスト入力
名前：InputAddress
Default：""
LayoutMinWidth：100
FillPortions：4
同様にInputContainerAddress自体にも、余白と縦の表示位置を変更します。
PaddingTop：5
PaddingRight：5
PaddingBottom：5
PaddingLeft：5
LayoutAlignItems：Center
InputContainerTel内部
■ラベル
名前：LabelTel
Text："電話"
LayoutMinWidth：50
FillPortions：1
■テキスト入力
名前：InputTel
Default：""
LayoutMinWidth：100
FillPortions：4
同様にInputContainerTel自体にも、余白と縦の表示位置を変更します。
PaddingTop：5
PaddingRight：5
PaddingBottom：5
PaddingLeft：5
LayoutAlignItems：Center
InputContainerFax内部
■ラベル
名前：LabelFax
Text："Fax"
LayoutMinWidth：50
FillPortions：1
■テキスト入力
名前：InputFax
Default：""
LayoutMinWidth：100
FillPortions：4
同様にInputContainerFax自体にも、余白と縦の表示位置を変更します。
PaddingTop：5
PaddingRight：5
PaddingBottom：5
PaddingLeft：5
LayoutAlignItems：Center
GalleyContainerを追加します。
コンテナー作成時に入れ忘れていましたが、BodyContainer内部にGalleyContainerを追加して設定していきます。
コンテナーの追加
名前：GalleryContainer
Height：Parent.Height-InputContainerName.Height
FillPortions：1
LayoutMinWidth：300
GalleryContainer内部
名前：GalleryClients
FillPortions：1
Height：GalleryContainer.Height
Items：CustomerList
※コレクションを指定します。後で作成するボタンに設定します。
GalleryClients内部のラベル
ギャラリーのレイアウトをタイトルとサブタイトルにして、足りないラベルを足してください。
名前：CstName
Text：ThisItem.CustName
Width：App.Width/2
X：0
Y：0
名前：CstAddress
Text：ThisItem.CustAddress
Width：App.Width/2
X：CstName.Width
Y：0
※Xの座標は、幅で狭くなるCstNameの位置に追従するように設定します。
名前：CustTel
Text：ThisItem.CustTel
Width：App.Width/2
X：0
Y：52
名前：CustFax
Text：ThisItem.CustFax
Width：App.Width/2
X：CstTel.Width
Y：52
※Xの座標は、幅で狭くなるCstCstTelの位置に追従するように設定します。
イメージ的には、1つのギャラリーを4分割します。
最後にFooterContainerの設定です。
FooterContainerには、ボタンを設置します。
FooterContainer設定
LayoutJustifyContent：LayoutJustifyContent.Center
LayoutAlignItems：LayoutAlignItems.Center
FooterContainer内部
最後にFooterContainer内部にボタンを設置します。
Name：AddButton
Text："登録"
OnSelect：Collect(CustomerList,{CustName:InputName.Text,CustAddress:InputAddress.Text,CustTel:InputTel.Text,CustFax:InputFax.Text})
※ボタンを押したときに、コレクションを作成して各テキスト入力の内容を登録します。
以上でレスポンシブレイアウトに対応したアプリケーションが完成しました。
スマートフォンでアプリを動作させている動画を掲載しておきます。
https://youtu.be/Zeey5ED8IXg
勉強会のお知らせ
4回に分けてレスポンシブレイアウトの作り方を解説しましたが、如何でしたでしょうか。
4月3日（土）11時から、一連のブログにまとめたレスポンシブレイアウトの内容を解説する勉強会を、サクッと1時間だけ開催します。
ご興味があれば、ぜひご参加ください！
■Power Appsのレスポンシブレイアウトにトライしよう勉強会
https://connpass.com/event/206276/