PowerApps とは?スマホ用のアプリ開発(顧客管理ソフト)が簡単に作成出来ます。

Office365 の中に含まれる PowerApps とは?

PowerApps は、マイクロソフトのクラウド製品のデータやそれ以外の他社のクラウド製品のデータとも接続して今までプログラムを作った事の無い方でもノンプログラミングでスマートフォンやタブレット用にアプリを簡単に作る事が出来ます。
又、作成したアプリは
Web上なので社内の同僚とデータ共有も自然と行う事ができるのです。
  • SharePoint のデータ
    (AccessやExcelデータをSharePointにアップロードして使う
  • Azure のデータ
  • Dynamics365 のデータ
  • Common Data Service の新規エンティティ作成で自由にデータベースを作成する事も出来ます。

ここのページではどちらかと言うと基礎的な事をアップしています。しかし、本当にスマホ用のアプリを短時間で作ってみたい。と言う方は、PowerApps Access から SharePoint にデータを保存しそれを使ってみる。もご覧になってみて下さい。

PowerApps を構成する3つのコンポーネント

web.powerapps.com

PowerApps を起動した時、最初にサンプルプログラムや自分で作成したアプリなど一覧として表示されます。ここからアプリを実行したり、開発を行ったり、サンプルアプリやテンプレートを使って学習したりする事が出来ます。又、作成したアプリを個人や組織と共有処理なども行います。
 

PowerApps Studio

PowerApps Studio には、PowerApps Studio for web と PowerApps studio for Windows があり、PowerApps studio for Windows は、直ぐにサイトからインストールして使う事が出来ます。アプリとデータ接続を行いアプリの作成に使います。
 
下記図の〇番号を合わせてご参照下さい。
  1. 左側のナビゲーション バー。アプリのすべての画面のサムネイルが表示されます。最近ではオブジェクト名で表示されます。
  2. 中央のウィンドウ。作業しているアプリの画面が表示されます。
  3. 右側のウィンドウ。レイアウトやデータ ソースなどのオプションを設定します。
  4. プロパティ ドロップダウン リスト。数式を適用するプロパティを選択します。
  5. 数式バー。アプリの動作を定義する数式を (Excel のように) 追加します。
  6. リボン。コントロールを追加し、デザイン要素をカスタマイズします。
 

PowerApps 管理センター

組織で PowerApps を一元管理する場所です。ここで、アプリ、データ接続、およびその他の要素を格納するさまざまな環境を定義します。
 
管理センターは、Common Data Service データベースを作成して、アクセス許可とデータ ポリシーを管理する場所でもあります。

データ ソース、接続とコネクタ、ゲートウェイ

PowerApps は、コネクタを使用して下記のデータソースにも接続出来ます。
PowerApps には、Microsoft Flow が含まれていて2つを組み合わせてワークフローをトリガーし、これに対応するアプリを構築する事も出来ます。

PowerApps 画面全体の構成を見てみましょう。

①左側のナビゲーション画面

これまでのバージョンでは、BrowsScreen1、DetailScreen1、EditScreen1 などシンプルサムネイル画面だけが表示されていました。

今は上記画面のように Screen 、Gallery のようにそれぞれのスクリーン名とそれに含まれるコントロールの名前が表示されます。

それぞれをクリックすると中央の作業画面や右側画面がそれぞれに変化して表示されるのでとても便利になった気がします。

又、この画面は右側画面上部にあるボタンで切り替えも出来るようになっています。

②中央の作業画面

ここは、どちらかとゆうとスマホ、タブレットに表示される画面のデザインを行う画面です。

最初の方は、自分が分かりやすいように自分が理解出来ないものを選択し Gallery や Title、body ボタン など不要のコントロールは削除してみませんか?ただ、後で削除した分を後悔しないようにテストように名前を付けて一旦保存しておくなどの安全策はお願いします。

コントロールが必要になったら上段のツールボタンから追加も出来ます。とにかく自分が使う画面だから自分で理解しやすいようにコントロールを配置しましょう。サイズの調整や文字の大きさの調整などもカーソルを使って色々とやってみましょう。

③右側のプロパティ設定画面

ここは、オプションと詳細設定のタブがあります。オプションは、Gallery の種類から自分の表現したい画面に合った gallery を選択するようになっています。

詳細設定は、名前の通り色んなプロパティが表示されますので数値などで細かい値を入力するところです。ここのプロパティも使う部分とまったく使わないプロパティなどがあります。早く慣れて、自分的に左からの値、幅、高さなど決めてしまうと慣れてきます。今度、慣れてくると一つ一つプロパティ設定よりプログラミングがいいなーというようになります。

④プロパティのドロップダウンリスト

内容的には③と同じでプロパティが1個づつ表示が出来ます。又、それに合わせて⑤の広い入力エリアで値の入力が出来るようになっています。

⑤数式入力エリア

プロパティの中には関数など値が長くなる時があります。こういう場合は、このエリアを使って入力すると便利なようです。PowerApps で一番苦労するのがココだと思います。ノンプログラミングと言ってもやっぱり複雑な設定が含まれてきます。

PowerApps はココに設定する適したコントロールを見つけ出し、そのコントロールの使い方の勉強を行って、そのコントロールの動作するパラメータを記述する。これに慣れるまでが大変だと思います。BB も少しづつ時間を掛けて進みたいと思います。

⑥ツールバーエリア

ホーム、挿入、ビュー、アクション、画面によって下段の内容が変わります。ファイルの場合は画面自体が変わります。

[保存] や、作業中または完成のアプリを [開く]

作成したものを保存する場合は、上段の「ファイル」をクリックして下記の画面を表示します。その後、左側メニューより「保存」を選択して下さい。

作成したアプリや作成途中のアプリを開く場合も右側メユーの「開く」からアプリを選択して開きます。

一旦、開いた ファイルは、保存しないと再度、SharePoint のリストからの呼び出す事になります。よって一旦、このファイルから保存を行います。

「ファイル」から「名前を付けて保存」をクリックします。
・クラウド
・このコンピュータ の選択になります。

BB としては、保存先を SharePoint/PowerApps の中にしたかったのですが、これは PowerApps が管理していて出来ないようです。そこで、アプリケーションに名前、ここでは TDB 得意先 と名前を付けて保存します。一旦、保存すると「ファイル」の「開く」で表示されますので簡単に続きを行う事が出来ます。

慣れるまでは、サンプルファイルをここでテスト用の名前に変更して保存し、これを使ってコントロールを徹底的に削除したり、追加したりされる事をお勧めします。

上段の「ホーム」タブを確認してみましょう。

  • 新しい画面:空、スクロール可能な画面、リスト画面、フォーム画面が選べます。
  • BrowseScr..:BrowseScreen1の名前の変更が行えます。
  • フィル:テーマの色指定、ユーザーの色設定が出来ます。
  • 下矢印:テーマの色指定が出来ます。

上段の「挿入」タブを確認してみましょう。

  • 新しい画面:ここは、「ホーム」タブと同じです。
  • ラベル:テキスト、数値、日付などのラベルを追加出来ます。
  • ボタン:ボタンを追加します。
  • テキスト:ラベル、テキスト入力、HTMLテキスト、ペン入力の選択画面が表示されます。いずれかを選択して追加します。
  • コントロール:ボタン、ドロップダウン、日付の選択、リストボックス、チェックボックス、ラジオ、切り替え、スライダー、評価、タイマー、インポート、エクスポート、PDFビューアーのコントロールを選択して追加する事が出来ます。
  • メディア:画像、カメラ、バーコード、ビデオ、オーティオ、マイク、画像の追加が選択出来ます。
  • グラフ:縦棒グラフ、折れ線グラフ、円グラフから選択が出来ます。
  • アイコン:戻る矢印、次へ矢印、円、三角形、四角形、追加、編集、カメラ、検索、などたくさんのアイコンが準備されています。

ここで、いろんなコントロールを使ってみる事をお勧めします。

上段の「ビュー」タブを確認してみましょう。

データ ソース:現在、接続されているデータソースを表示します。
メディア:画像、ビデオ、オーディオのアップロード画面になります。
コレクション:今のところ使い方が不明
変数(試験段階):変数一覧が表示されます。BB が唯一設定した [上下順] が表示されていました。
詳細設定:画面右側にプロパティの設定画面が表示されます。

上段の「アクション」タブを確認してみましょう。

収集:コレクションを聞いてきます。今のところ不明です。
削除:コレクションを聞いてきます。今のところ不明です。
表示時:今のところ不明です。
非表示時:今のところ不明です。
開始時:今のところ不明です。
Flows:Flow の設定画面が開きます。今のところ不明です。

上段の「画面」タブを確認してみましょう。

  • 背面画像:たくさん候補が出てきます。
  • 画像の位置:フィル、自動調整、ストレッチ、タイル、中央などの選択があります。
  • フィル:「ホーム」の内容と同じです。

まだまだ、分からない事が多いです。

上段の「アプリのプレビュー(F5)」を確認してみましょう。

このボタンをクリックすると、現在の時点の設定状態のアプリを Windows 上で起動します。実際スマートフォンでの動きと同じように表示されるので動作確認が行えます。
この状態を終了するのは右側にある「×」ボタンをクリックすると元に戻ります。

下段の「横スクロールバー」を確認してみましょう。

これは、画面中央部の作業画面を大きくしたり、小さくしたりする事ができます。細かい作業を行うのには便利です。

DetailScreen とは

英語に弱い BB は、Detail を辞書で調べてみると”詳細”という意味が一番合っているように思いました。

Browse 画面で、データの一覧を表示し、一覧の中の > 矢印を押して次に開く画面です。

押された部分の得意先の情報を詳細表示するという事です。

DetailScreen を新しく作成する場合は、「新しい画面」からどのレイアウトで表示を選ぶかになります。

タブレットを使用する場合などレイアウトの違う表示を行う場合に DetailScreenが1、2、3という風に増えるのではないかと思います。

次が、DetailForm1です。下記のように一番右側の下三角矢印をクリックして「フォーム」を選択します。

「フォーム」の中にも、次回説明となる。「編集」と今回の詳細表示「ディスプレイ」の選択がある。という事です。ただ、今回は、SharePoint のリストデータからの自動作成で行っていますので設定の必要はありません。

コントロールを調べます。

DetailForm の次が、データ部分を表示する部分と、編集や削除などコントロールと2つに大きく分けてみるといいように思います。

SharePoint リストのデータを設定、各英文字のコントロール名ではわかりづらいので、Detail の D得意先コードなど日本語表記にした方がわかりやすくていいと思います。

又、更にコントロールが2つあり、フィールド名の表記用(DataCardValue)とデータの表示用(DataCardKey)です。

次は、アイコンと表示欄の設定です。Browse画面と同じものありますが下記の通りです。

  • LblAppName:この画面の名前欄、ここでは”得意先詳細”がいいと思います。
  • IconDelete:ゴミ箱アイコン、プロパティに削除処理がしてあります。
  • IconEdit:鉛筆マークアイコン、プロパティで編集画面に移動するよう設定してあります。
  • IconBackarrow:< マークアイコン、プロパティで、戻るの設定がしてあります。
  • RectQuickActionBar:上段に色々なアイコンを設定しているエリアで背景色を青色にしています。

EditScreen とは

Edit 画面は、 DetailScreen 画面と似ている部分が多いように思います。

この画面では、顧客の情報を入力して、新規登録を行ったり、既に登録している内容を修正して登録する。という目的の画面です。

そして、この画面は、DetailScreen 画面の 鉛筆マークのアイコンを押した時に表示する画面です。

EditScreen を新しく作成する場合は、「新しい画面」からどのレイアウトで表示を選ぶかになります。

これも DetailScreen と同じようにタブレットなどの場合、EditScreen1,2,3などと増えるのではないかと思います。

次が、EditForm1です。下記のように一番右側の下三角矢印をクリックして「フォーム」を選択します。こちらも DetailScreen 画面と同じ要領です。

コントロールを調べます。

DetailScreen 画面とほぼ同じですが、上段に設定されているコントロールを見てみます。

  • LblAppName:この画面の名前欄、ここでは”得意先登録”がいいと思います。
  • IconAccept:データ入力したのを登録するボタンです。
  • IconCancel:データ入力してもキャンセルして前の画面 DetailScreen 画面に戻ります。
  • RectQuickActionBar:上段に色々なアイコンを設定しているエリアで背景色を青色にしています。

各英文字のコントロール名ではわかりづらいので、Edit の E得意先コードなど日本語表記にした方がわかりやすくていいと思います。

この画面でも、フィールド名の表記用(DataCardValue)とデータの表示用(DataCardKey)と DetailScreen 画面と同じものがあります。

ErrorMessage:何かの条件指定でメッセージを表示できるようです。
StarVisible:いまの時点ではよくわかりませんが、色付けたりするのかな?という感じです。後でわかったら更新します。

以上が EditScreen 画面です。

ここからは、Items と Onselect に絞ってコントロール内のプロパティを調べて行きます。

又、チョットだけ変数などを自分なりの変数に置き換えて設定内容をわかりやすくしてみました。変えられるのはドンドン変えて自分なりの作り方に変更してみたいと思います。

説明の順序は、慣れるために簡単なものから調べてみたいと思います。

BrowseScreen 一覧表画面のコントロールを調べる

一覧の更新(リフレッシュ)

画面青い部分にある矢印のある〇のアイコンです。このアイコンって PowerApps で使用されるアイコンなので、これをクリックすると Refresh (リフレッシュ)機能がついているのかなと思いますよね。BB はそう思いました。しかし、これらのアイコンは、図形に合った働きなど何も設定されていません。他にも意味ありげな図形がたくさんあります。しかし、全て使う私たちが設定するようになっています。PowerApps って、この設定を一つづづ行ってアプリを作成するもののようです。

Refresh(TM_TOK)

(TM_TOK) これは、BB が使っている Access 時代からの得意先マスタのテーブル名の意味で、PowerApps には関係ありません。皆さんが作成するデータベース名をココに入れます。

  • Refresh 関数
  • Refresh( DataSource ) DataSource – 必須。 更新するデータ ソース。
  • 新規追加したデータや修正したデータも含めて表示を行います。

項目の詳細表示

ここでは大きな横向きの山形マークのアイコンですが、これをクリックした時に次の画面を表示するように Navigate を設定します。

OnSelect =Navigate(DetailScreen1,None)

  • Navigate( DetailScreen1 : 表示する画面 , None : 現在画面と次画面の切替方法 )
  • 現在の画面と次画面の切替方法
    Cover:新しい画面が、現在の画面を覆うようにスライドしながら表示される。
    Fade:前の画面がフェードアウトし、新しい画面が表示される。
    None:前の画面が新しい画面にすばやく置き換わる。
    UnCover:前の画面がスライドしながら画面外に移動し、その下から新しい画面が現れる。

新しい入力画面の作成

ここでは、+マークのアイコンに NewForm を設定します。

OnSelect =NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)

  • NewForm(EditForm1)項目を作成するためのフォーム コントロールをリセットします。

