PowerApps でコントロールを追加および構成するAdd and configure a control in PowerApps

アプリへのさまざまな UI 要素の追加や、要素の外観と動作の構成を、ツールバー、[プロパティ] タブ、数式バーなどから直接行います。Add a variety of UI elements to your app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. これらの UI 要素はコントロールと呼ばれ、構成する内容はプロパティと呼ばれます。These UI elements are called controls, and the aspects that you configure are called properties.

前提条件Prerequisites

  1. PowerApps にサインアップし、インストールして開きます。その後、サインアップに使用したのと同じ資格情報を入力してサインインします。Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.

  2. PowerApps Studio の [File (ファイル)] メニュー (画面左側) の [New (新規)] をクリックまたはタップします。In PowerApps Studio, click or tap New on the File menu (near the left edge).

    [File (ファイル)] メニューの [New (新規)] オプション

  3. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。On the Blank app tile, click or tap Phone layout.

    アプリを最初から作成する

  4. クイック ツアーの開始を求められたら、[Next (次へ)] をクリックまたはタップし、PowerApps インターフェイスの基本事項について確認します (または、[Skip (スキップ)] をクリックまたはタップします)。If you're prompted to take the intro tour, click or tap Next to get familiar with key areas of the PowerApps interface (or click or tap Skip).

    クイック ツアーの最初の画面

    クイック ツアーは後からいつでも開始できます。右上隅の疑問符アイコンをクリックまたはタップし、[Take the intro tour (クイック ツアーの開始)] をクリックまたはタップしてください。You can always take the tour later by clicking or tapping the question-mark icon near the upper-right corner and then clicking or tapping Take the intro tour.

コントロールを追加するAdd a control

ツールバーの [Insert (挿入)] タブをクリックまたはタップし、カテゴリをクリックまたはタップし、目的のコントロールをクリックまたはタップすることにより、さまざまなカテゴリにコントロールを追加できます。You can add any control in a variety of categories by clicking or tapping the Insert tab of the toolbar, clicking or tapping a category, and then clicking or tapping the control that you want. ここでは、追加できるコントロールの種類と、コントロールの種類ごとの場所を理解するために、各カテゴリのコントロールを確認します。In this section, review the controls in each category to get familiar with the types of controls that you can add and where you might find each type.

[挿入] タブで、これらのカテゴリのいずれかをクリックまたはタップした後、追加するコントロールをクリックまたはタップします。On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

テキスト: ラベル、テキスト入力、HTML テキスト、ペン入力Text: Label, Text input, HTML Text, Pen input
コントロール: ボタン、ドロップ ダウン、日付の選択、リスト ボックス、チェック ボックス、ラジオ、トグル、スライダー、評価、タイマーControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
ギャラリー: 縦、横、高さ (伸縮可能)、縦方向 (空)、横方向 (空)、高さ (伸縮可能、空)Gallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
データ テーブルData table
フォーム: 編集、表示、エンティティ フォームForms: Edit, Display, Entity form
メディア: 画像、カメラ、バーコード、ビデオ、オーディオ、マイク、画像の追加Media: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
グラフ: 縦棒グラフ、折れ線グラフ、円グラフCharts: Column chart, Line chart, Pie chart
[Icons (アイコン)]Icons

ヒント

コントロールのためにより多くの領域が必要な場合、別の画面を追加します。If you need more space for controls, add another screen.

コントロールを直接、構成するConfigure a control directly

