やること
- 会場選択Formを実装する。
- 会場IDを入力し、検索後に一致する会場情報を画面上に表示する。
- 会場情報はマスタから取得するため、手入力できないようにする。
手順
１．オブジェクト名の修正
データソースをもとに編集フォームを追加すると、申請データの各列はデータカードというオブジェクトで表示される。
データカード名は「列名_DataCardXX」となり、内部には「StarVisible」「ErrorMessage」「DataCardValue」「DataCardKey」の4つのオブジェクトで構成される。
まずデータカード名は名前が長すぎることと意味の持たない連番が割り振られるため、短縮するために「card + 列名」とする。
また、内部の4つのオブジェクトのうち実際に利用するのはDataCardValueのみである。こちらもデータカードの名前に倣って「val + 列名」にする。
本来であれば列名も英単語に置き換えるのが良いだろうが、ベストな英単語を考えるのが労力的にしんどいため、今回は日本語にしている。
- 以下のようにオブジェクトの名前を変更する
２．検索条件項目を追加
レイアウトの整形は一番最後の記事で行うため、検索ボタンは一番下に追加する。
フォーム直下のオブジェクトは全てデータカードで構成されており、統一性を持たせるため、およびレスポンシブ対応の実装をしやすくするため検索条件の入力テキストもデータカードの中に挿入する。
- 「
会場選択Form」のフィールドの編集リンクを選択
- 三点リーダ「…」をクリックし、「+カスタムカードの追加」を選択
- データカード「
DataCard1」が追加されたことを確認
- 追加されたデータカードの名前を「
card検索条件会場ID」に変更
- 直下にテキストオブジェクト「
val検索条件会場ID」、検索アイコンオブジェクト「ico検索条件会場ID」を追加
検索アイコンは「+挿入 > アイコン > 検索」にある。
- 各プロパティを以下のように設定
/** プロパティ名: 設定値 */ /** アイコンのサイズはテキストボックスの高さを取る正方形 */ Width : val検索条件会場ID.Height Height: val検索条件会場ID.Height /** 高さはテキストボックスと同じにする */ Y: val検索条件会場ID.Y /** x + width でテキストボックスの隣に隣接し、heightを引くことでテキストボックスの内側に隣接させる。 */ X: val検索条件会場ID.X + val検索条件会場ID.Width - val検索条件会場ID.Height /** 周りの余白。虫眼鏡アイコンの周りに余白があるとスマートに見える */ PaddingBottom: 4 PaddingLeft: 4 PaddingRight: 4 PaddingTop: 4 /** 背景色がないと虫眼鏡マークが見づらいため、適当な色を設定 */ Fill: RGBA(102, 182, 227, 1)/** プロパティ名: 設定値 */ /** デフォルトで入っている文字が邪魔であるため、空白を設定 **/ Default: ""
３．自作関数の追加
改めて、会場マスタにどんなデータが入っていたかを思い出すために再掲する。
会場IDは半角英数字でアルファベットは大文字である。
そのため、「a001」や「Ａ００１」と入力されると厳密には一致しないため、検索条件ありませんという結果になってしまう。
それではあまりにも不親切であるため、ユーザーが入力し終わった後に全角→半角、小文字→大文字の自動変換処理を加える。
小文字→大文字についてはPower Appsの標準関数Upperが用意されているが、全角→半角については悲しいことに標準関数がないため自前で用意しなければいけない。
- 自作関数の機能の有効化
Power Appsのデフォルトの設定では、自作関数の作成ができないため、作成機能を有効にする必要がある
・Power Apps右下の歯車マークの設定を選択
・続いて、左メニューから「更新」を選び、ユーザー定義関数をONに切り替え
・保存して更新するのダイアログでOKを選択
- ツリービューで「コンポーネント」タブを選択
- 「＋新しいコンポーネント」を選択
- 「
Component1」が作成されるため、「StringUtilsDef」に名前を変更 - コンポーネント全体のプロパティを設定
/** プロパティ名: 設定値 */ /** どういった機能であるか分かりやすくするために、説明文を付ける */ 説明: "文字列を扱うコンポーネント" /** コンポーネントはあくまでも自作関数の利用が目的であるため、 申請画面で表示されないようサイズを0にする */ 表示: オフ Width: 0 Height: 0 - プロパティウィンドウから「+新しいカスタム プロパティ」を選択
どの全角文字と、どの半角文字が対応するかの紐づけ情報を保持するためのテーブルを用意する。
- 以下のように各項目を設定し、「作成」をクリック
- ツリービュー上のプロパティのプルダウンから「
WideHalfTable」を選択
- 以下のコードを張り付け
/** プロパティ名: 設定値 */ Table( { wide: "０", half: "0"} , { wide: "１", half: "1"} , { wide: "２", half: "2"} , { wide: "３", half: "3"} , { wide: "４", half: "4"} , { wide: "５", half: "5"} , { wide: "６", half: "6"} , { wide: "７", half: "7"} , { wide: "８", half: "8"} , { wide: "９", half: "9"} , { wide: "Ａ", half: "A"} , { wide: "Ｂ", half: "B"} , { wide: "Ｃ", half: "C"} , { wide: "Ｄ", half: "D"} , { wide: "Ｅ", half: "E"} , { wide: "Ｆ", half: "F"} , { wide: "Ｇ", half: "G"} , { wide: "Ｈ", half: "H"} , { wide: "Ｉ", half: "I"} , { wide: "Ｊ", half: "J"} , { wide: "Ｋ", half: "K"} , { wide: "Ｌ", half: "L"} , { wide: "Ｍ", half: "M"} , { wide: "Ｎ", half: "N"} , { wide: "Ｏ", half: "O"} , { wide: "Ｐ", half: "P"} , { wide: "Ｑ", half: "Q"} , { wide: "Ｒ", half: "R"} , { wide: "Ｓ", half: "S"} , { wide: "Ｔ", half: "T"} , { wide: "Ｕ", half: "U"} , { wide: "Ｖ", half: "V"} , { wide: "Ｗ", half: "W"} , { wide: "Ｘ", half: "X"} , { wide: "Ｙ", half: "Y"} , { wide: "Ｚ", half: "Z"} , { wide: "ａ", half: "a"} , { wide: "ｂ", half: "b"} , { wide: "ｃ", half: "c"} , { wide: "ｄ", half: "d"} , { wide: "ｅ", half: "e"} , { wide: "ｆ", half: "f"} , { wide: "ｇ", half: "g"} , { wide: "ｈ", half: "h"} , { wide: "ｉ", half: "i"} , { wide: "ｊ", half: "j"} , { wide: "ｋ", half: "k"} , { wide: "ｌ", half: "l"} , { wide: "ｍ", half: "m"} , { wide: "ｎ", half: "n"} , { wide: "ｏ", half: "o"} , { wide: "ｐ", half: "p"} , { wide: "ｑ", half: "q"} , { wide: "ｒ", half: "r"} , { wide: "ｓ", half: "s"} , { wide: "ｔ", half: "t"} , { wide: "ｕ", half: "u"} , { wide: "ｖ", half: "v"} , { wide: "ｗ", half: "w"} , { wide: "ｘ", half: "x"} , { wide: "ｙ", half: "y"} , { wide: "ｚ", half: "z"} , { wide: "．", half: "."} , { wide: "－", half: "-"} , { wide: "ー", half: "-"} , { wide: "‐", half: "-"} , { wide: "―", half: "-"} , { wide: "＠", half: "@"} , { wide: "＿", half: "_"} ) - もう一度「+新しいカスタム プロパティ」を選択
以下のようにプロパティを設定
続いて、関数に渡すための変換元文字列の引数を定義する
「+新しいパラメータ」をクリック
- 以下のようにパラメータを設定し、作成ボタンをクリック
- 自作関数に対して作成ボタンをクリック
- 作成した関数がカスタムプロパティの欄に表示されることを確認
- 「
ConvertWideToHalf」に以下のコードを張り付け
/** プロパティ名: 設定値 */ Concat( Split(Trim(str), "") , Coalesce( LookUp(StringUtilsDef.WideHalfMapTable, wide = Value).half , Value ) )処理の流れとしては、「
Split(Trim(str), "")」で余分な空白を除きながら、入力文字を1文字ずつ分割する。
「LookUp(StringUtilsDef.WideHalfMapTable, wide = Value).half」で変換できるのであれば半角に変換する。
「Concat」で分割した文字を再度結合する、ということをやっている。
４．自作関数の呼び出し
今度は作成した自作関数をアプリケーション側から呼び出していく。
- 「+挿入」> カスタム >
StringUtilsDefを選択 - 「
StringUtilsDef_1」が追加されるが、末端の連番が気持ち悪いため「StringUtils」に変更
コンポーネントの時点で「StringUtils」とせずあえてDefを付けたのはこのため。
Power Appsではコンポーネントの定義と利用する側さえ名前の重複が許されないという不自由な仕様がある。 val検索条件会場IDのプロパティを以下のように設定/** プロパティ名: 設定値 */Default: cond会場ID OnChange: Set (cond会場ID, Upper(StringUtils.ConvertWideToHalf(Self.Text)));OnChangeはイベントプロパティで、テキストの値が書き換わったという動作を検知して、Set関数が呼ばれる。ローコード特有の複雑な処理が隠蔽されすぎて、途中の過程が飛ばされてなんやかんや動くというやつ。
テキストの値をプログラム側から変更したい場合、Defaultには変数を設定しておくとよい。と覚えておけばいいと思う。- 動作確認
検索条件テキストに「ａｂＣＤ１２ー＠」を張り付けて、フォーカスが離れたときに半角に変換されればよい。
５．会場マスタの追加
Power Appsからマスタを参照するにはSPOリストと同様にデータソースの追加を行う。
- Power Apps上部メニュー > 「データの追加」
- 検索項目で「Excel」と入力
- 「Excel Online Business」を選択
- SharePointサイト > ドキュメントを選択
- 「マスタ」ディレクトリを選択
- 会場マスタを選択
- 会場マスタにチェックを入れる
- 「Excelテーブルにある一意の列を使用する」を選択し、「連番」を一覧から選び追加ボタンをクリック
「自動生成した～」を選んだ場合、エクセルファイルのマスタに勝手にID列が追加されてしまう。
更にそのIDが20桁くらいのランダムな英数字なのでマスタの見栄えも悪くなるよねということで事前に連番の列を用意した次第である。
- データメニューに会場マスタが追加されていることを確認
６．検索処理の実装
少し横道にそれてしまったため、本題の検索ボタンを押して、マスタからデータを参照する機能を実装する。
- 「
ico検索条件会場ID」のクリックイベントとして以下のプロパティを編集/** プロパティ名: 設定値 */ OnSelect: Set (temp会場検索結果レコード, LookUp(会場マスタ, ID = 検索条件会場Text.Text))LookupはPower appsの標準関数で、条件に合致する1件のレコードを取得することができる。
そのままでは検索結果がすぐに消えてしまうため、OnSelectプロパティが呼ばれたあとでも参照できるようにSet関数でtemp会場検索結果レコードとして保存をしている。
また、検索結果がヒットしなかった場合についてはPart10 入力チェックの追加の記事でまとめて触れるため、今回はスルー。
６．検索結果の表示
「会場ID」～「会場都道府県」の5つのオブジェクトに対して以下の手順を繰り返し行う。
- オブジェクトの詳細設定の「プロパティを変更するためにロックを解除します。」をクリック
Power Appsの親切心で、デフォルトでは各プロパティが読み取り専用になっているため、それを解除する必要がある。
- 以下の通りプロパティを設定
/** プロパティ名: 設定値 */ /** 検索結果の項目を設定 XXにはオブジェクト名と一致する項目を選択 */ Default: temp会場検索結果レコード.XX /** ユーザーから手入力ができないように、入力禁止モードを設定 */ DisplayMode: DisplayMode.Disabled
７．動作確認
プレビュー画面で検索ボタンをクリックし、各項目に検索結果が反映されればOK
