PowerApps による初めてのアプリ開発

PowerApps による初めてのアプリ開発- SharePoint と連携させてみた –

※現時点では Preview 版です

@HiroakiOikawa2016/05/10

2

目次

何を作るか

実際に作ってみる

作ったアプリを公開する

公開したアプリを動かしてみる

まとめ

© SharePoint Developersharepoint.orivers.jp

何を作るかはじめてのアプリ開発ということで、どんなアプリを作るか先に説明します。

3

4

サイトコレクション作成申請アプリ

作成するアプリ- 今回作成するアプリは、 SharePoint Online のサイトコレ

クションの作成申請をイメージしたアプリになります。

アプリ作成方針- PowerApps の基本的な機能だけを使って、基本的なアプリ

の作り方を理解できる程度に作成します。

- Flow は作りこみせず、テンプレートにあるものをそのまま利用します。 Flow の作り方よりも PowerApps と Flow の連携の仕方を理解することに重点を置くためです。


5

作成するアプリの利用イメージ

SharePoint Online のサイトコレクションを作成するための申請をし、上長が承認 / 却下をするためのアプリです。


サイトコレクション作成申

請リスト(SharePoint)

① 申請サイトコレクション作成申

請アプリ(PowerApps)

承認処理(Flows)

② 登録

③ 起動

④ 承認依頼メール送信

⑤ 承認 / 却下⑥ 承認 / 却下結果送信

手動操作自動処理

申請者

承認者

実際に作ってみるそれでは実際にアプリを作ってみましょう。

6

7

PowerApps Studio を起動

PoweApps Studio を起動し、赤枠のボタンをクリックします。


アプリで使用するデータの準備ができている場合は、[Create an app from your data] から始めると早いです。

8

接続するサイトを選択

接続するサイトを一覧から探すか検索してクリックします。


9

接続するリストを選択

接続するリストを一覧から探すか検索して選択し、画面右下の [Connect] ボタンをクリックします。


一覧にはお知らせやイベントが出てこないので、おそらくカスタムリストにだけ対応しているのだろうと思います。

10

サイトコレクション作成申請リストの中身「サイトコレクション作成申請」というリストをあらかじめ作っておいたので、これを選択し [Connect] ボタンをクリックします。

サイトコレクション作成申請リストの設定


列の内部名は、「サイトURL 」列が「 Title 」、「申請理由」列が「 body 」になっています。

11

アプリが自動生成される！

すると・・・リストの列情報に基づき、アプリが自動生成されます！


自動生成されたアプリは、一覧ページ、アイテムの参照ページ、アイテムの登録・編集ページを持ち、SharePoint リストからのデータの取得と保存処理まで実装されています。

なので、このまま F5 キーを押すか、画面右上の [▶] ボタンをクリックするだけですぐにアプリを動かすことができます。

カスタマイズしないのであれば、これだけでアプリ作成が完了してしまいます！

12

一覧ページに ID 列を追加する

今回は開発方法のお勉強なので、軽くカスタマイズをします。一覧ページの表示項目に ID 列を追加します。表示項目を追加するには、リボンから [Insert] – [Text] の順にクリックします。

選択肢が表示されるので [Text box] をクリックします。


13


デザイン画面上にコントロールが配置されます。右の一覧には、コントロールとマッピングされた列名が表示されます。


14


列のマッピングを変更し、先ほど追加したコントロールと ID 列をマッピングするように設定します。ついでに文字色を赤字にしてみます。

設定内容は設定と同時にデザイン画面に反映されます。


15

プレビュー実行で動作確認

ここまでの状態でプレビューし、追加した ID 列が表示されることを確認します。


16

Flow の呼び出しを追加する

申請の登録が完了したら、 Flow で作成した承認処理が起動されるように設定をします。

セレクタで EditForm1 を選択します。


17


EditForm1 の内側の白い部分をクリックし、フォームを選択状態にします。

選択状態にすると選択範囲の周りに白丸が付きます。


