やること

• Power Appsアプリを新規作成する。
• ヘッダーやフッターなどの大まかな画面割りを作成する。
  画面を上から「HeaderContainer」「NavigationContainer」「ErrorContainer」「MainContainer」「FooterContainer」に5分割する。
  MainContainer以外の4項目は高さを固定にして、MainContainerの高さは残った余白部を埋めるように動的に値を取る。

 

手順

１．アプリの新規作成

1. Microsoft 365から Power  Appsを選択
2. 「+ 作成」 > 「空のアプリ」 > 「空のキャンパス アプリ」
3. アプリ名を「テニスコート申請アプリ」と入力、形式は「タブレット」のまま「作成」ボタンをクリック

 

２．Root Containerの作成

1. 上部メニュー > 「+挿入」 > 「レイアウト」　＞「垂直コンテナ」を選択
   

   

2. オブジェクト名の変更
   「ツリービュー」 > 「Container1」 > F2 >「RootContainer」を入力
   
3.   プロパティの設定
   コンテナのサイズを画面全体に合わせるためにプロパティを編集
   プロパティウィンドウ > 「詳細設定」タブを選択し、以下の通りプロパティを設定

   /** プロパティ名: 設定値 */
   Width: Parent.Width
   Height: Parent.Height 
   DropShadow: DropShadow.None

   

   画面の横幅・高さにより柔軟に対応するために、WidthとHeightは必ず相対的に設定する。
   Parent.Width、Parent.Heightとすると、親要素「Screen1」のWidth、Heightと同じ値を設定することができる。

   また、コンテナはデフォルトでDropShadowが有効であり、うっすらとした枠線が表示されるが、不要なのでDropShadow.Noneで無効にする。

３．子コンテナの作成

RootContainer直下にHeaderContainer、NavigationContainer、ErrorContainer、MainContainer、FooterContainerを作成する。

1. 上部メニュー > 「+挿入」 > 「レイアウト」　＞「コンテナ」を選択
2. 各子コンテナ名で名前を編集
3. 各子コンテナに共通する以下のプロパティの設定

   /** プロパティ名: 設定値 */
   DropShadow: DropShadow.None
   Width: Parent.Width
   
   /** 
     ONの場合は自動で高さが調整される
     MainContainer > ON、その他はOFF
   */ 
   高さ(伸縮可能) : OFF
   
   /** 
     高さ
     HeaderContainer: 70
     NavigationContainer: 100
     ErrorContainer: 100
     FooterContainer: 70
   */
   Height: XX
   
   /**
     各コンテナの四方の丸みのサイズ
     0の場合は丸みなし
   */
   RadiusBottomLeft: 0
   RadiusBottomRight: 0
   RadiusTopLeft: 0
   RadiusTopRight: 0 

   MainContainerだけは、高さを動的にするため、Heightは設定しない

４．Header Containerの編集

HeaderContainerではアプリのタイトル名を表示する

1. HeaderContainer直下にテキストラベル「HeaderTitle」を挿入(+挿入 > テキストラベル)
2. 以下の通りプロパティを設定

   /** プロパティ名: 設定値 */
   
   /** 画面いっぱいに表示 */
   Width: Parent.Width
   Height: Parent.Height
   
   /** 背景色、文字色、文字サイズ */
   Fill: RGBA(200, 200, 255, 1)
   Color: RGBA(200, 200, 255, 1)
   Size: 30
   
   /** 左右中央ぞろえ、上下中央ぞろえ */
   Align: Align.Center
   VerticalAlign: VerticalAlign.Middle

５．Navigation Containerの編集

NavigationContainerでは進捗ステータスを画像で表示する
PowerAppsでは様々な図形を挿入することもでき、図形のみで進捗ステータスを表示することもできなくはないが
単純に実装が手間であるため、画像を用意したほうが早い

1. 各ステップごとに画像を1つ作成
   今回は4つのステップに分割するため、4枚の画像を用意
   
2. 画像をPower Appsにアップロード
   (左メニュ－ > メディアアイコン > 「+メディアの追加」 > 「↑アップロード」をクリック)
   
3. アップロードしたファイル名が表示されることを確認
   
4. NavigationContainer直下に画像「NavigationImage」を挿入 (+挿入 > メディア > 画像)
5. 以下の通りプロパティを設定

   /** プロパティ名: 設定値 */
   
   /** 画面いっぱいに表示 */
   Width: Parent.Width
   Height: Parent.Height
   
   /** 表示する画像、拡張子を除く画像名で指定 */
   Image: 'ナビゲーションメニューStep1'

6. 指定した画像が画面上に表示されていればOK。
   進捗ごとに画像を切り替えるようにする処理は次の記事で行うため、今は画像は切り替わらなくて問題ない。

６．Error Containerの編集

エラーメッセージを自前で用意する理由について

ErrorContainerにはユーザーの入力情報に誤りがあった時のエラーメッセージを表示する。

Power Appsの登録フォームでは登録処理をする際(SubmitForm関数を呼び出すとき)、自動で入力チェックが行われる。
名前のテキストにエラーがあれば名前の隣に、電話番号のテキストにエラーがあれば電話番号の隣にと、入力するオブジェクトのそばにエラーメッセージを表示することができる。
ただし、これを利用しない(できない)理由が2点ある。

