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

PowerApps による
初めてのアプリ開発
- SharePoint と連携させてみた –
※現時点では Preview 版です
@HiroakiOikawa
2016/05/10

目次
 何を作るか
 実際に作ってみる
 作ったアプリを公開する
 公開したアプリを動かしてみる
 まとめ
2
© SharePoint Developer
sharepoint.orivers.jp

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

サイトコレクション作成申請アプリ
 作成するアプリ
- 今回作成するアプリは、SharePoint Online のサイトコレクションの作
成申請をイメージしたアプリになります。
 アプリ作成方針
- PowerApps の基本的な機能だけを使って、基本的なアプリの作り方
を理解できる程度に作成します。
- Flow は作りこみせず、テンプレートにあるものをそのまま利用します。
Flow の作り方よりも PowerApps と Flow の連携の仕方を理解す
ることに重点を置くためです。
sharepoint.orivers.jp 4

作成するアプリの利用イメージ
SharePoint Online のサイトコレクションを作成するための申請
をし、上長が承認/却下をするためのアプリです。
サイトコレクション
作成申請リスト
(SharePoint)
①申請サイトコレクション
作成申請アプリ
(PowerApps)
承認処理
(Flows)
②登録
③起動
④承認依頼メール送信
⑤承認/却下
⑥承認/却下結果送信
手動操作
自動処理
申請者
承認者

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

PowerApps Studio を起動
PoweApps Studio を起動し、赤枠のボタンをクリックします。
アプリで使用するデータの準備が
できている場合は、[Create an
app from your data]から始
めると早いです。

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

接続するリストを選択
接続するリストを一覧から探すか検索して選択し、画面右下の
[Connect] ボタンをクリックします。
一覧にはお知らせやイベントが出
てこないので、おそらくカスタムリス
トにだけ対応しているのだろうと思
います。

サイトコレクション作成申請リストの中身
「サイトコレクション作成申請」というリストをあらかじめ作っておいた
ので、これを選択し [Connect] ボタンをクリックします。
 サイトコレクション作成申請リストの設定
列の内部名は、「サイトURL」
列が「Title」、「申請理由」列
が「body」になっています。

アプリが自動生成される！
すると・・・リストの列情報に基づき、アプリが自動生成されます！
自動生成されたアプリは、一覧ペー
ジ、アイテムの参照ページ、アイテム
の登録・編集ページを持ち、
SharePoint リストからのデータの取
得と保存処理まで実装されています。
なので、このまま F5 キーを押すか、
画面右上の [▶] ボタンをクリックす
るだけですぐにアプリを動かすことがで
きます。
カスタマイズしないのであれば、これだ
けでアプリ作成が完了してしまいま
す！

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

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

列のマッピングを変更し、先ほど追加したコントロールと ID 列を
マッピングするように設定します。
ついでに文字色を赤字にしてみます。
設定内容は設定と同時にデザイン画面に反映されます。

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

Flow の呼び出しを追加する
申請の登録が完了したら、
Flow で作成した承認処理が
起動されるように設定をします。
セレクタで EditForm1 を
選択します。

EditForm1 の内側の白い部分を
クリックし、フォームを選択状態に
します。
選択状態にすると選択範囲の
周りに白丸が付きます。
この辺をクリック

リボンの [Action] タブをクリックし、赤枠内のプルダウンリストにて、
[OnSuccess] をクリックします。
この「OnSuccess」ですが、「保存処理が成功した時」を表して
おり、右側の「Back()」が、処理する内容を表しています。
上記設定は、「保存処理が成功した時、元のページに戻る」とい
う処理を定義していることになります。

「OnSuccess」時に「Back」
ではなく、Flow を動かすよう
にするため、アプリに Flow を
追加します。
「OnSuccess」をクリックする
ことで画面右に左図の Flow
追加の UI が表示されます。
[Create a new flow] を
クリックします。

呼び出す Flow を作成する
Flow の追加ページが表示されます。

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

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

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

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

Flow 名をクリックすると、Flow が EditForm1 の選択中のコン
トロールと紐付けされ、式を入れるエリアに、Flow の呼び出しを
行う関数が追加されます。
今回の Flow はパラメータとしてメール本文の値を渡す必要があ
るため、下図の通り入力を促すメッセージが表示されます。