この辺をクリック

18


リボンの [Action] タブをクリックし、赤枠内のプルダウンリストにて、 [OnSuccess] をクリックします。

この「 OnSuccess 」ですが、「保存処理が成功した時」を表しており、右側の「 Back() 」が、処理する内容を表しています。

上記設定は、「保存処理が成功した時、元のページに戻る」という処理を定義していることになります。


19


「 OnSuccess 」時に「 Back 」ではなく、 Flow を動かすようにするため、アプリに Flow を追加します。

「 OnSuccess 」をクリックすることで画面右に左図の Flow 追加の UI が表示されます。

[Create a new flow] をクリックします。


20

呼び出す Flow を作成する

Flow の追加ページが表示されます。


21


テンプレートの中から [Get approval on email] を探しクリックします。


22


Flow の作成ページが表示されます。この Flow ではメール送信を伴うので、 O365 へのログインアカウントと、メール送信先のアカウントを指定し、 [Continute] をクリックします。


23


Flow が作成され、エディタ上に Flow の内容が表示されます。もちろんカスタマイズ可能ですが、今回は何もカスタマイズせず、 [Flow Name] を入力して、 [Done] をクリックします。


24


EditForm1 の編集ページに戻ると、 Flow の一覧の中に、いま作成した Flow が表示されているので、 Flow 名をクリックします。


25


Flow 名をクリックすると、 Flow が EditForm1 の選択中のコントロールと紐付けされ、式を入れるエリアに、 Flow の呼び出しを行う関数が追加されます。

今回の Flow はパラメータとしてメール本文の値を渡す必要があるため、下図の通り入力を促すメッセージが表示されます。


26

Flow の呼び出し式を入力する

今回は下図の通り式を入力します。左辺は「 OnSuccess 」になっていることを確認してください。

画像が小さいので、テキストでも一応書いておきます。

サイトコレクション作成申請 _1.Run(" サイト URL:" & EditForm1.LastSubmit.Title & "<BR/> 申請理由 " & EditForm1.LastSubmit.body);Back()

ここで一点ポイントですが、現在のフォームで保存された値を取得するには、 EditForm1.LastSubmit を指定します。これが分からず、コントロールの値を無理やり取ってこようとしたりして、試行錯誤しているうちに 2日間ほど無駄にしてしまいました (涙 )ちなみに式の入力エリアは、オートコンプリート (入力候補表示 )対応です。


作ったアプリを公開する

前の手順まででアプリの作成は完了したので、完成したアプリを公開します。

27

28

アプリの名前、アイコンを指定する

デプロイする前に、アプリの名前とアイコンを指定します。PowerApps Studio のホームページの左メニューから [App settings] – [App name + icon] をクリックします。


29

アプリの名前、アイコンを指定する

今回は下図の通り設定します。


30

スクリーンサイズ、向きを指定する

今回は設定しませんが、 [Screen size + orientation] のメニューから、スクリーンサイズと向きを指定可能です。


31

アプリを保存、公開する

もろもろ設定が完了したので、最後にアプリを保存して、 O365 のテナント内のユーザーにアプリを公開します。[Save as] – [The cloud]の順にクリックして、[Allow access …] にチェックをつけて、ページ下部にある下図の [Save] ボタンをクリックします。


公開したアプリを動かしてみる

いよいよ公開したアプリを動かしてみます。

32

33

公開したアプリへのアクセス方法

公開したアプリは、 PowerApps サイトのホームページと、[My apps] に表示されます。

アプリを実行するには、アプリ名が書いてあるタイルをクリックします。


34

ブラウザからだとなぜかエラー・・・アプリのタイルをクリックすると、アプリが起動するわけですが、ブラウザから行こうとするとなぜかエラーになりアプリを起動できず・・・

とにかく動かしたいので深追いせず、 PowerApps Studio から動かしてみます。© SharePoint Developer

sharepoint.orivers.jp

35

