Help us understand the problem. What is going on with this article?

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

はじめに

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

前回の記事はこちら
[入門]PowerAppsでSharePointリストのフォームをカスタマイズ(1)

やりたい事

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

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

各フォームについて

SharePoint 2016のモダンUIを触っている方向けに
それぞれのフォームの役割について、簡単にまとめました。

NewForm

新しいアイテムを追加する為のフォーム。
コマンドバーの 「+新規」ボタンをクリックすると表示される。

image.png

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

image.png

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

DispForm

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

image.png

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

image.png

EditForm

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

image.png

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

作成方法

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

[step1] 画面の複製

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

image.png
  1. それぞれ名前を変更します
image.png

[step2] レイアウトを変更する

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

レイアウトの変更については別途記事をまとめる予定なので
それぞれのフォームの見分けが付くぐらいでOKです。
画面レイアウト.png

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

[step3]表示するフォームを指定

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

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

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

step3_プロパティ.png

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

モードの切り替えに関してはこちらに載っています。

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

(1) フォームのモードを切り替える

各フォームのモードを設定します。

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

(2) 表示画面を指定する

画面を切り替える場合は「Navigate」関数を利用します。

Navigate関数の第2引数で画面の切り替え方法を指定することが出来ます。
詳しいパラメータはこちら

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

image.png

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

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

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

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

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

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

(1) 状態を管理する変数を作る

新規作成の画面で、「保存」ボタンが押されたときの動作を制御します。

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

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

image.png

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

(2) OnSaveが押された時の処理を追加

データを更新するには「submitForm関数」を利用します。

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

image.png

(3)OnCancelが押された時の処理を追加

フォームをリセットするには「ResetForm」を利用します。

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

image.png

[補足] ResetFormでリセットされないとき

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

反映されないフォームのプロパティから「OnReset」を「ture」にして保存してください。
image.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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした