PowerApps のボタン コントロールButton control in PowerApps

クリックまたはタップするとアプリを操作できるコントロールです。A control that the user can click or tap to interact with the app.

説明Description

ユーザーがボタン コントロールをクリックまたはタップしたときに 1 つ以上の数式を実行するように、このコントロールの OnSelect プロパティを構成します。Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

主要なプロパティKey properties

OnSelect – ユーザーがコントロールをタップまたはクリックした場合のアプリの反応を指定します。OnSelect – How the app responds when the user taps or clicks a control.

Text – コントロールに表示されるテキスト、またはコントロールにユーザーが入力するテキストです。Text – Text that appears on a control or that the user types into a control.

その他のプロパティAdditional properties

Align – コントロールの水平方向の中心に対するテキストの位置です。Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelectOnSelect の動作の実行時にコントロールを自動で無効化します。AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – コントロールの境界線の色です。BorderColor – The color of a control's border.

BorderStyle – コントロールの境界線を Solid (実線)、Dashed (破線)、Dotted (点線)、None (なし) のいずれに指定します。BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – コントロールの境界線の太さです。BorderThickness – The thickness of a control's border.

FocusedBorderThickness – キーボードでフォーカスした場合のコントロールの境界線の太さです。FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color – コントロールのテキストの色です。Color – The color of text in a control.

DisplayMode – コントロールで、ユーザー入力を許可するか (Edit)、データの表示のみを許可するか (View)、許可しないか (Disabled) を設定します。DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロールの境界線の色です。DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロール内のテキストの色です。DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロールの背景色です。DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – コントロールの背景色です。Fill – The background color of a control.

Font – テキストを表記するフォントのファミリー名です。Font – The name of the family of fonts in which text appears.

FontWeight – コントロール内のテキストの太さです。Bold (太字)、Semibold (中太)、Normal (標準)、Lighter (細字) から指定します。FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – コントロールの上端と下端の距離です。Height – The distance between a control's top and bottom edges.

HoverBorderColor – コントロール上にユーザーがマウス ポインターを重ねているときのコントロールの境界線の色です。HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – コントロールにユーザーがマウス ポインターを重ねているときのコントロール内のテキストの色です。HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – コントロールにユーザーがマウス ポインターを重ねているときのコントロールの背景色です。HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – コントロール内のテキストを斜体にするかどうかを指定します。Italic – Whether the text in a control is italic.

PaddingBottom – コントロール内のテキストとそのコントロールの下端間の距離です。PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – コントロール内のテキストとそのコントロールの左端間の距離です。PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – コントロール内のテキストとそのコントロールの右端間の距離です。PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – コントロール内のテキストとそのコントロールの上端間の距離です。PaddingTop – The distance between text in a control and the top edge of that control.

Pressed – コントロールが押されている間は true 、それ以外の時は false になります。PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – コントロールをユーザーがタップまたはクリックしたときのコントロールの境界線の色です。PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – コントロールをユーザーがタップまたはクリックしたときのコントロール内のテキストの色です。PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – コントロールをユーザーがタップまたはクリックしたときのコントロールの背景色です。PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – コントロールの左下隅を丸める度合いです。RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – コントロールの右下隅を丸める度合いです。RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – コントロールの左上隅を丸める度合いです。RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – コントロールの右上隅を丸める度合いです。RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – コントロールに表示されるテキストのフォント サイズです。Size – The font size of the text that appears on a control.

Strikethrough – コントロールに表示されるテキストに取り消し線を付けるかどうかを指定します。Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – ゼロ以外の値に設定すると、実行時のコントロールのタブの順序をカスタマイズできます。TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip – ポインターをコントロールに合わせたときに表示される説明テキストです。Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – コントロールに表示されるテキストの下に線を引くかどうかを指定します。Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – コントロールの垂直方向の中心に対するコントロール上でのテキストの位置です。VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – コントロールを表示するか非表示にするかを指定します。Visible – Whether a control appears or is hidden.

Width – コントロールの左端と右端の間の距離です。Width – The distance between a control's left and right edges.

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離です。X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離です。Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenNameScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

Examples