この手順では、ラベル コントロールを追加および構成しますが、同じ原則の多くを他のコントロールに応用できます。In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. [挿入] タブをクリックまたはタップし、[ラベル] をクリックまたはタップします。Click or tap the Insert tab, and then click or tap Label.

    [Insert (挿入)] タブ

    コントロールを追加するときに、既定で選択されます。When you add a control, it's selected by default. クリックまたはタップすることによって、既存のコントロールを選択することもできます。You can also select an existing control by clicking or tapping it. コントロールを選択すると、そのコントロールは選択ボックスで囲まれ、選択したコントロールを構成できるよう、UI の他の領域が変化します。When a control is selected, a selection box surrounds it, and other areas of the UI change so that you can configure the selected control. たとえば、ラベル コントロールを選択すると、このようになります。For example, a selected Label control resembles this graphic.

    選択されたラベル

    重要

    別のコントロールまたは画面の空の領域を選択している状態でコントロールを選択すると、最初の要素は選択解除されます。If a control is selected when you select another control or a blank area of the screen, the first element is no longer selected.

  2. ラベル コントロールの幅を狭くするには、選択ボックスの右端にあるハンドルを左にドラッグします Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (中央のハンドルは、表示を拡大する場合にのみ表示されます)。(The middle handle appears only if you zoom in.)

    サイズが変更されたラベル

    後で説明するように、コントロールの [Height (高さ)][Width (幅)]、または両方のプロパティを変更してサイズを変更することもできます。You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. ラベル コントロールを移動するには、選択ボックス自体をドラッグします (または、後で説明するように、[X][Y]、または両方のプロパティを変更します)。Move the Label control by dragging the selection box itself (or by modifying the X, Y, or both properties, as this topic describes later).

  4. ラベル コントロールに表示されるテキストをトリプル クリックして「Hello, world」と入力します。Triple-click the text that appears in the Label control, and then type Hello, world.

    カスタムのテキストが入力されたラベル

    後で説明するように、このコントロールの [Text (テキスト)] プロパティを設定してこのテキストを変更することもできます。You can also modify this text by setting the Text property of this control, as this topic describes later.

ツールバーからコントロールを構成するConfigure a control from the toolbar

ツールバーからコントロールを構成することにより、コントロールを直接構成する場合よりも幅広いオプションを指定できます。By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. ラベル コントロールを選択した状態で、ツールバーの [ホーム] タブをクリックまたはタップします。With the Label control selected, click or tap the Home tab of the toolbar.

    [Home (ホーム)] タブ

  2. [Fill (塗りつぶし)] をクリックまたはタップし、アクアマリンなどの色をクリックまたはタップします。Click or tap Fill, and then click or tap a color such as aquamarine.

    [Fill (塗りつぶし)] オプション

    ラベル コントロールに選択が反映されます。The Label control reflects your selection.

    アクアマリンに塗りつぶされたラベル

  3. フォント ファミリとテキストのサイズを変更します (たとえば、18 ポイントの Change the font family and the size of the text (for example, to 18 pt. Georgia に)。Georgia).

    フォント コントロール

    ラベル コントロールに選択が反映されます。The Label control reflects your selection.

    18 ポイント Georgia

  4. [ラベル] タブをクリックまたはタップし、[VerticalAlign] をクリックまたはタップし、[上] をクリックまたはタップします。Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    [Text box (テキスト ボックス)] タブ

    ラベル コントロールに選択が反映されます。The Label control reflects your selection.

    テキストをボックスの上端に揃えたラベル

[プロパティ] タブでコントロールを構成するConfigure a control from the Properties tab

[プロパティ] タブを使用して、数式を記述することなくコントロールを構成できます。By using the Properties tab, you can configure a control without writing a formula. この手順では、もう 1 つのラベル コントロールを追加および構成しますが、同じ原則の多くを他のコントロールに応用できます。In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. このトピックで前述したように、もう 1 つのラベル コントロールを追加します。Add another Label control as described earlier in this topic.

  2. 新しいコントロールを選択して、右側のウィンドウにある [プロパティ] タブをクリックまたはタップします。With the new control selected, click or tap the Properties tab in the right-hand pane.

    [プロパティ] パネル

  3. [テキスト] ボックスに「Properties tab」と入力します。In the Text box, type Properties tab.

    [プロパティ] パネルのラベル テキスト

    入力したテキストがラベル コントロールに表示されます。The Label control shows the entered text.

    [プロパティ] パネルのキャンバス テキスト

  4. [プロパティ] パネルの塗りつぶしアイコンをクリックまたはタップして、色をクリックまたはタップします。Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    [プロパティ] パネルの色テキスト

    ラベル コントロールに選択が反映されます。The Label control reflects your selection.

    [プロパティ] パネルのキャンバス色

  5. [プロパティ] パネルの Color プロパティをクリックまたはタップします。Click or tap the Color property in the properties panel.

    [プロパティ] パネルのプロパティ

    Color プロパティの値が数式バーで強調表示されます。The value of the Color property is highlighted in the formula bar.

    [プロパティ] パネルのプロパティ式

  6. コントロールをクリックまたはタップしてから [削除] を押し、2 つ目のラベル コントロールを削除します。Delete the second Label control by clicking or tapping it and then pressing Delete.

