【PowerApps】数値入力用ボタン作成方法解説

PowerAppsで在庫管理ようにアプリを作成した場合、数値の入力をテキスト入力で入力するケースが大半だと思います。
スマートフォンなどでテキスト入力する場合、「日本語テンキー」が開き、数字入力に切り替えて入力しますよね。
数字しか入力しないのに毎回数字入力するのめんどくさいと思いませんか?

今回は、数字入力専用ボタンを作成し、楽をしたいと思います。

目次

数値入力用ボタンを作成

STEP
ギャリー内にボタンを挿入し、0〜9のボタンを用意する

Itemsプロパティの左から順にギャラリーの上から表示されるので、順番に注意
ギャラリーの折り返しの数は「3」に設定する

Button1:Textプロパティ

ThisItem.Value

Galley 1:Itemsプロパティ

["7","8","9","4","5","6","1","2","3","0"]
STEP
入力値のリセット用にクリアボタンを用意する

ギャラリーの外にボタンコントロールを追加し、クリアボタンを作成します。

STEP
ギャラリー内のボタンに数値入力できるようにする

ギャラリー内のボタンのOnSelectプロパティにSet関数で選択したレコードのデータを変数に入力する

Button1:OnSelectプロパティ

Set(入力値,入力値*10+ThisItem.Value)

入力値の変数に「*10」することで1の位に数値を足していくことができます。

STEP
クリアボタンに数値をクリアするように設定する

クリアボタンのOnSelectプロパティにSet関数で変数「入力値」を0に入力する

Button2:OnSelectプロパティ

Set(入力値,0)
STEP
入力欄に書式設定と変数を設定する

テキストラベルを挿入し、Text関数で1000の位で「 , 」が入るように設定する

Label1:Textプロパティ

Text(入力値,"#,###")
STEP
実際に入力してみる

ボタンを押した数字が反映され、1,000の位で「 , 」で区切られましたね!

入力するときだけ表示

数値だけ入力するボタンを作成できましたが、普段使わない時は邪魔ですね。
必要なときだけ表示できるように設定しましょう。

STEP
アイコンで電卓を追加し、変数を設定する

Icon1:OnSelectプロパティ

Set(数値入力ボタン表示,true)
STEP
スクリーンの表示時に変数を設定する

スクリーンのOnVisibleプロパティに画面表示時にボタンコントロールが見えないように変数を設定します。

Screen 1:OnVisibleプロパティ

Set(数値入力ボタン表示,false)
STEP
ギャラリーとクリアボタンのVisibleに変数を設定する

ギャラリーとクリアボタンのVisibleプロパティに変数を設定することで表示・非表示を設定することができます。

STEP
実際に動作を確認してみよう!

プレビューモードにして、電卓アイコンをクリックしてみます。
電卓アイコンをクリックすると、入力ボタンを表示できました。
入力データを保存するときや、入力をキャンセルしたいときは、変数が「false」になるように設定してあげましょう!

まとめ

今回は、ギャラリーとボタンコントロールを使い、数値入力用ボタンを作成しました。
簡単に作れますのでぜひ活用してみてください。

おすすめ書籍紹介

ブログやYouTubeで学習するのも良いですが、やはりより深く勉強するには書籍がおすすめです。
初心者に特におすすめの書籍になります。

楽天ブックス
¥3,168 (2024/05/06 18:49時点 | 楽天市場調べ)
楽天ブックス
¥2,750 (2024/05/06 18:49時点 | 楽天市場調べ)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次