PowerAppsが登場して数日が経ち、ウィザードを使ってアプリ作成を試された方もいるかと思います。

今回は、その次のステップとして、PowerAppsでメニューを作成してみたいと思います。

 

PowerAppsとは？

マイクロソフトは2015年12月1日に、「PowerApps」を発表しました。

PowerAppsは、ExcelやDynamics CRM等のマイクロソフト製品だけでなく、Google DriveやOneDriveなどをデータ元として、アプリを簡単に作成できるツールです。

プログラミング言語を必要とせずに、Excelに似た関数などを使ってアプリを開発します。

 

PowerAppsの公開プレビューへ参加しよう

まだ、参加されていない方は、こちらの記事に参加方法を投稿してますので、ぜひご覧ください。

 

PowerAppsでアプリのメニューを作ろう

さて本題ですが、まだウィザード形式でアプリを作成されていない方は、こちらをご覧ください。

 

ステップ１：新規ページを作成

まず、Windowsから「PowerApps Studio」を開きます。

※お持ちでない場合は、こちらからインストールしましょう。

 

「Home」タブの「New Screen」を選択します。

クリックすると、新たなページが挿入されます。

 

名前を変更しましょう。既定では「Screen1」になってますので、「MenuScreen」などにわかりやすい名前にします。

 

ステップ２：ボタンを追加

ボタンを追加するには、「Insert」タブを選択、「Button」をクリックします。

 

選択すると、新たにボタンが表示されました。

 

ステップ３：ボタンの動作を追加

このままでは何も動ごかないので、動作を追加します。

「Action」タブを選択し、「OnSelect」を選びます。

 

OnSelectを選択した後、「fx」ボタンをクリックし、「Text」の隣の三角ボタンをクリックします。

 

リストが表示されるので、「Action」を選択します。

 

関数が選べるようになるので、今回はページ移動の関数「Navigate」を選択します。

 

関数の入力エリアが「Navigate(」と表示されているはずです。

PowerAppsは自動で各ページを認識し、リスト表示してくれます。

今回は「BrowseScreen1」へ移動するようにしたいので、「BrowseScreen1」を選択し「,」（カンマ）を入力します。

 

「ScreenTransition…」で始まる選択肢がリスト表示されます。これは、「BrowseScreen1」へページ移動する際に、移動のアニメーション効果をどうするかを選択するためのものです。

ScreenTransition.Cover：　上にカバーをかぶせるようなアニメーションで移動します。

ScreenTransition.Fade：　フェード効果で移動します。

ScreenTransition.None：　アニメーション効果なしで移動します。

 

正しく選択すると、以下のようになります。（以下はフェード効果を選択した場合です）

 

ステップ４：ボタンの表示内容を変更

このままではボタンの表示が「Button」になってしまいますので、わかりやすい表記に変更します。

「OnSelect」になっている項目を「Text」に切り替えます。「Button」の表記は関数を入力するエリアで”「”Button”」となっているためです。これを別の表記に変更します。

 

私のアプリは以前の記事で投稿した、イベント出席管理のアプリなので、「イベント一覧」にしました。

少しシンプルなメニューですが、これでも十分動作します。

 

ステップ５：試してみよう

画面右上の再生ボタンをクリックすると、PowerApps Studio内でアプリがプレビューできます。

 

これがプレビュー画面です。ちょっとシンプル過ぎますね…

 

ボタンやアイコンを増やして手を加えると、以下のようにできます。