数式バーでコントロールを構成するConfigure a control in the formula bar

数式バーを使用すると、[プロパティ] タブまたはツールバーからは直接設定できないプロパティを設定できます。By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. たとえば、ユーザーがコントロールをクリックまたはタップせずポイントしたときに表示されるヒントを設定できます。For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. アプリの能力を高める複雑な式を指定することもできます。You can also specify complicated formulas that increase the power of your app.

これまでの説明の中で行った変更のたびに、構成したコントロールのプロパティの値が更新されています。Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • コントロールのサイズを変更したときは、コントロールの [Width (幅)] プロパティを変更しました。When you resized the control, you changed its Width property.
  • コントロールを移動したときは、コントロールの [X] および [Y] プロパティを変更しました。When you moved the control, you changed its X and Y properties.
  • コントロールに表示されるテキストを変更したときは、コントロールの [Text (テキスト)] プロパティを変更しました。When you changed the text that the control displays, you changed its Text property.

コントロールを [プロパティ] タブまたはツールバーで直接構成する代わりに、プロパティの一覧でプロパティを選択してから数式バーで値を指定すると、プロパティの値を更新できます。Instead of configuring a control directly, in the Properties tab, or from the toolbar, you can also update the value of a property by selecting it in the property list and then specifying a value in the formula bar. この方法により、プロパティをアルファベット順に検索したり、より多くの種類の値を指定したりできます。By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. 残りのラベル コントロールを選択して、プロパティ リストの [Text] をクリックまたはタップし、数式バーに「"My Company Name"」(引用符も含めます) と入力します。With the remaining Label control selected, click or tap Text in the property list, and then type "My Company Name" (including the quotation marks) in the formula bar.

    ラベル内のリテラル文字列

    テキストの文字列を引用符で囲むことで、入力したとおりに文字列が扱われる必要があることを指定します。When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. プロパティの値を数式に設定することもできます。As an alternative, you can set the value of a property to a formula.

  2. ラベル コントロールを選択した状態で、プロパティの一覧にある [Text] をクリックまたはタップし、数式バーに Today() と入力します (引用符なし)。With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    コントロールは、現在の日付を表示します。The control shows the current date.

    Today 関数

    ヒント

    日付と時刻を計算できるのに加え、さまざまな方法で日付と時刻を書式設定できます。You can format dates and times in various ways, in addition to performing calculations on them.

相互作用するように 2 つのコントロールを構成するConfigure two controls to interact with each other

