SharePoint Online でアイテム登録時にダイアログを表示する(モダン UI)

[ブログからの転載](https://1bed.allright.life/?p=2873)

先日、「SharePoint のモダン UI で登録前に警告するダイアログを表示したい」という相談を受け、実装した時のメモになります

## 環境

* サーバー環境：SharePoint Online
* 開発・検証環境：Windows Pro 10, Chrome

## PowerApps の起動

1. モダン UI のリストで、[PowerApps] → [フォームのカスタマイズ] を選択することで PowerApps が起動します

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m01-300x65.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m01.png)

## PowerApps の設定

1. フォーム [FormScreen1] を選択し、[OnVisible] のプロパティを `Set(showDialog, false)` とする

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m02-300x127.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m02.png)  
   説明
      * [OnVisible] のプロパティは、ユーザーが FormScreen1 画面に遷移したとき動作
      * グローバル変数 `showDialog` に `false` をセット

2. [挿入] → [アイコン] → [四角形] を選択

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m03-300x91.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m03.png)

3. 画面全体を囲み、[詳細設定] にある [Fill] のプロパティを `RGBA(0,0,0,.5)` とする

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m04-300x191.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m04.png)  
   説明
      * [Fill] プロパティは、オブジェクトの背景色
      * RGBA の引数は左から、赤(Red)、緑(Green)、青(Blue)、アルファ(Alpha, 透過度)  

   設定例
      * [Fill] プロパティを `RGBA(0,0,0,.5)`
      * [PressedFill] プロパティを `RGBA(0,0,0,.5)`
      * [HoverFill] プロパティを `RGBA(0,0,0,.5)`

4. 同様に、[挿入] → [アイコン] → [四角形] と選択してダイアログ用の枠を作り、[詳細設定] にある [Fill] のプロパティを `RGBA(255,255,255,1)` とする

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m05-300x207.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m05.png)  
   設定例
      * [Fill] プロパティを `RGBA(255,255,255,1)`
      * [PressedFill] プロパティを `RGBA(255,255,255,1)`
      * [HoverFill] プロパティを `RGBA(255,255,255,1)`

5. [挿入] → [ラベル] を選択し、下図のように配置、[詳細設定] にある [Text] のプロパティを `"登録してよろしいですか？"` とする

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m06-300x129.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m06.png)

6. [挿入] → [ボタン] を選択し、下図のように配置、[詳細設定] にある [Text] のプロパティを `"はい"` 、[BorderStyle] のプロパティを `BorderStyle.Solid` とし、背景色(Fill)などは適宜変更する

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m07-300x195.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m07.png)  
   設定例
      * [Text] プロパティを `"はい"`
      * [BorderColor] プロパティを `RGBA(20, 20, 20, 1)`
      * [BorderStyle] プロパティを `BorderStyle.Solid`
      * [Fill] プロパティを `RGBA(255, 255, 255, 1)`

7. 同様に、いいえ ボタンを作成する

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m08-300x211.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m08.png)

8. 今回追加したオブジェクト(Button2, Button1, Label1, Rectangle2, Rectangle1) を Shift キーを押しながら選択していき、 [Visible] プロパティを `showDialog` とする  
   ※この設定を行うことで、追加したオブジェクトは画面上に表示されなくなる

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m09-300x265.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m09.png)

9. 保存時にダイアログを表示するようにする  
   [SharePointIntegration] を選択し、[OnSave] プロパティを `Set(showDialog, true)` とする

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m10-300x84.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m10.png)  
   説明
      * [SharePointIntegration] コントロールは SharePoint と PowerApps でアクションをバインドしている
      * [OnSave] プロパティは、保存ボタンをクリック(またはタップ)された時に動作

10. [Button1] を選択し、[OnSelect] プロパティを `SubmitForm(SharePointForm1)` とする

    [![](https://1bed.allright.life/wp-content/uploads/2019/02/m11-300x99.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m11.png)

11. [Button2] を選択し、[OnSelect] プロパティを `Set(showDialog, false)` とする

    [![](https://1bed.allright.life/wp-content/uploads/2019/02/m12-300x83.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m12.png)


## SharePoint への発行

1. [ファイル] を選択

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m13-300x136.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m13.png)

2. [保存] ボタンを押下

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m14-300x190.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m14.png)

3. [SharePoint に発行] ボタンを押下する

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m15-300x248.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m15.png)

4. ダイアログが出るので、[SharePoint に発行] ボタンを押下する

   [![](https://1bed.allright.life/wp-content/uploads/2019/02/m16-300x120.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m16.png)

## 動作確認

上記で、設定は完了になり、登録画面で [保存] ボタンを押下すると、下図のような確認ダイアログが表示されるようになります

[![](https://1bed.allright.life/wp-content/uploads/2019/02/m20-300x96.png)](https://1bed.allright.life/wp-content/uploads/2019/02/m20.png)