SPOフォームカスタマイズの話（前編）

この記事は、**Power Apps Advent Calendar 2024 12月22日担当分**の記事です。

https://qiita.com/advent-calendar/2024/powerapps

今回のAdvent Calendarでは、Power AppsによるSharePointフォームのカスタマイズの話をします。
12月22日は前編、中編、後編のうちの前編になります。
前編では通常のキャンバスアプリとの違いについて記載します。

### フォームのカスタマイズとは
リストフォームやライブラリのプロパティフォームはPower Appsを利用してカスタマイズが行えます。
カスタマイズを行うには、コマンドバーより［統合］ー［Power Apps］ー［フォームのカスタマイズ］をクリックします。
こうすることで、フォーム編集用のPower Apps Studioを起動できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/3f01a4e5-3a82-b691-0b4d-3f4d7e54c205.png)

### 普通のPower Appsと違う点
キャンバスアプリと同様のコントロールや関数を使用できますが、リストやライブラリ上での操作とPower Appsで編集したフォームを連動させるために、SharePointIntegrationコントロールを用いて設定する点が異なります。

また、作成したアプリはPower Appsの「既定の環境」内に保存されますが、ポータルのアプリ一覧には表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/9163fe1d-77bf-0bc6-d0c9-ed2d74fba6b0.png)

フォームのカスタマイズをクリックすると、画面1つとその中に編集フォーム1つ含まれた状態でPower Apps Studioが起動します。
またキャンバスアプリにはない、SharePointIntegrationコントロールがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/ca0a04d1-3347-172b-8518-08139f2d3a42.png)

フォーム内容を編集した後は、公開することで既定のフォームをPower Appsで編集したフォームへ置き換える事ができます。
アプリの共有については不要です。「ユーザー」や「共同所有者」の追加をせずに利用、編集が可能です。

### サイズ変更
キャンバスアプリ作成時と同様に画面サイズの変更可能です。
設定画面で、表示からカスタムを選択するとサイズを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/831bef63-230e-0d08-b89c-f3710698c7fb.png)
上記はサイズをカスタム、幅を1300px、高さを700pxとして幅を広く取った例です。

### ユーザー操作との連動
通常のキャンバスアプリでは以下のようなアイコンを用意してデータソースの関数を記載する必要がありますがカスタマイズフォームの場合は、特に必要ありません。（特定の項目をPatch関数などで更新する場合は別です）
- 新規アイコン「＋」（NewForm関数を記載）
- 編集アイコン「✐」（EditForm関数を記載）
- 更新アイコン「✓」（SubmitForm関数を記載）

カスタマイズフォームの場合は以下５つのユーザー操作と連動するための仕組みとしてSharePointIntegrationコントロールが用意されています。

#### 操作１　新規操作
「新規アイテムを追加」がクリックされた場合の動作を指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/7aef6b84-0e36-3ede-9245-a50aa48bd262.png)

新規操作時の動作指定は、SharePointIntegrationコントロールのOnNewプロパティを使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/22646fb5-9d54-e137-a4c2-a2cda795f9d1.png)
```
//フォームを新規モードにして画面遷移する。
NewForm(SharePointForm1);Navigate(FormScreen1)
```

#### 操作２　編集操作
「編集」がクリックされた場合の動作を指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/55196b3d-7b2e-7f32-818d-fd6f3f884c2e.png)

編集操作時の動作指定は、SharePointIntegrationコントロールのOnEditプロパティを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/79d78341-b838-a1db-8082-64bac55504b6.png)
```
//フォームを編集モードにして画面遷移する。
EditForm(SharePointForm1);Navigate(FormScreen1)
```

#### 操作３　表示操作
アイテムの表示操作が行われた場合の動作を指定します。
※赤枠をダブルクリックした場合の動作になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/ad73e31b-c89a-e37d-b854-8728bbde72c6.png)

表示操作時の動作指定は、SharePointIntegrationコントロールのOnViewプロパティを使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/4ff58d08-66bc-d9b4-8225-8d43af0add2d.png)
```
//フォームを表示モードにして画面遷移する。
ViewForm(SharePointForm1);Navigate(FormScreen1)
```

####  操作４　保存操作
フォーム上の「保存」がクリックされたときの動作を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/1320853a-d4d6-483f-2922-86db1c52d5c8.png)

保存操作時の動作指定は、SharePointIntegrationコントロールのOnSaveプロパティを使用します。

```
//SPOリストに登録・更新する
SubmitForm(SharePointForm1)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/2b94a71f-a608-2b87-963e-d087ee786bd0.png)


#### 操作５　キャンセル操作
フォーム上の「キャンセル」がクリックされたときの動作を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/34b36865-375a-8789-522c-7d2ecdcc2725.png)

キャンセル操作時の動作指定は、SharePointIntegrationコントロールのOnCancelプロパティを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/fa96e0e7-0d66-3618-fb84-5530f36879a3.png)
```
//フォームをリセットする
ResetForm(SharePointForm1)
```

### まとめ
前編では、キャンバスアプリとの違いについての内容となりました。
カスタマイズフォームについては、通常のPower Appsと異なる点があります。

中編では、カスマイズフォームでの注意点についての内容となります。