NewForm(EditForm1)を省略して、Navigate(EditScreen1, ScreenTransition.None) のみで実行したら、BrowseScreen で表示されている顧客データの修正モードになってしまいました。
ここでは、新規登録が目的なので、NewForm(EditForm1)が必要になるようです。画面とデータ表示は違うと考えた方が良いみたいです。

並べ替え

アイコンとしては、上下矢印マークです。これまでのアイコンの図は自分自身で作成したり、他のアイコンを使っても大丈夫です。ようするに動作の設定が必要だからです。

OnSelect =UpdateContext(SOTHEN: !SOTHEN)

  • UpdateContext(SOTHEN: !SOTHEN)
    この関数を使うと、コンテキスト変数を自分で作成できます。この変数には、ユーザーがボタンを押した回数やデータ操作の結果など、一定の情報を一時的に格納する時に使用する変数です。
    今回、この SOTHEN は BB が作成した変数で、並べ替えボタンを押した時に代入される値を入れる変数という意味で名前を付けしています。
  • SOTHEN: !SOTHEN の右側についている ! マークは、逆(反対)を意味する。ので常にどちらかが選択されるという意味のようです。
  • アイコンをクリックする事により BrowseScreen 画面に表示されるデータを「昇順」だったら「降順」へ、「降順」だったら「昇順」へと並べ替えを行います。