この手順では、チェック ボックスを追加した後、チェック ボックスがオンのときにのみ表示されるように既存のラベルを構成します。In this procedure, you'll add a check box and then configure the label that you already have to appear only when the check box is selected.

  1. [Insert (挿入)] タブをクリックまたはタップします。Click or tap the Insert tab.

    [Insert (挿入)] タブ

  2. [Controls (コントロール)] をクリックまたはタップし、[Check box (チェック ボックス)] をクリックまたはタップします。Click or tap Controls, and then click or tap Check box.

    チェック ボックスを挿入する

  3. ラベル コントロールの下に表示されるようにチェック ボックス コントロールを移動し、チェック ボックス コントロールの [Text] プロパティを設定して、「Show text」と表示されるようにします。Move the Check box control so that it appears below the Label control, and set the Text property of the Check box control so that Show text appears.

    チェック ボックスを構成する

  4. 引き続きチェック ボックス コントロールを選択した状態で、[プロパティ] タブの真上にあるコントロール名をクリックまたはタップし、「MyCheckbox」と入力します。With the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    チェック ボックスの名前を変更する

  5. ラベル コントロールをクリックまたはタップして選択します。Click or tap the Label control to select it.

  6. [プロパティ] タブで、[Visible] プロパティをクリックまたはタップします。On the Properties tab, click or tap the Visible property.

    [Visible (表示する)] プロパティ

  7. 数式バーで、「true」を削除し、次の式を入力するか貼り付けます。In the formula bar, delete true, and then type or paste this formula:

    If(MyCheckbox.Value = true, true, false)If(MyCheckbox.Value = true, true, false)

    この If 関数は、チェック ボックスがオンのときにのみラベルが表示されることを指定します。This If function states that the label should appear only when the check box is selected. チェック ボックスをオフにしたので、ラベル コントロールは表示されなくなります (選択ボックスを除いて)。Because the check box is cleared, the Label control disappears (except for the selection box).

    [Visible (表示する)] の数式

  8. チェック ボックス コントロールをクリックまたはタップして選択ボックスをコントロールに追加し、コントロールをもう一度クリックまたはタップしてチェック マークを追加します。Click or tap the Check box control to add the selection box to it, and then click or tap it again to add a check mark.

    ラベルが再び表示されます。The Label reappears:

    チェック ボックスをオンにするとラベルが表示される

  9. ラベル コントロールを非表示にするには、チェック ボックス コントロールをオフにします。Clear the Check box control to hide the Label control.

    チェック ボックスをオフにするとラベルが非表示になる

この例は基本的なものですが、単純なものから複雑なものまで、1 つ以上の数式を構築することによってアプリの動作と外観を構成できます。This example is basic, but you can configure the behavior and appearance of your app by building one or more formulas from simple to complex.

画面またはコントロールの名前を変更するRename a screen or a control

画面またはコントロールの名前を変更することにより、読みやすく保守しやすい数式を構築できます。By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. 名前を変更する画面またはコントロールをクリックまたはタップします。Click or tap the screen or the control that you want to rename.

  2. 右側のウィンドウで ([プロパティ] タブの真上にある) コントロール名をクリックまたはタップし、好きな名前を入力します。In the right-hand pane, click or tap the name of the control (just above the Properties tab), and then type the name that you want.

    チェック ボックスの名前を変更する

画面またはコントロールを検索して選択するFind and select a screen or a control

画面またはコントロールが非表示である場合や別のコントロールと重複している場合でも、左側のペインで検索することにより、画面またはコントロールを検索して選択できます。You can find and select a screen or a control, even if it's hidden or overlaps with another control, by searching for it in the left-hand pane. このペインには、アプリの各画面のサムネイルまたは各画面の階層表示と、各画面に含まれるコントロールが表示されます。This pane shows either a thumbnail of each screen in the app or a hierarchical view of each screen and the controls that it contains.

  • サムネイルと階層表示を切り替えるには、ペインの右上隅にあるアイコンをクリックまたはタップします。To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    表示の切り替え

  • コントロールを検索するには、1 文字以上の文字を入力すると、入力したテキストを含むコントロール名が強調表示されます。To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    検索結果をクリックまたはタップすると、アプリ内でそのコントロールが選択されます。If you click or tap a search result, you select that control in the app.

    ツリー ビューでの検索

  • 画面の上下への移動、複製、削除、または名前変更を行うには、画面を右クリック (あるいは画面の横の省略記号をクリックまたはタップ) して、目的のオプションをクリックまたはタップします。To move a screen up or down, duplicate it, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.

    ツリー ビューのコンテキスト メニュー

  • コントロールのコピー/貼り付け、削除、または名前変更を行うには、コントロールを右クリック (あるいはコントロールの横の省略記号をクリックまたはタップ) して、目的のオプションをクリックまたはタップします。To copy/paste a control, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.