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

# はじめに
SharePointのリストをPowerAppsを使っていい感じにカスタマイズする為の道のりを記事にまとめます。

前回の記事はこちら
[[入門]PowerAppsでSharePointリストのフォームをカスタマイズ(1)](https://qiita.com/Momomo_ai/items/2a5ffba69a871b41ef0b)


# やりたい事
今回やりたいことは以下の三つです

+ NewForm/EditForm/DispFormを作成する
+ 【保存】ボタンでデータを更新する
+ 【キャンセル】ボタンで画面をリセットする

## 各フォームについて
SharePoint 2016のモダンUIを触っている方向けに
それぞれのフォームの役割について、簡単にまとめました。
### NewForm
新しいアイテムを追加する為のフォーム。
コマンドバーの　「＋新規」ボタンをクリックすると表示される。

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/6e7944dc-88c6-5208-692a-0981338eed83.png)|
|:-:|

フォームには「保存」「キャンセル」のボタンが存在します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/45bea114-ef1d-8926-4539-458b22f38e2e.png)|
|:-:|

「保存」ボタンを押すと、アイテムを追加します。


### DispForm
閲覧用のフォーム。
アイテムのメニューから「開く」を選択、またはタイトルクリックで表示される。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/6495b5e9-addc-f345-c817-9022f325e8c3.png)|
|:-:|

フォームにはアイテムの編集ボタンが存在します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/36e8b2cb-c1cf-b99b-3c6c-8f7ffe33da5e.png)|
|:-:|


### EditForm
編集用のフォーム。
DispFormから編集ボタンを押す、またはメニューから編集を選択すると表示される。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/0760fe84-8536-e678-50c3-f9097e5e1809.png)|
|:-:|

「保存」ボタンを押すと、アイテムの更新がされる。
「キャンセル」ボタンを押すと、更新しないでフォームを閉じる。


# 作成方法

ではフォームを追加したいリストからPowerAppsを起動します。
操作方法が分からない方は、まず先に[[入門]PowerAppsでSharePointリストのフォームをカスタマイズ(1)](https://qiita.com/Momomo_ai/items/2a5ffba69a871b41ef0b)を確認してください。


## [step1] 画面の複製

[手順]
1. FormScreen1のメニューから「画面の複製」を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/8ab10484-b260-9127-f80b-b8b4e6d77920.png)|
|:-:|

2. それぞれ名前を変更します

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/54aa89b5-8095-73b7-bf8a-e45e671a5ed4.png)|
|:-:|

## [step2] レイアウトを変更する
ちゃんと変更されていることがわかるよう、レイアウトを少し変えます。

レイアウトの変更については別途記事をまとめる予定なので
それぞれのフォームの見分けが付くぐらいでＯＫです。
![画面レイアウト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/9bd9476d-a589-ea11-9bdf-91ee5a509a6c.png)

今回は「新規作成」「表示」「編集」がタイトルheaderに表示されるようにしました。

## [step3]表示するフォームを指定
各ボタンが押されたときに表示するフォームを指定します。

| ボタン | プロパティ |
|:------|:------------|
| 新規| OnNew|
| 編集| OnEdit|
| 表示|OnView|

設定"SharePointIntegration"のアクションから指定できます。

![step3_プロパティ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/d1460743-b92d-8718-b623-b7507c52d97a.png)

既存の設定では、一つのフォームのモードを切り替えて表示しています。

モードの切り替えに関しては[こちら](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-form)に載っています。

今回のカスタマイズでは、各アクションに対し
　(1) フォームのモードを切り替える
　(2) 画面遷移する
の処理を追加していきます。

### (1) フォームのモードを切り替える
各フォームのモードを設定します。

|アクション|モード| 処理 |
|:-------|:-------|:-----|
|OnNew|新規|NewForm(NewForm)|
|OnView|ビュー|ViewForm(DispForm)|
|OnEdit|編集|EditForm(EditForm)|