公開したアプリへのアクセス方法　その２ブラウザから起動できなかったので、 PowerApps Studio から起動してみます。

PowerApps Studio の [Open] メニューをクリックすると、登録済みのアプリが一覧表示されるので、そこから起動します。


36

おまけ：アプリのアップデート

なお、アプリがアップデートされている場合は、アプリアイコンの右上に更新マーク ( 下矢印のマーク ) が表示されます。

このマークが出ている場合、 […] メニューをクリックすると、アプリを更新するための [Update] メニューが表示されます。


37

公開したアプリの起動

アプリを起動すると、すぐさま開いてますよのダイアログが表示されます。


38

接続アカウントの指定

アプリが SharePoint に接続するためのアカウントと、Exchange に接続するためのアカウント、メール送信先のアカウントを指定します。

デフォルトで、アプリおよび Flow 作成時に指定したアカウントが指定されています。

[Allow] ボタンをクリックして、接続アカウントを確定させます。


39

スプラッシュウィンドウ

アプリのスプラッシュウィンドウ？が表示されます。まもなくアプリが起動します。


40

アプリの画面一覧ページ

アプリが起動すると、無事 SharePoint のサイトコレクション作成申請リストからアイテムを表示できました。

追加した ID 列もきちんと表示されています。


41

アプリの画面編集ページと承認依頼メール編集ページの保存ボタン [✓] をクリックすると、アイテムが保存され、 Flow が動いて承認依頼メールが送信されます。


承認依頼メール

42

アプリの画面承認

承認依頼メールにある [Approve] ボタンをクリックすると、承認完了のページが表示され、申請者に承認完了メールが送信されます。


承認完了メール承認完了ページ

43

アプリの画面却下

承認依頼メールにある [Reject] ボタンをクリックすると、却下のページが表示され、申請者に却下メールが送信されます。


却下メール却下ページ

44

承認、却下されているのにもう一度クリック承認、却下が済んでいる承認依頼メールに対して、もう一度 Accept 、 Reject のボタンをクリックしたら、きちんとエラーになりました。

ちょっと意地悪だけど、大事な確認。


まとめ本資料のまとめ

45

46

まとめ

今回は慣れ親しんだ SharePoint と連携をする PowerApps アプリを、チュートリアルを見ながら見よう見まねで作ってみました。

一通りの画面ショットを資料に貼り付けたので分かっていただけたと思いますが、特に難しいことはしていないし、コーディングも本当に一切しませんでした。

Flow についてはテンプレートを使うにしても少々手数が多かったり、 Flow を呼び出すのにパラメータが必要だったりするため、この辺りはやはり Excel 関数を使ったことがあるレベルの方でないと厳しいのかなと思いました。

まだまだプレビュー版なので、メールや各種 UI の日本語化であるとか、カスタマイズができる範囲なども変わってくるかと思いますが、ひとまず PowerApps がどのようなものか理解するには十分だったかなと思います。

みなさんも PowerApps でお手軽アプリ開発を体験してみてください！

最後に、今回のアプリ作成方針では手が届かなかった部分を軽くまとめましたので、おまけ資料として最後につけておきます。


47

今回の方針の下では実現できなかったこと実現できなかったところ

- ほぼイメージ通りに作ることができましたが、作成するアプリの利用イメージのスライドには書いていない部分でできなかったところが一つ。• 標準機能と標準テンプレートだけでは、⑥承認 / 却下結果送信

の前後で、サイトコレクション作成申請リストの該当アイテムに承認 / 却下結果を戻すことができませんでした。

そもそも実現できそうか？- 上記の問題を実現できそうか軽く調べてみましたが・・・• Flow の中に SharePoint リストの

アイテムを更新するアクションがないので、素のままだとやはり難しいみたいです。

• こういった場合は、 Flow から Custom APIを呼び出す必要がありますね。© SharePoint Developer

sharepoint.orivers.jp

Technology

PowerApps による初めてのアプリ開発