はじめに
以前、Office365 PowerAppsを触っていました。
PowerAppsは、かな～りとっつきにくいツールで、使い方をメモしておかなきゃ忘れてしまいそうだなと思いながら、放置していました。
アプリを修正しようと久しぶりに触ったら、案の定すっかり忘れていたので、今度こそ、 またいつ忘れても大丈夫なように、ハマったところを中心に、使い方をメモしておこうと思います。
量が多くなったので記事を下記の３つに分けていて、本記事は１つ目の記事になります。
その１：基礎
「Microsoft (Office365) PowerApps 使い方メモ」
その２：データ関連
「Microsoft (Office365) PowerApps 使い方メモ (データソース・コレクション編)」
その３：その他メモ書き
「Microsoft (Office365) PowerApps 使い方メモ (その他)」
Microsoft PowerAppsとは？
Excelに、ボタンやテキスト入力などのフォームを置いて、簡易UIを作ることがあります。
しかし、ExcelファイルをExcel Onlineに上げてしまうと、Excel OnlineではVBAが使えないため、その簡易UIを使うことができません。
そういった、WebのOffice365上で、簡易UIを作るためのツールが、Microsoft PowerAppsです。
ただし、PowerAppsはVBAのようなコーディングができないため、データの入力フォームや、Microsoft Flowを実行するボタンの配置くらいの、ごく簡単なUIしか作れません。
作り方・使い方・更新方法
まず、PowerAppsのサイト構成および、作成から使用、更新の流れが分かりにくいので、順を追って説明します。
作り方
[Office365]-[格子アイコン]-[PowerApps]の[＋作成]から作ります。
ここではテンプレートではなく、アプリを１から作る[キャンバス アプリを一から作成]にします
するとPowerAppsのアプリが作成され、エディタが立ち上がります。
アプリの保存は[ファイル]メニューを押して[保存]で行います。
使い方
上記のエディタページは上に「PowerApps」と書かれているのですが、最初に遷移したOffice365のPowerAppsのページとは別の、エディタ専用のサイトになります （最初、同じサイトだと勘違いしていて混乱しました…）
作成したアプリはの実行は、最初にPowerAppsを作成する時に押したOffice365のPowerAppsページの[+作成]の上の[アプリ]メニューから行います。
Office365のPowerAppsページからPowerAppsのエディタを開くには、アプリの[編集]から行います。
Office365のPowerAppsのページと、PowerAppsのエディタのページは行き来することになるので、両方を立ち上げておいた方がいいかと思います。
Office365のPowerAppsのページからアプリをクリックすると、無事アプリが実行されます。
更新方法
アプリをエディタで修正して保存するには、最初の時と同様、[ファイル]メニューを押して[保存]で行います。
そして、ここも分かりにくいのですが、保存しただけではアプリには反映されず、同じく[保存]メニューで表示される[発行]ボタンを押す必要があります。
すると、先程と同じ方法でアプリを実行すると、変更内容が反映されます。
ちなみに、初回保存時のみ、保存すると即発行が行われます。
アプリは他の人と共有して、他の人が使うこともあるので、発行して反映されるという仕様は妥当かと思うのですが、初回保存はそれが無いので、最初発行というものがあるのに気づかずハマりました…。
エディタからの動作テスト方法
エディタの右上の右三角アイコンを押すと、動作テストが行えます。
テストでは、表示している画面からいきなり実行されるので、アプリスタートから確認したい場合は、最初のページを表示してアイコンを押します。
構成
次に、PowerAppsの基本構成と、エディタ画面構成を見ていきます。
オブジェクト
PowerAppsは、Webサイトでいうところの「ページ」のような、「画面」の集まりで構成されます。
そして、その画面の上にボタンなどのコントロールを配置していきます。
エディタの[ツリービュー]に、そのアプリに存在する「画面」「コントロール」などの全オブジェクトが表示されます。
[ツリービュー]の一番上にある「画面」が、アプリを起動した時に一番最初に表示される画面となります（図では「Screen1」）- 画面「Screen1」の中に、各種コントロールオブジェクトが配置されていきます。
あるオブジェクトから、他のオブジェクトを参照する場合、[ツリービュー]のオブジェクト名を使うので、ここのオブジェクト名は重要です。
プロパティ
各オブジェクトは、大きさや色、クリックした時に呼び出されるOnSelectなどのイベントハンドラが、そのオブジェクトの「プロパティ」として定義されています。
それらのプロパティに値を設定したり、コードを追加していくことにより、アプリを作成していきます。そして、コードを書ける場所はプロパティのみです。
エディタでオブジェクトのプロパティを設定するには、まず、エディタの[ツリービュー]で設定したいオブジェクトを選択します。
選択したオブジェクトのプロパティは
- メニュー下の関数式
- 右カラムの「プロパティ」タブ
- 右カラムの「詳細設定」タブ
の３箇所に表示され、そこから設定します。
表示箇所は３つありますが、見せ方が違うだけで、どれも同じものです。（分かりにくいです…）
（「TextInput1」を選択した状態。３ヶ所に「TextInput1」のプロパティが表示される）
画面移動
別の画面に移動させるにはNavigate(<移動先画面名>, <移動時アニメーション種類>)関数で行います。
例えば、ボタンを押したら次の画面に遷移するようにするには、下記のようにします。
- ボタンを選択
[OnSelect]プロパティにNavigate(<移動先画面名>, None)
変数
PowerAppsには
- アプリ全体で使える、グローバル変数
- 画面内でのみ使える、コンテキスト変数
の２種類の変数があります。
- グローバル変数の値のセットは
Set({<変数名>:<値>})で行います。 - コンテキスト変数の値のセットは
UpdateContext({<変数名>:<値>})で行います。
変数の宣言はなく、値をセットすると動的に変数が作成されます。
関数の書き方・および注意点
- PowerAppsはプログラムが書けません。全て関数で記述し、その関数はオブジェクトのプロパティに記述します。
- 制御文（IF・Switch）も関数になります
例えば、ボタンを押した時に、変数の値によって飛び先を変えるには、ボタンのOnSelectに下記のような関数を書きます。
IF(TestVar=true, Navigate(Screen1, None), Navigate(Screen2, None))
- シングルクォーテーションで囲った文字はオブジェクトを指すので、文字列は必ずダブルクォーテーションで書きます。
- 文字列の結合は「&」で行います。
- 例）
"文字列"&"文字列" - もしくは、
Concatenate()文字連結関数を使います。 Concat()関数はありますが、文字列連結の関数ではありません。
- 例）
- 文字列にはエスケープシーケンスが使えません。
Char()関数で直接文字を書きます。- 例）改行を使う：
"文字列"&Char(10)&"次の行の文字列"
- 例）改行を使う：
- ２つ以上の関数を続けて記載する場合は、関数の後に「;」を入れて関数を区切って記載します。
- 例）変数を設定して画面移動する：
Set({Flag:true});Navigate()
- 例）変数を設定して画面移動する：
初期化処理
- アプリを起動した時の初期化処理は、
AppオブジェクトのOnStartプロパティに記載します - 各画面が表示される時の初期化処理は、各画面オブジェクトの
OnVisibleプロパティに記載します
終了処理
アプリを起動している状態でブラウザを閉じても、Office365のサーバーにはアプリが終了したことがすぐに伝わりません。
その状態で新たにアプリを配信しようとすると、まだ開いているアプリがあるとエラーになることがあります。
そんな場合は、閉じるボタンなどを設置し、ボタンが押されるとExit()関数を呼び出して明示的にアプリを閉じるようにすると、Office365にアプリが終了したことがすぐに伝わるようになります。
関数リファレンス
PowerAppsは関数だけでコーディングしていく形になります。
関数リファレンスは下記にあるのですが、分類がされていないので、名前から推測して自力で探します。
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/formula-reference
続いて、PowerAppsで扱うデータソースの説明になりますが、長くなったので別記事にしました。