BrowseGallery で一番、最初に表示されるデータの設定

ここは、複雑なので最後に持って来ました。しかし、変数を自分なりに置き換えてみると結構わかりやすくなります。この PowerApps に早くなれて、自分流に置き換えられる変数は早く置き換えた方が勉強の早道になる気がします。BB も随分なれてきた感があります。

下記のように BB が分かりやすい名前に変更しました。

  • TM_TOK は、SharePoint のリストの中にある得意先テーブル名です。
  • TOKKSM は、TM_TOK の中に含まれる会社名のフィールドです。
  • KENHEN は、検索アイテム欄の変数をわかりやすくするために BB 流に変更した変数名です。
  • Descending,Ascending は、並べ替えの降順と昇順の意味です。

Items =SortByColumns(Filter(TM_TOK, StartsWith(TOKKSM, KENHEN.Text)), “TOKKSM”, If(SOTHEN, Descending, Ascending))

  • StartsWith(TOKKSM, KENHEN.Text)は、KENHEN(検索項目欄で入力された文字列が代入される変数)で検索する文字列が TOKKSM の文字列の先頭にあるかどうかの意味になります。
  • Filter(TM_TOK, 検索文字列が会社名の先頭データにある分)のみ抽出する
  • SortByColumns(得意先データで検索条件にあったデータ,”TOKKSM”, If(SOTHEN, Descending, Ascending)) は、昇順/降順をしてした順で会社名を並べ替え表示す

