cloud column microsoft powerplatform cover

Power Apps でテキストラベルを使ってみよう（三島正裕の Microsoft Power Platform 業務効率化コラム第３回）

1 はじめに
2 テキストラベルを修正する
3 テキストラベルは[+挿入]から追加できる
4 プロパティの内容を確認する
5 テキストラベルの表示内容を変更する
6 Power Platform 製品関連情報・サービス
7 Microsoft Power Apps ハッカソン、イベント登壇レポート
8 Power Platform 導入事例

はじめに

クラウドビジネス担当の三島です。Microsoft Power Platform コラムということで業務改善やDX推進のヒントになる話題を皆様にお届けしたいと思います。

Power Apps の機能を使うと、自動で Excelテーブルをスマホアプリにすることができるのですが、表示内容や項目の位置が、イメージ通りに作成されていない場合があります。そこで今回は、自動作成された Power Apps アプリをベースに一覧画面に表示されているテキストラベルの修正方法を解説したいと思います。

テキストラベルを修正する

cloud column microsoft powerplatform 3 1

テキストラベルは[+挿入]から追加できる

このタイトルは”テキストラベル”と呼ばれるコントロールで表示しています。これはアプリの[+挿入]を開いた中にある、ディスプレイから画面に追加をすることができるコントロールです。メニューからコントロールを選択すると、マウス操作でアプリ画面の好きな場所に置くことができます。

cloud column microsoft powerplatform 3 2

プロパティの内容を確認する

“Gyomu”のテキストラベルをマウスで選択してみてください。画面上にある入力フォームに”Gyomu”と表示されたことがわかると思います。これはテキストラベルのプロパティにセットされている値です。

cloud column microsoft powerplatform 3 3

プロパティはコントロールごとに様々なものが用意されています。入力フォームの左に”Text”と書かれている選択肢が見えます。この選択肢を開くと、用意されているプロパティの一覧を見ることができます。沢山のプロパティがあることがわかりますが、この内、”Text”と呼ばれるプロパティは画面に表示する文字をセットするところです。文字の場合はダブルコーテーションで囲い、数値の場合は囲わずにセットします。

cloud column microsoft powerplatform 3 4

試しに、”Gyomu”の箇所を”業務報告アプリ”と修正をしてみましょう。アプリのタイトルも”業務報告アプリ”と表示されるはずです。画面のテキストラベルをダブルクリックすることで、直接テキストを編集することもできます。

cloud column microsoft powerplatform 3 5

アプリを作成した時点ではテキストラベルには”Gyomu”と表示されていますが、この”Gyomu”というのは、このアプリを作成する際に選択したテーブル名です。Excelテーブルの名前が”業務報告アプリ”であれば、アプリが作成された時点で”業務報告アプリ”と設定されます。

一覧の内容を修正する

一覧の内容も修正してみましょう。一覧には、上司コメントと報告内容、担当者が表示されていますが、更に日時と顧客名を追加してみます。

cloud column microsoft powerplatform 3 6

さて、テキストラベルを画面に追加する際に、ひとつ注意をしておきたいことがあります。それはテキストラベルを置く場所です。開発画面の左にあるツリービューを見ると、様々なコントロールを確認することができます。コントロールは全て並列に並んでいるわけではなく、いくつか階層があることがわかると思います。

”BrowseScreen1”というのが一覧画面のことです。この中に”BrowseGallery1”という一覧表示をするためのギャラリーがあり、その中にテキストラベルなどのコントロールがあります。ギャラリーの中に置かれたコントロールは、データの数だけ複製されて、一覧表示されます。今回追加するテキストラベルは、このギャラリーの中に追加します。

cloud column microsoft powerplatform 3 7

それではギャラリーにテキストラベルを追加します。ギャラリーの中にテキストラベルを追加するのに簡単な方法は、ギャラリーの中のコントロールをどれか選択した状態で、挿入をすることです。ここでは、一番上にある”Rectangle1”という四角形を表示するコントロールを選択した状態で、[＋挿入]からテキストラベルを追加してみましょう。

cloud column microsoft powerplatform 3 8

すると、ギャラリーの中にテキストラベルが追加され、データ毎にもテキストラベルが表示されたことがわかると思います。

cloud column microsoft powerplatform 3 9 1

テキストラベルの表示内容を変更する

テキストラベルの表示内容を修正してみたいと思います。テキストラベルを選択すると、Textプロパティには”ThisItem.目的”とセットされているのがわかります。”ThisItem”というのは、このギャラリーに紐づいているテーブルデータを表しますので、”.”（ドッド）の後ろの列名を変更すると、表示する列名を変更することができます。試しに”目的”の部分を”日時”に変更をしてみてください。テキストラベルに表示される内容が”日時”に置き換わるはずです。