Power Apps での ボタン コントロール

  • [アーティクル]

ユーザーがクリックまたはタップしてアプリを操作できるコントロール。

内容

ユーザーがコントロールをクリックまたはタップするときに 1 つ以上の数式を実行するように、ボタン コントロールの OnSelect プロパティを構成します。

キー プロパティ

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

テキスト – コントロールに表示されるテキスト、またはユーザーがコントロールに入力するテキスト。

追加のプロパティ

Align – コントロールの水平方向の中心に対するテキストの位置。

AutoDisableOnSelect – OnSelect 動作の実行時にコントロールを自動で無効化します。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が実線、破線、点線、またはなしかどうか。

BorderThickness – コントロールの境界線の太さ。

Color – コントロールのテキストの色。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

DisabledBorderColor – コントロールの DisplayMode プロパティが無効に設定されている場合のコントロールの境界線の色。

DisabledColor – コントロールの DisplayMode プロパティが無効に設定されている場合のコントロール内のテキストの色。

DisabledFill – コントロールの DisplayMode プロパティが無効に設定されている場合のコントロールの背景色。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

Fill – コントロールの背景色。

Font – テキストを表示するフォントのファミリーの名前。

FontWeight – コントロール内のテキストの太さ: 太字、中太、標準、または細字。

Height – コントロールの上端と下端間の距離。

HoverBorderColor – ユーザーがコントロール上にマウス ポインターを重ねているときのコントロールの境界線の色。

HoverColor – ユーザーがコントロールにマウス ポインターを重ねているときのコントロール内のテキストの色。

HoverFill – ユーザーがコントロールにマウス ポインターを重ねているときのコントロールの背景色。

Italic – コントロール内のテキストを斜体にするかどうか。

PaddingBottom – コントロール内のテキストとそのコントロールの下端間の距離。

PaddingLeft – コントロール内のテキストとそのコントロールの左端間の距離。

PaddingRight – コントロール内のテキストとそのコントロールの右端間の距離。

PaddingTop – コントロール内のテキストとそのコントロールの上端間の距離。

Pressed – コントロールが押されている間は true 、それ以外の場合は false。

PressedBorderColor – ユーザーがコントロールをタップまたはクリックしたときのコントロールの境界線の色。

PressedColor – ユーザーがコントロールをタップまたはクリックしたときのコントロール内のテキストの色。

PressedFill – ユーザーがコントロールをタップまたはクリックしたときのコントロールの背景色。

RadiusBottomLeft – コントロールの左下隅を丸める度合い。

RadiusBottomRight – コントロールの右下隅を丸める度合い。

RadiusTopLeft – コントロールの左上隅を丸める度合い。

RadiusTopRight – コントロールの右上隅を丸める度合い。

Size – コントロールに表示されるテキストのフォント サイズ。

Strikethrough – コントロールに表示されるテキストに取り消し線を付けるかどうか。

TabIndex – 他のコントロールに関連するキーボード ナビゲーションの順序。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

Underline – コントロールに表示されるテキストの下に線を引くかどうか。

VerticalAlign – コントロールの垂直方向の中心に対するコントロール上でのテキストの位置。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

Navigate( ScreenName 、 ScreenTransitionValue )

例

ボタンに基本的な数式を追加する

  1. テキスト入力 コントロールを追加し、ソースという名前を付けます。

    コントロールの追加、名前付け、構成 についてはこちらをご覧ください。

  2. ボタン コントロールを追加し、Text プロパティを "追加" に設定し、その OnSelect プロパティをこの式に設定します:
    UpdateContext({合計:合計 + 値(Source.Text)})

    UpdateContext 関数または その他の関数 に関する詳細情報を希望しますか?

  3. ラベル コントロールを追加して、数式バーでその Text プロパティを 値 (合計) を設定してから F5 を押します。

  4. ソースから既定のテキストをクリアし、数値を入力してから、追加をクリックまたはタップします。

    ラベル コントロールには、入力した数値が表示されます。

  5. ソースから数値をクリアし、別の数値を入力してから、追加をクリックまたはタップします。

    ラベル コントロールには、入力した 2 つの数値の合計が表示されます。

  6. (オプション) 前の手順を何回も繰り返します。

  7. Esc キーを押して (または右上隅の閉じるアイコンをクリックまたはタップして)、既定のワークスペースに戻ります。

複数の数式を使用してボタンを構成する

エントリ間のテキスト入力コントロールをクリアする数式を追加します。

  1. ソースの HintText プロパティを "数字を入力" に設定します。

  2. 追加の OnSelect プロパティを次の数式に設定します:

    UpdateContext({合計:合計 + 値(Source.Text)});
    UpdateContext({ClearInput: ""})

    注意

    複数の数式はセミコロン “;“ で区切ります。

  3. ソースの Default プロパティを ClearInput に設定します。

  4. F5 キーを押してから、複数の数値を一緒に追加してアプリをテストします。

合計をリセットする別のボタンを追加する

計算間の合計をクリアする 2 番目のボタンを追加します。

  1. 別のボタン コントロールを追加し、Text プロパティを "クリア" に設定して、OnSelect プロパティを次の数式に設定します:

    UpdateContext({Total:0})

  2. F5 キーを押し、複数の数値を一緒に追加してから、クリアをクリックまたはタップして合計をリセットします。

ボタンの外観を変更する

ボタンの図形を変更する

既定では、Power Apps では、角の丸い四角形のボタン コントロールが作成されます。 Height、Width、Radius の各プロパティを設定することにより、ボタン コントロールの図形に基本的な変更を加えることができます。

注意

アイコンと図形 にはさまざまなデザインが用意されており、ボタン コントロールで実行できるのと同じ基本的な機能のいくつかを実行できます。 ただし、アイコンと図形 には テキスト プロパティはありません。

  1. ボタン コントロールを追加し、Height および Width プロパティを 300 に設定して、大きな正方形のボタンを作成します。

  2. RadiusTopLeft、RadiusTopRight、RadiusBottomLeft、RadiusBottomRight の各プロパティを変更して、四隅の曲率の量を調整します。 異なるいくつかの図形の例を次に示します。それぞれ 300 x 300 の正方形のボタンを基にしています:

カーソルを置いたときのボタンの色を変更する

既定では、ボタン コントロールの塗りつぶしの色は、マウスでカーソルを置くと 20% 暗くなります。 HoverFill プロパティを変更することで、この動作を調節できます。そのためには ColorFade 関数を使用します。 ColorFade 数式を正の比率に設定すると、ボタンにカーソルを置いたときの色が薄くなります。一方、負の比率に設定すると色が濃くなります。

  • 作成したいずれかのボタンの HoverFill プロパティで ColorFade の比率を変更し、その効果を確認します。

HoverFill プロパティを、ColorFade 関数の代わりに、ColorValue 関数を含む数式 ColorValue("Red") などに設定してボタン コントロールの色を指定することもできます。

注意

色の値は、名前か 16 進値のいずれかの CSS 色定義で指定できます。

  • 作成したいずれかのボタンで、ColorFade 関数を ColorValue 関数に置き換え、効果を確認します。

アクセシビリティ ガイドライン

色のコントラスト

スクリーン リーダー サポート

  • Text を指定する必要があります。

キーボードのサポート

  • TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。
  • フォーカス インジケーターは明確に表示する必要があります。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。