ボタンに基本的な数式を追加するAdd a basic formula to a button

  1. テキスト入力 コントロールを追加し、 Source という名前を付けます。Add a Text input control, and name it Source.

    コントロールの追加、命名、構成についてはこちらをご覧くださいDon't know how to add, name, and configure a control?

  2. ボタン コントロールを追加し、Text プロパティを "Add" に設定して、OnSelect プロパティを次の式に設定します。Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    UpdateContext 関数やその他の関数については各関連記事を参照してください。Want more information about the UpdateContext function or other functions?

  3. ラベル コントロールを追加し、Text プロパティを Total に設定して、F5 キーを押します。Add a Label control, set its Text property to Total, and then press F5.
  4. "Source" から既定のテキストを消去し、数値を入力して、"Add" をクリックまたはタップします。Clear the default text from Source, type a number in it, and then click or tap Add.

    ラベル コントロールに、入力した数値が表示されます。The Label control shows the number that you typed.

  5. "Source" から数値を消去し、別の数値を入力して、"Add" をクリックまたはタップします。Clear the number from Source, type another number in it, and then click or tap Add.

    ラベル コントロールに、入力した 2 つの数値の合計が表示されます。The Label control shows the sum of the two numbers that you typed.

  6. (省略可) 前のステップを 1 回以上繰り返します。(optional) Repeat the previous step one or more times.
  7. Esc キーを押して (または、右上隅の閉じるアイコンをクリックまたはタップして)、既定のワークスペースに戻ります。To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

複数の数式を使用してボタンを構成するConfigure a button with multiple formulas

入力と入力の間にテキスト入力コントロールをクリアする数式を追加します。Add a formula that clears the Text input control between entries.

  1. "Source" の HintText プロパティを "Enter a number" に設定します。Set the HintText property of Source to "Enter a number".
  2. "Add" の OnSelect プロパティを次の数式に設定します。Set the OnSelect property of Add to this formula:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})
    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    注: 複数の数式はセミコロン ";" で区切ります。Note: Separate multiple formulas with a semi-colon “;”.

  3. "Source" の Default プロパティを ClearInput に設定します。Set the Default property of Source to ClearInput.
  4. F5 キーを押し、複数の数値を一緒に追加してアプリをテストします。Press F5, and then test the app by adding several numbers together.

合計をリセットするもう 1 つのボタンを追加するAdd another button to reset the total

計算と計算の間に合計をクリアする 2 番目のボタンを追加します。Add a second button to clear the total between calculations.

  1. もう 1 つのボタン コントロールを追加し、Text プロパティを "Clear" に設定して、OnSelect プロパティを次の数式に設定します。Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. F5 キーを押し、複数の数値を一緒に追加して、[クリア] をクリックまたはタップして合計をクリアします。Press F5, add several numbers together, and then click or tap Clear to reset the total.

ボタンの外観を変更するChange a button's appearance

ボタンの形を変更するChange a button's shape

PowerApps の既定では、角の丸い四角形のボタン コントロールが作成されます。By default, PowerApps creates a rectangular Button control with rounded corners. ボタン コントロールの形に基本的な変更を加えることができます。そのためには、HeightWidthRadius の各プロパティを変更します。You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

注: アイコンとシェイプ には、さまざまなデザインが用意されていて、 ボタン コントロールで実行できるのと同じ基本的な機能のいくつかを実行できます。Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. ただし、 アイコンとシェイプText プロパティはありません。However, Icons and Shapes don’t have a Text property.

  1. ボタン コントロールを追加し、Height プロパティと Width プロパティを 300 に設定して、大きな正方形のボタンを作成します。Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. RadiusTopLeftRadiusTopRightRadiusBottomLeftRadiusBottomRight の各プロパティを変更して、四隅の曲率の量を調整します。Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. 異なるいくつかのシェイプの例を次に示します。それぞれ 300 x 300 の正方形のボタンを基にしています。Here are some examples of different shapes, each one starting from a 300 x 300 square button:

ホバーしたときのボタンの色を変更するChange a button's color when you hover over it

既定では、ボタン コントロールにマウスでホバーすると、塗りつぶしの色が 20% だけ暗くなります。By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. HoverFill プロパティを変更することで、この動作を変更できます。そのためには ColorFade 関数を使用します。You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. ColorFade の数式を正の比率に設定すると、ボタンにホバーしたときの色が薄くなります。一方、負の比率を設定すると、色が濃くなります。If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • 作成したいずれかのボタンの HoverFill プロパティで ColorFade の比率を変更し、その効果を確認します。Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

ボタン コントロールの色を指定する別の方法として、HoverFill プロパティを、 ColorFade 関数ではなく ColorValue 関数を含む数式 ColorValue("Red") など に変更する方法もあります。You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

注: 色の値は、任意の CSS 色定義とすることができ、名前または 16 進値のどちらでもかまいません。Note: The color value can be any CSS color definition, either a name or a hex value.

  • 作成したいずれかのボタンで、ColorFade 関数を ColorValue 関数に置き換え、効果を確認します。Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.