SortByColumns( Table, ColumnName1 [, SortOrder1, ColumnName2, SortOrder2, … ]

1 つまたは複数の列に基づいてテーブルを並べ替える場合にも使用できます。

  • Table – 必須。 並べ替えるテーブル。
  •  ColumnName(s) – 必須。 文字列として、並べ替える列名。
  •  SortOrder(s) – 省略可能。 SortOrder.Ascending または SortOrder.Descending

ここだけは、いまいちチョット理解するのが難しいです。このようなものは飛ばしましょう!ずっとやっていると理解出来るようになります。(今までの経験から)

上記の Filter 関数を使った場合、会社名の先頭文字からの検索になってしまいます。よって、会社名の文字列の中部分の検索を行いたい場合は、下記のように設定すると可能となります。こちらが便利だと思います。

Items = SortByColumns(Search(TM_TOK, KENHEN.Text, “TOKKSM”), “TOKKSM”, If(SOTHEN, Descending, Ascending)

DetailScreen 詳細表示のコントロールを調べる

DetailForm

DataSource = TM_TOK

他の言語なら、検索して表示など手続きが必要だと思うのですが PowerApps ではテーブルをセットするだけです。
Browse 画面の > ボタンからは、Navigate(DetailScreen1, ScreenTransition.None) の設定だけです。
> のボタンを押した時、選択した得意先が、次の画面で表示する得意先情報を内部でチャット引き継ぎしてくれているんでしょうね。簡単です。

一覧に戻る

OnSelect = Navigate(BrowseScreen1, ScreenTransition.None)

現在の画面とBrowseScreen1画面とをすばやく切り替えます。

この項目の編集

OnSelect = EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)

  • EditForm は、既定が FormMode.Edit でレコードの変更モードとの事。これに対して FormMode.New があるとの事です。

BrowseScreen から 詳細表示画面への設定は、Navigate(DetailScreen1, ScreenTransition.None) です。ですから、ここで、EditForm(EditForm1) 部分を削除して、Navigate(EditScreen1, ScreenTransition.None) だけの実行テストをしてみました。結果はOKです。無くても正常に動きました。

この項目の削除

OnSelect = Remove(TM_TOK, BrowseGallery1.Selected); If (IsEmpty(Errors(TM_TOK, BrowseGallery1.Selected)), Back())

If (IsEmpty(Errors(TM_TOK, BrowseGallery1.Selected)), Back())

  • BrowseGallery1.Selected は、一覧表示画面で、 TM_TOK を選択する。
  • IsEmpty 関数は、テーブル内にレコードがあるかどうかをテストします。
  • Errors 関数は、その直前の IsEmpty の実行によって結果を返す。
  • 削除する前に削除しようとする得意先が得意先データにあるか IsEmpty 関数で確認し、データが無かったら Back(前の画面を表示)しなさい。

Remove(TM_TOK, BrowseGallery1.Selected)

  • 1 つまたは複数の特定のレコードをデータ ソースから削除します。
  • TM_TOK, BrowseGallery1.Selected は、上記と同じです。

EditScreen 編集画面のコントロールを調べる

EditScreen

DataSource = TM_TOK

項目のキャンセル

OnSelect = ResetForm(EditForm1);Back()

ResetForm(EditForm1)

  • ユーザーが変更を行う前に、Editform1フォームの内容が初期値にリセットされます。

Back()

  • 前の画面に戻ります。

項目の送信

OnSelect =SubmitForm(EditForm1)

SubmitForm(EditForm1)

  • フォーム コントロール内の変更内容をデータ ソースに保存します。

今回は、SharePoint のリストデータを使った顧客管理ソフトのコントロールのプロパティの調べを終わります。
ここに投稿する。という事もあり、関数の説明などを今までよりは時間を掛けてサイトなども見てみました。おかげ様で勉強にもなりました。最後にコントロールを調べるときに出てきた関数をまとめてみたいと思います。

PowerApps は簡単、簡単と言っていましたが、段々と 100% は理解できなくなって来ました。
慣れる事以外ないですネ。