【入門】PowerAppsでSharePointリストのフォームをカスタマイズ (1)

はじめに

SharePointのリストをPowerAppsを使っていい感じにカスタマイズする為の道のりを記事にまとめます。
勉強しながら記事をまとめている為、投稿後にも更新するかもしれません。

ある程度SharePointの知識がある人向けです。

1. PowerAppsでリストのフォームを開いて発行する

まずは、PowerAppsを起動して、発行するまでをやってみます。

リストからPowerAppsを起動する

[手順]

1. コマンドバーから[PowerApps] > [フォームのカスタマイズ]をクリック

読み込みが走って、以下の画面に切り替われば、PowerAppsの起動が完了です。

フォームの画面サイズを変更する

とりあえず、表示する画面サイズを変更してみます。
[手順]
　1. [ ファイル ] > [ 設定 ]をクリック
　2. [ 画面のサイズと向き] を選択
　3. PCで表示することを想定して、横向きに変更します
　　　向き：横
　　　サイズ：L
　4. [ 適用 ]ボタンをクリック

変更をリストに反映する

変更した内容をリストに反映するには
保存→発行の手順で行います。

[手順]
　1. [ ファイル ] > [ 保存 ] をクリック
　2. バージョンに関するメモに「画面サイズを変更」と記入
　3. [ 保存 ] をクリック

　4. [ SharePointに発行 ] をクリック

発行済みの場合は、メッセージが以下のように表示されます

先ほどの編集画面に戻るには左上の「<- 」をクリックすればOK

PowerAppsからリストに戻る

SharePointに戻る場合は、編集画面の左上にある「SharePointに戻る」をクリックします。

2. フォームの横幅を設定する

1で画面サイズを変更しましたので、フォームのサイズも合わせて変えてみます。

まずはSharePointFormをAppのWidth/heightに合わせます。

[手順]

1. [FormScreen1] > [SharePointForm1]を選択
2. 以下の内容でプロパティを設定する
   　width : Parent.Width
   　height :Parent.Height
   

次に、入力フィールドも設定を変更します。
既存のプロパティに横幅を自動調整してくれる設定があるので、そちらを有効にします。

[手順]

1. [SharePointForm1] 内の各[DataCard]を選択
2. 以下の内容でプロパティを設定する
   　 WidthFit : true
   　※同等の設定を、右側のGUIからも行えます。
   

全ての変更が完了したら、保存して発行します。

3.PowerAppsでカスタマイズしたフォームを削除する

もし、なんか変なことしちゃって、直すことも出来なくなった場合は、
フォームそのものを削除しちゃいましょう。

[手順]

1. [ リストの設定 ] > [ フォームの設定 ]を選択
2. [ 規定のSharePointフォームを使用する]を選択
3. [カスタム フォームを削除します]のリンクをクリック