Mobile
PowerApps
Microsft

【Microsoft PowerApps】コーディングなしで出欠管理アプリを作ろう!

はじめに

Office365の機能に、PowerAppsというコーディングなしでアプリが作れるという優れものがあるということで、
試しにイベントの出欠管理アプリを作ってみました。

PowerAppsとは?
https://docs.microsoft.com/ja-jp/powerapps/
スクリーンショット 2018-08-20 8.10.04.png

今回、OneDrive上のExcelをデータソースとして作成する形をとりました。

手順

データソースを用意する

画像のようなExcelを用意しました。
excel.png

これをOneDriveに保存します。

PowerAppsでアプリを新規作成する

  1. PowerAppsを開きます。
    https://web.powerapps.com/home

  2. 「アプリの作成」を選択します。
    pa-top.png

  3. 「OneDrive for Bussiness」の「携帯電話レイアウト」を選択します。
    DataSource-1.png

  4. 先に作っておいたExcelの出欠表を選択します。
    Datasource-2.png

  5. テーブル1を選択します。
    Datasource-3-2.png

  6. エディター画面が開きます。
    なんと勝手にリストになり、詳細画面と編集画面が備わっています。
    appdefault.png

  7. 項目をいじってみる
    まずはリスト上でNo.がでていますが、これを氏名に変えていきます。
    左側のツリーから「Title1」を選択します。
    右のプロパティウィンドウ的なところから「詳細設定」>「データ」>「text」がThisItem.Noとなっているところを
    ThisItem.氏名に変えます。すると画像のように名前が表示されるかと思います。
    changename.png

次に、出欠の有無と既に集金しているかどうかといった項目を作っていきます。
ツリーから「BrowseGallery1」を選択すると、プレビューのリストの左上に鉛筆のマークが出ていますので、そこをクリックしても編集していけます。
editcanvas.png

「挿入」タブから「ラベル」を選択して「出欠」、「集金」というラベルを作ります。(「ホーム」タブの中にフォントサイズ等あります)
ツリーの「Body1」を選択し、コピー&ペーストすると「Body1_1」ができて、それの「詳細設定」>「データ」>「Text」をThisItem.集金に変更していきます。
あとは位置をちょちょっと合わせて、完成!!
editcanvas-2.png

いっちばん右上の再生ボタン(▷)でプレビューを見ることができます。
list-preview.png

オォ~~

詳細画面を開いてみる

リストひとつずつに「>」というリンクがついていると思います。
これを押下すると、そのリストのデータ詳細画面に遷移します。
detail-preview.png

編集画面を開いてみる

さらに右上のえんぴつマークをクリックすると編集画面に遷移します。
edit-preview.png

データを更新してみる

鈴野さんの出欠に"〇"を入力し、画面右上のチェックをクリックするとデータが更新されます。

リストに戻って確認してみると・・・
result-preview.png

〇がついてますね!!
OneDriveのExcelを確認してみると、しっかりと更新されています。

感想

Ofiiceのリソースに簡単にアクセスできるのは便利ですし、Excelでのデータ管理を補助するようなアプリが作れそうです!

意外と情報が見つからなかったので、作り込むのは結構難しそう・・・?
いい情報があれば是非教えてくださいm(__)m