Flow の呼び出し式を入力する
今回は下図の通り式を入力します。
左辺は「OnSuccess」になっていることを確認してください。
画像が小さいので、テキストでも一応書いておきます。
サイトコレクション作成申請_1.Run("サイトURL:" & EditForm1.LastSubmit.Title &
"<BR/>申請理由" & EditForm1.LastSubmit.body);Back()
ここで一点ポイントですが、現在のフォームで保存された値を取得するには、
EditForm1.LastSubmit を指定します。
これが分からず、コントロールの値を無理やり取ってこようとしたりして、試行錯
誤しているうちに2日間ほど無駄にしてしまいました(涙)
ちなみに式の入力エリアは、オートコンプリート(入力候補表示)対応です。

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

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

アプリの名前、アイコンを指定する
今回は下図の通り設定します。

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

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

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

公開したアプリへのアクセス方法
公開したアプリは、PowerApps サイトのホームページと、
[My apps] に表示されます。
アプリを実行するには、アプリ名が書いてあるタイルをクリックします。

ブラウザからだとなぜかエラー・・・
アプリのタイルをクリックすると、アプリが起動するわけですが、ブラウ
ザから行こうとするとなぜかエラーになりアプリを起動できず・・・
とにかく動かしたいので深追いせず、PowerApps Studio から
動かしてみます。

公開したアプリへのアクセス方法その２
ブラウザから起動できなかったので、PowerApps Studio から起
動してみます。
PowerApps Studio の [Open] メニューをクリックすると、登録
済みのアプリが一覧表示されるので、そこから起動します。

おまけ：アプリのアップデート
なお、アプリがアップデートされている場合は、アプリアイコンの右上
に更新マーク(下矢印のマーク)が表示されます。
このマークが出ている場合、[…] メニューをクリックすると、アプリを
更新するための [Update] メニューが表示されます。

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

接続アカウントの指定
アプリが SharePoint に接続するためのアカウントと、
Exchange に接続するためのアカウント、メール送信先のアカウ
ントを指定します。
デフォルトで、アプリおよび Flow 作成
時に指定したアカウントが指定されて
います。
[Allow] ボタンをクリックして、
接続アカウントを確定させます。

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

アプリの画面一覧ページ
アプリが起動すると、無事 SharePoint のサイトコレクション作成
申請リストからアイテムを表示できました。
追加した ID 列もきちんと表示
されています。

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

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

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

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

まとめ本資料のまとめ
45

まとめ
 今回は慣れ親しんだ SharePoint と連携をする PowerApps アプリを、
チュートリアルを見ながら見よう見まねで作ってみました。
 一通りの画面ショットを資料に貼り付けたので分かっていただけたと思います
が、特に難しいことはしていないし、コーディングも本当に一切しませんでした。
 Flow についてはテンプレートを使うにしても少々手数が多かったり、Flow
を呼び出すのにパラメータが必要だったりするため、この辺りはやはり Excel
関数を使ったことがあるレベルの方でないと厳しいのかなと思いました。
 まだまだプレビュー版なので、メールや各種 UI の日本語化であるとか、カス
タマイズができる範囲なども変わってくるかと思いますが、ひとまず
PowerApps がどのようなものか理解するには十分だったかなと思います。
 みなさんも PowerApps でお手軽アプリ開発を体験してみてください！
 最後に、今回のアプリ作成方針では手が届かなかった部分を軽くまとめまし
たので、おまけ資料として最後につけておきます。

今回の方針の下では実現できなかったこと
 実現できなかったところ
- ほぼイメージ通りに作ることができましたが、作成するアプリの利用イメー
ジのスライドには書いていない部分でできなかったところが一つ。
• 標準機能と標準テンプレートだけでは、⑥承認/却下結果送信の前後で、
サイトコレクション作成申請リストの該当アイテムに承認/却下結果を戻す
ことができませんでした。
 そもそも実現できそうか？
- 上記の問題を実現できそうか軽く
調べてみましたが・・・
• Flow の中に SharePoint リストの
アイテムを更新するアクションがないので、
素のままだとやはり難しいみたいです。
• こういった場合は、Flow から Custom API
を呼び出す必要がありますね。

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to PowerApps による初めてのアプリ開発 (16)

More from Hiroaki Oikawa

More from Hiroaki Oikawa (8)

Recently uploaded

Recently uploaded (10)

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