見出し画像

PowerAppsを教えてもらった話

rone

PowerAppsが素敵なのはわかるけど、どこから手を付けて良いやらわからなかったので勉強会を開いて頂き、目が開かれたので記載を残す。
今回はakira_hanaさん主催の「備品管理システム」をPowerAppsを作るというハンズオン飲み会という名の勉強会に参加。
続編は以下

下準備

Excelで以下のようなサンプルファイルを作る。
今回使うのはE列まであればいい。

画像21

サンプルファイルをsharepointにアップロードする。
詳細はこちらのありがたいブログを参考に


※列のタイトルはアルファベットで作らないと文字化けする。
列の名前を間違えた場合は表示を変えてもsharepoint上のURLでは変わらないので、最初が肝心。

インポートしたけど、IDが見えなかった。
リストの右上の「すべてのアイテム」→現在のビューの編集

画像7

IDにチェックを入れた

画像2

PowerAppsのアプリを作り始めてみる

PowerApps makers portalを開き、「+作成」→「キャンパスアプリを一から作成」を選択し、アプリ名は任意。
何よりもまずはpowerappsの保存が何よりも重要。
ファイル→保存でしっかりと保存。万が一消えないために。

画像3

メイン画面の名前を分かり易くする。ここでは「メイン画面」とした。

画像4

アプリのタイトル付けてみよう

四角のバーを置いてみる。
「+」→「四角形」→powerpointみたいにおいてみた。

画像5

画像は以下で入れる。
「+」の二つ下のメディアから

画像6

アップロードしたものをクリックしておくことができる。

画像7

「+」からテキストラベルで文字が書ける

画像8

「+」→「レイアウト」→「空の垂直ギャラリー」

画像9

ギャラリーを選択した状態で、「四角形」を追加し、四角形のプロパティから高さを1とする。
余白のような白い部分をD&D縮めると以下のようになる。
「四角形」自体は枠線として使用し、この白い枠にデータベースの要素をこれから入れていく。

画像11

Sharepointからの要素呼び出し

今度はsharepointリストと連携させる。
データベースアイコンから「データの追加」でsharepoint検索する。

画像10

下の「Sharepoint」を選択し、先程作成したリストを指定して接続する
ギャラリーを選択するとリストが追加される。

画像12

ギャラリーをクリックし、表示された下記の鉛筆ボタンをクリックし、ギャラリー対象の編集状態とする。この鉛筆ボタンはギャラリー扱う時には重要

画像13

「+」から「テキストラベル」をクリックするとリストの要素が追加される

画像14

一度プレビューしてみる

画像15

おお、できた。Sharepointの要素が呼び出されている。

画像16

テキストラベルを追加すると自動的に別の要素(文房具等)がでてくる。

画像17

「コピー用紙A4」をクリックし、画面上部の「fx」と表示されたExcelの計算式のような箇所「ThisItem.Title」って書いてある。
つまり、リストのTitle列が出ているってことだ。

画像18

データベース以外の言葉を扱う際には、「fx」欄にダブルクォーテーションで入れたい文字を記載することで可能。今回は「"種類"」とした。

画像19


先生のお手本を確認してみる

画像はSharepointの添付ファイルにファイルを設定しておいた上で、以下で追加可能とのこと。
　First(ThisItem.添付ファイル).Value
この辺りはいずれ検証が必要だが、今回はスルーさせてもらった。

画像20

「補充」の上にあるような「+」は画像ではなく、PowerAppsに付属しているアイコン。左のメニューの「+」からアイコンを選択し、とりあえず適当なものを置いてから、右側に表示されるプロパティの「アイコン」で後から変更させることができる。

在庫数の警告はどうしたら？

サンプルのDBに警告数を表す。Hachumeyasu列が存在し、その数以下になったら、警告するように画面上部の「fx」に記載する。
以下をコピペしてみた。

If(
ThisItem.Zaikosu > ThisItem.Hachumeyasu,
"残り" & ThisItem.Hachumeyasu & " になったら発注します",
"発注してください"
)

できたー。

画像22

さらに赤字に警告してみよう