### (2) 表示画面を指定する
画面を切り替える場合は「Navigate」関数を利用します。

Navigate関数の第2引数で画面の切り替え方法を指定することが出来ます。
詳しいパラメータは[こちら](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-navigate#navigate)

今回は特に指定しません。
一つのアクションに複数の処理を追加する場合は「;(セミコロン)」を追加します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/36debe47-8432-1da3-0518-b1e553764dde.png)


この状態で保存&発行をして動作を確認しましょう。
それぞれのフォームが表示されればOKです。

## [Step4] 保存 /キャンセルの動作を指定する

次に、「保存」「キャンセル」ボタンが押されたときの動作を指定します。
こちらの設定も"SharePointIntegration"から指定できます。

| ボタン | プロパティ |
|:------|:------------|
| 保存| OnSave|
| キャンセル| OnCancel|

やりたい事は
　(1) 状態を管理する変数を作る
　(2) 新規作成時、OnSaveで新しいアイテムを追加。編集時、OnSaveでアイテムの更新
　(3) OnCancelで入力していたデータをリセットする
の3点です。

アクションは同じでもユーザの開いているフォームによって、
ボタンの挙動が変わるところに注意が必要です。

### (1) 状態を管理する変数を作る
新規作成の画面で、「保存」ボタンが押されたときの動作を制御します。

まずは、保存ボタンが押されたときに表示されていたフォームが
「NewScreen」なのか「EditScreen」を判別する為、状態を管理するための変数を用意します。

変数を管理する場合には「set関数」を利用します。
変数名は「mode」にしました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/c4b561dd-dadb-9159-8b1b-3c3f67943d7f.png)

※ 今回は、「New」か「Edit」が分かればよいので、OnViewはなくてもよいです。

### (2) OnSaveが押された時の処理を追加
データを更新するには「submitForm関数」を利用します。

modeが"new"の時は"NewForm"をsubmitします。
それ以外の時は"EditForm"をsubmitします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/cb729d14-bd06-fef7-3f51-2670dd158a13.png)



### (3)OnCancelが押された時の処理を追加
フォームをリセットするには「ResetForm」を利用します。

数式自体はOnSaveとほぼ同じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/b8447c01-e815-88f3-3e5f-3b452fe9328c.png)


## [補足] ResetFormでリセットされないとき
ResetFormがうまく反映されない場合、
フォームのプロパティを設定を変更することで解決するケースがあります。

反映されないフォームのプロパティから「OnReset」を「ture」にして保存してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239956/9df0ccf5-fccc-a245-e493-9220f0f2a8b0.png)


# 完成

以上で各フォームのベースが出来上がりました。


画面遷移さえ定義できてしまえば、
ラベルを追加したり、色を変えたりするだけで
とてもリッチなリストフォームを作ることが出来るようになるでしょう。



# 制約により出来ないこと

この記事をまとめるにあたり、分かったこと、
イケてないなーとか他にやりようありそうだなーってところをメモしました。

### 強制的にフォームが非表示
アイテムの編集の時、「キャンセル」が押されたら表示フォームに戻りたかったけど
以下の制約で、「キャンセル」を押したら強制的にフォームが閉じてしまう。

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/sharepoint-form-integration
> OnCancel - SharePointForm1 の変更をリセットします。 ユーザーが SharePoint で [キャンセル] をクリックまたはタップすると、SharePoint では常にフォームが非表示になります。

### SubmitするとEditモードになる
各フォームのDefaultModeを設定すれば、OnNew/OnEditでわざわざモードをしなくていいんじゃないの？
って思ったんですが、submitするとNewモードはEditモードに切り替わるようです。
なので、フォームを起動するたびにモードを指定してあげないといけない。

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-for
> 送信が成功した場合、フォームの OnSuccess 動作が実行され、 Error プロパティと ErrorKind プロパティがクリアされます。 フォームが FormMode.New モードだった場合は FormMode.Edit モードに戻ります。m