Power Apps スマホ用アプリの簡単なプログラミンの勉強

はじめに

Power Apps はマイクロソフト クラウド Office365 の中に含まれるサービスの一つです。

前回、「Power Apps スマホ用の簡単なアプリをノンプログラミングで作成」を作成しました。このアプリ、実は Power Apps が自動的に簡単なプログラミン作成を行っているのです。
今回は、その内容を確認し、自分でカスタマイズして自社にあったアプリの作成が出来るように、又、今後更に複雑なアプリ作成の手掛かりになればと思って、内部に記述されているプログラミングの勉強をして行きたいと思います。

最初から満足ゆく内容にはならないかも知れませんが、少しづつ手を加えてバージョンアップし、分かりやすいページにして行きたいと思います。

閲覧画面の設定

一覧の更新

画面に表示されている内容を更新します。特に、新規データの追加や、不要データの削除など行った後に強制的に表示を更新したいときに利用する処理だと思います。

このアイコンをクリックすると「ナビケーション」画面の IconRefresh1 が選択されます。
そして「数式入力」欄に Refresh([@'[dbo].[TM_TOK]’]) が表示されます。

Refresh(接続先データソース)

 ‘[dbo].[TM_TOK]’ は、ここでは、 Azure SQL Server 中のサイバーBBの社内システムの得意先マスタのテーブル名です。
@ に付いては今のところ意味がわかりません。

 

一覧をアルファベット順に並べ替えます。

数式入力欄には、UpdateContext({SortDescending1: !SortDescending1}) が表示されます。

  • UpdateContext
    関数はコンテキスト変数を作成する事ができます。ここでは SortDescending1 という変数を作成し更新します。
    コンテキスト変数とはユーザーがボタンを押した回数や、データ操作の結果など一定の情報を一時的に格納する際に使用する変数です。
    変数についてはマイクロソフトのPowerappsサイトをご覧になって下さい。

    {SortDescending1: !SortDescending1}
    感嘆符 “!” 記号は、Not 関数で変数の値を切替えます。 このアイコンを何回もクリックすると得意先リストの表示を昇順、降順と並べ替えて表示する事が出来ます。

ここで、SortDescending1 のコンテキスト編集を aaaa と変更したら、赤〇に×印が出てしまいました。これは BrowseGallery1 の数式入力欄でも SortDescending1 を使っているからです。こちらの変更も aaaa への変更が必要です。こちらは後で説明致します。

新しい項目の作成

数式入力欄には、NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None) と表示されていて;は 2 つの関数を続けて記述しています。

NewForm(EditForm1)
新しい(New)モードでフォームを開きます。開くフォームは EditForm1 です。
新規入力モードで「編集/作成」画面を開きます。

  • Navigate(EditScreen1, ScreenTransition.None)
    新しい画面を開く時の切り替わり方を指定します。
    引数1:表示する画面の名前 EditScreen1 を指定
    引数2:新しい画面に変化する方法 ScreenTransition.None これは既定値です。
    既定値以外はマイクロソフトのPowerappsサイト、こちらを参考にして下さい。

項目の詳細表示

得意先が一覧で表示されます。ここで右側にある ▷ アイコンをクリックする事で、その得意先の詳細データを見る事が出来ます。

数式入力欄
Select(Parent)

シンプルに Select(Parent) のみで簡単ですね。
これはギャラリーコントロールで動作しているもので ▷ 以外の場所でも Select( Parent ) に設定され、選択した得意先の詳細画面を開きます。
よって、名前な住所部分をクリックしても目的の得意先分の詳細を開きます。(旧バージョンと違って簡単になっています。)

検索、並べ替え

ここが一番長いモジュールです。ここをクリアーすると、後が簡単で自分自身のプログラミングにも役立つと思います。
数式入力欄の一番右側の ▽ をクリックするとモジュール欄が広くなります。必要に応じて利用して下さい。

虫眼鏡マークで検索と表示されている部分のコントロール TextSearchBox1.Tex と連動しています。

数式入力欄
SortByColumns(Search([@'[dbo].[TM_TOK]’], TextSearchBox1.Text, “TOKAD1″,”TOKAD2″,”TOKBSM”), “TOKAD1”, If(SortDescending1, Descending, Ascending))

  • SortByColumns(サーチ関数記述文, “TOKAD1”, If(SortDescending1, Descending, Ascending))
    SortByColumns( Table, ColumnName, SortOrderTable )
    引数1:並べ替えるテーブル。「サーチ関数記述文に該当」
    引数2:並べ替えるフィールド名の文字列 「”TOKAD1″」
    引数3:並べ替えの値を含んだ単一列テーブル。「 If(SortDescending1, Descending, Ascending)」
    サイバーBBでは、SortByColumns(サーチ関数記述文, “TOKKSM“, If(SortDescending1, Descending, Ascending)) 会社名のフィールド名を設定します。

  • Search([@'[dbo].[TM_TOK]’], TextSearchBox1.Text, “TOKAD1″,”TOKAD2″,”TOKBSM”)
    Search( Table, SearchString, Column1 [, Column2, … ] )
    引数1:Table 検索するテーブル。「[@'[dbo].[TM_TOK]’]」
    引数2:SearchString 検索対象文字列 「TextSearchBox1.Tex」虫眼鏡マークで検索と表示されている部分のコントロールです。
    引数3:Column(s) 検索する文字列の名前で二重引用符で囲む 「”TOKAD1″,”TOKAD2″,”TOKBSM”」
    サイバーBBでは、Search([@'[dbo].[TM_TOK]’], TextSearchBox1.Text, “TOKKSM”,”TOKNME”,”TOKKSF”)、会社名、個人名,会社フリガナのフィールド名に変更します。

  • If(SortDescending1, Descending, Ascending)
    If 関数は、変数 SortDescending1 の設定が true か false かをチェックします (アプリの [並べ替え] ボタンで設定)。 その後、この関数は Descending (降順)、または Ascending(昇順) の値を返します。
    SortDescending1 は、上で説明しています UpdateContext 関数で使用したコンテキスト変数です。

詳細画面の設定

一覧画面で選択して得意先の詳細を表示する画面です。

一覧に戻る

数値入力欄には Navigate(BrowseScreen1, ScreenTransition.None) と表示されます。

  • Navigate(BrowseScreen1, ScreenTransition.None)
    新しい画面を開く時の切り替わり方を指定します。
    引数1:表示する画面の名前 BrowseScreen1 を指定
    引数2:新しい画面に変化する方法は ScreenTransition.None 既定値です。

この項目の削除

今、表示されている得意先データを削除するアイコンです。

数式入力欄では、Remove([@'[dbo].[TM_TOK]’], BrowseGallery1.Selected); If (IsEmpty(Errors([@'[dbo].[TM_TOK]’], BrowseGallery1.Selected)), Back()) と表示されています。これは下記のように分ける事ができます。

  • Remove([@'[dbo].[TM_TOK]’], BrowseGallery1.Selected)
    Remove( DataSource, Record1 [, Record2, … ] [, All ] )
    引数1:削除の対象となるレコードが含まれるデータソース。 @'[dbo].[TM_TOK]’
    引数2:削除する条件で 1 つか複数のレコードの指定が可能。
        First( Filter( [@'[dbo].[TM_TOK]’], TOKCOD=”0922731410″ ) ) ) 得意先コード 0922731410 分を削除します。
        First( Filter( [@'[dbo].[TM_TOK]’], TOKDEL=TRUE ) ) ) 得意先マスタで削除マークが付いている分すべてを削除します。

  • If (IsEmpty(Errors([@'[dbo].[TM_TOK]’], BrowseGallery1.Selected)), Back())
    1 つか複数の条件で、True になったら対応する値を返します。
    If( Slider1.Value = 25, “Result1” )
    If( Slider1.Value = 25, “Result1”, “Result2” )
    引数1:比較演算子 > < = を使った条件で、得意先コード が 0922731410 なら TOKCOD=”0922731410″
    引数2:条件に合って返される値。True、空白、”Result” 、Back() など。。

  • IsEmpty 空のテーブルがないかを調べます。
  • Errors データソースのに発生する場合や、ネットワーク障害、不適切なアクセス許可、編集の競合など

この項目の編集

開いている得意先の詳細を見ながらデータの編集、変更を行う場合に鉛筆マークのアイコンをクリックします。

数式入力欄
EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)

  • EditForm(EditForm1)
    EditForm1という名前の画面を編集モードで開きます。

  • Navigate(EditScreen1, ScreenTransition.None)
    新しい画面を開きます。又、開く時の切り替わり方を指定します。
    引数1:表示する画面の名前 EditScreen1 を指定
    引数2:新しい画面に変化する方法は ScreenTransition.None 既定値です。

編集/作成画面の設定

+マークのアイコンや鉛筆マークのアイコンをクリックして表示される画面です。

項目のキャンセル

数式入力欄
ResetForm(EditForm1);Back()

  • ResetForm(EditForm1)
    ResetForm 関数は、EditForm1 に編集入力した内容を初期値にリセットします。

  • Back()
    最後に表示された画面に戻ります。

項目の送信

データを編集、変更した分を登録します。

数式入力欄
SubmitForm(EditForm1)
EditForm1 画面に入力されているデータをデータソースに保存します。

もっと使いやすいようにカスタマイズ

ギャラリーレイアウト

閲覧画面で BrowseGallery1 をクリックして、プロパティ設定画面のレイアウトの ▽ をクリックして下さい。

ギャラリーレイアウトが選択できます。画像を含めたものから空白のものなどが選択出来ます。

ドロップダウンの活用

得意先データの中には、既存客、見込み客、仕入先、関連会社などなどたくさんのデータが入っています。ですから表示するデータ量も多くなってしまいます。そこで「ドロップダウン」を追加してデータ量を制限したいと思います。

  • BrowseGallery1 をクリックして、検索エリアと顧客区分のドロップダウンエリアを空けるため上部下に下げて縮小させます。
  • 検索エリアを 1 段、下に下げます。
  • 画面上部のツールバーから「入力」「ドロップダウン」を選択して下図のようにセットします。

ドロップダウンを貼り付けたら、右側のプロパティの項目欄で顧客区分に使用するデータベース dbo_TM_KNA を設定します。

もし、顧客区分のような該当するデータベースを設定していなかったら左側のデータベースマークからか接続を行い。右側の▽マークから設定を行って下さい。

その後、Valuer 欄を KNANAME のように顧客区分マスタの区分名にあたるフィールドを設定します。

BrowseGallery1 をクリックして、Items = の式に Search の条件を指定します。つまり、ここでは
TOKM1N = Dropdown1.SelectedText.KNANME となります。

TOKKM1N:dbo.TM_TOK 顧客マスタの顧客区分にあたるフィールド名
KNANME:顧客区分マスタの区分名にあたるフィールド名

上記の Dropdown1.SelectedText. の形で設定します。

ドロップダウンをクリックすると下図のように顧客区分が表示され、販売店を設定すると下図のように 2 件の候補が表示されます。

以上のようにホント簡単に作成する事が出来ます。