If(
ThisItem.Zaikosu > ThisItem.Hachumeyasu,
Black,
Red
)

太文字

If(
ThisItem.Zaikosu > ThisItem.Hachumeyasu,
Normal,
Bold
)

フォントにifも使えてしまうのがすごい。

補充するためのボタン機能を作る。

左側の「+」からボタンを追加しておいてみる。

画像23

ボタンのプロパティの色のカスタムの下のバーで透過率を上げればいける。

画像24ボタン出来上がり。

最後は「テキスト」部分の「ボタン」という文字を空にすればボタン出来上がり。

画像25

データベースを編集する画面を作ろう。

前回作ったボタンを押したら、編集する画面を作る。
画面左上の「新しい画面」から「空」を選ぶ。

画像26

フォームを追加する
「挿入」→「フォーム」→「編集」

画像27

すると以下の画面がでるので、「データに接続してください」をクリック

画像28

画面右の「プロパティ」の「データソース」を開くと、Sharepointのリストが見えてくる。ここでは「備品リストサンプル」と表記。

画像29

要素が表示されて以下の画面になる。

画像30

プロパティの「列」を1「 レイアウト横」にすると以下のようになる。見易い。

画像31

左のフォーム(ここではForm1)をクリックし、右側の罫線を1にすると枠が見易くなっていい。

画像32

注目点は添付ファイル
ここでアイコンを追加するとSharepoint側で追加しなくてもよくなって楽とのこと。今回私は深く探らなかった。

画像33

空欄に内容を入れてみよう

フォームのプロパティの詳細のItemをクリックし・・・。

 ​Gallery5.Selected

※「Gallery5」については部品の名前なのでそれぞれ違うので注意。

画像35

「メイン画面」に戻って、ボタンの「詳細設定」を見ると「OnSelect」欄に「Select(Parent)」と記載されている。これは押すと行を選択するという意味となる。

画像35

ボタンを押したら、画面を切り替えたい。

ボタンの機能に「行を選択したうえで、画面遷移の動作」を付け加えたい。
「;」を追加することで行動が追加できる。つまり以下を追加

Select(Parent);Navigate(EditScreen2,ScreenTransition.Fade)

プレビューでボタンを押してみる。「補充」をポチっと。

画像36

見事遷移した。

画像37

データを変更してみよう。

「消しゴム」等のデータは入ったけど、それだけでは何もできないので、ここのフォームに「登録」ボタンを追加

画像38

けど、これでは押せるだけで編集が反映されるわけでない。
ボタンを押したら変更して「メイン画面」に画面遷移させたい。
ボタンのプロパティの詳細設定のオンクリックを編集し、以下を入れる。

SubmitForm(Form1);Navigate(メイン画面,Fade)

なお、「Form1」、「メイン画面」は人によって違うので注意。

画像39

では、プレビューで動かす。
消しゴムの在庫を6→7にして、登録ボタンを押す。

画像40

消しゴムが7になった！

画像41

ここまでで慣れると10分でできてしまうとのことです。うーむ、すごい。

できたアプリを他の人に渡すには？

PowerApps→アプリを開き、作成したアプリの「・・・」から「エクスポートパッケージ」でzipとしてDLできる。

画像42

逆にインポートは上の「キャンパスアプリのインポート」で取り込める

画像43

けど、リストは持っていけないのでデータは呼び出せないから注意

継承の問題

作る時には共有前提という意識が大事。
アプリを共有または専用アカウントで作成をすることで作った人がいなくなっても作り続けるようにする仕組みが必要。
VBA職人化しないようにどうしたらいいのかは中々答えはないと思う。

感想

powerappsはどうやって触ったらいいのやらわからなかったが、これでなんとなくわかった。
触ってみるのが一番だけど、どこから触ればいいのやら・・・。ここから二の足を踏んでしまっていたので、とても助かりました。
特にsharepointとのリストの連携がわかったのが特にありがたかった。

ありがとうakira_hanaさん

自宅で勉強するのであれば↓にサインアップするとフル機能が無料で期間制限なしで使えます
Power Apps Community Plan　個人使用向けの無料環境を入手

この記事が気に入ったらサポートをしてみませんか？