• 自動入力チェックはデフォルトで必須チェックしかできないため
  （マスタチェックなどできない）
• 登録フォームの分割を行う関係でSubmitFormを利用をしないので、自動入力チェックをよぶことができないため

また、エラーメッセージをErrorContainerに一括で表示させる理由としては実装が簡単であるため。
各オブジェクトの傍にメッセージを表示させる場合、記述するソースコードの量がおそらく2~3倍になってしまうのでそれを回避するためというのも理由に挙げられる。

1. ErrorContainer直下にテキストラベルErrorMessageを挿入
2. 以下の通りプロパティを設定

   /** プロパティ名: 設定値 */
   
   /**
     文字色
     エラーメッセージのため赤色を設定
   */
   Color: RGBA(255, 0, 0, 1)
   
   /** 背景色 */
   Fill : RGBA(245, 180, 180, 0.5)
   
   /**
     エラーメッセージがはみ出す場合、スクロールさせ
     メッセージが全て表示させるようにする(原則スクロールは発生しないが念のため)
    */
   Overflow: Overflow.Scroll
   
   /** テキストを上寄せ表示 */
   VerticalAlign: VerticalAlign.Top
   
   Width: Parent.Width
   
   /** 上下左右の余白 */
   PaddingBottom: 24
   PaddingTop: 24
   PaddingLeft: 24
   PaddingRight: 24
   
   /** テキスト1行当たりの高さ */
   LineHeight: 1.5
   
   /** テキストの高さ(行数に比例し確保） */
   Height: Self.PaddingTop 
   　　　　　+ Self.PaddingBottom 
   　　　　　+ (CountRows(Split(Self.Text, Char(10)))) * (Self.Size * Self.LineHeight * 1.5)

   一番の注目ポイントは「Height」である。
   Parentは親のオブジェクトを参照し、同様にSelfは自身のオブジェクトを参照する。
   それによりHeightプロパティの中でHeight以外のプロパティの値を取得することができる。

   ErrorContainerではエラーメッセージの量に応じてにラベルの高さ確保しなければいけない。
   なぜなら、エラーが1行しかないのに10行分の高さを確保したら肝心のフォーム画面が下に追いやられてほとんど見えなくなってしまうし、エラーが10行あるのに高さが1行分しかなかったら、エラーメッセージをスクロールをして確認をする手間が発生するからだ。
   「(CountRows(Split(Self.Text, Char(10))))」でテキストの行数を取得し、「Self.Size * Self.LineHeight * 1.5」の1行分の高さを掛け算し、さらに余白分の「Self.PaddingTop + Self.PaddingBottom」も加えることで全体のテキストの高さを算出している。

3. ErrorContainerの高さを変更する
   試しにErrorMessageの「Textプロパティに以下の5行を設定すると「たちつてと」以降の行が隠れてしまうかと思う。

4. Text: "あいうえお
   かきくけこ
   さしすせそ
   たちつてと
   なにぬねの"

5. それはErrorMessageの親オブジェクトErrorContainerの高さを固定値「100」で仮置きしており、それ以上広がらないためである。
   そのためErrorContainerの高さも子に応じて動的に変わるようにする。
   本来親要素が子要素に依存するのはプログラミングのお作法的によろしくないといわれている（イメージがあるため）ちゃんとした人から見たら怒られるかもしれない。

   Height: ErrorMessage.Height 

７．Main Containerの編集

次回以降取り扱うので、今回は扱わない。

８．Footer Containerの編集

前のステップに戻るための「戻る」ボタンと次のステップへ進むための「次へ」ボタンを配置する。

1. FooterContainer直下にボタンを2つ「PrevButton」「NextButton」を挿入
2. 以下の通りプロパティを設定

   /** プロパティ名: 設定値 */ 
   Text: "戻る" 
   
   /** 左から 1/6 の位置に配置する */
   X: (Parent.Width - Self.Width) / 6 
   
   /** 上から 1/2 の位置に配置する */ 
   Y: (Parent.Height - Self.Height) / 2

   /** プロパティ名: 設定値 */ 
   Text: "次へ" 
   
   /** 左から 5/6 の位置に配置する */
   X: (Parent.Width - Self.Width) * 5 / 6 
   
   /** 上から 1/2 の位置に配置する */ 
   Y: (Parent.Height - Self.Height) / 2

3. FooterContainer直下に背景用の四角形「FooterBackground」を挿入
4. 以下の通りプロパティを設定

   /** プロパティ名: 設定値 */
   
   /** 画面いっぱいに表示 */
   Width: Parent.Width
   Height: Parent.Height
   
   /** 背景色 */
   Fill: RGBA(200, 200, 255, 1)
   

記事一覧

• Part0 はじめに
• Part1 SPOリストの用意
• Part2 マスタの用意
• Part3 画面骨格の作成
• Part4 フォームの画面遷移の実装
• Part5 会場選択フォームの実装
• Part6 日程選択フォームの実装
• Part7 備品選択フォームの実装
• Part8 備品選択フォームの実装
• Part9 申請データの登録実装
• Part10 入力チェックの追加
• Part11 レスポンシブ表示の実装
• Part12 レイアウトの微修正