4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsのキャンバスアプリでラベルのTextの動的変更

Last updated at Posted at 2019-08-18

#概要
PowerAppsのキャンバスアプリでラベルコントロールで表示する値をボタン押下によって変更するアプリを作成する。

##キャンバスアプリの作成
#####操作:「作成」「キャンバスアプリを一から作成」の順でクリックする。
TestApp01_01.png

##キャンバスアプリで変数を作成する
PowerAppsで変数を初期化するにはアプリケーションの起動時または画面の表示時のイベント処理で変数の初期化を行う式を設定する。
アプリケーション全体で使用できる変数を初期化する場合はAppのOnStartインベントの式にSet関数を使って変数を初期化する。
画面内で使用するローカル変数を初期化する場合は、Screen1のOnVisibleイベントでUpdateContextを使って変数を初期化する。
ここでは画面の表示時に初期化する。
#####操作:「Screen1」を選択して、「OnVisible」イベントの式に描きを入力する。

UpdateContext({MyName:""})

TestApp01_02.png

※UpdateContextはローカル変数をJSON式で設定するPowerAppsの関数

##変数を確認する
#####操作:メニューの「ビュー」「変数」の順にクリックする。
TestApp01_03b.png
#####操作:「Screen1」をクリックする。
Screen1のローカル変数が表示される。
ここでは「MyName」が変数として認識されていることが確認できる。
TestApp01_03.png

##テスト用の画面を作成する
Screen1にラベルコントロール1つとボタンコントロールを2つ貼り付ける。
ボタンコントロールのテキストをそれぞれ「ボタン1」「ボタン2」にする。
TestApp01_04.png

##ラベルコントロールに変数を割り当てる
ラベルコントロールを選択しTextプロパティに変数「MyName」を割り当てる
画面上部のfx欄に設定する必要がある。
TestApp01_05.png
※「"MyName"」とならないように注意する。

##ボタンの押下ときにラベルの表示値を変更する式を設定する
#####操作:ボタン1の「OnSelect」に次の式を設定する。

UpdateContext({MyName:"ボタン1"})

UpdateContext関数によって変数「MyName」の値を「ボタン1」に更新している。
#####操作:ボタン2の「OnSelect」に次の式を設定する。

UpdateContext({MyName:"ボタン2"})

UpdateContext関数によって変数「MyName」の値を「ボタン2」に更新している。
TestApp01_06.png

MyName変数の値を書き換えることによりラベルコントロールの値の書き換えができる。

##動作確認
動作確認はPowerAppsのアプリ一覧の「再生」から実行する。
PowerAppsの開発画面のテスト実行から起動した場合はScreen1のOnVisibleが動作しないため注意が必要。
TestApp01_07.png
左がボタン1押下時、右がボタン2押下時
TestApp01_08.png

##環境

アプリ バージョン
powerapps 3.19081.20
4
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?