Přidání a konfigurace ovládacího prvku v PowerAppsAdd and configure a control in PowerApps

Přidejte si do aplikace různé prvky uživatelského rozhraní a nakonfigurujte aspekty jejich vzhledu a chování přímo, z panelu nástrojů, na kartě Vlastnosti nebo na řádku vzorců.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. Tyto prvky uživatelského rozhraní se označují jako ovládací prvky a jejich aspekty, které nakonfigurujete, jako vlastnosti.These UI elements are called controls, and the aspects that you configure are called properties.

PožadavkyPrerequisites

  1. Zaregistrujte se do služby PowerApps, nainstalujte ji, otevřete ji a pak se přihlaste zadáním stejných údajů, které jste použili k registraci.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.

  2. V PowerApps Studiu v nabídce Soubor (u levého okraje) klikněte nebo klepněte na Nový.In PowerApps Studio, click or tap New on the File menu (near the left edge).

    Možnost Nový v nabídce Soubor

  3. Na dlaždici Prázdná aplikace klikněte nebo klepněte na Rozložení pro telefon.On the Blank app tile, click or tap Phone layout.

    Vytvoření zcela nové aplikace

  4. Pokud se zobrazí výzva ke spuštění úvodní prohlídky, klikněte nebo klepněte na Další a seznamte se s hlavními částmi rozhraní PowerApps (případně klikněte nebo klepněte na Přeskočit).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).

    Úvodní obrazovka prohlídky

    Prohlídku si můžete pustit i kdykoli později tak, že kliknete nebo klepnete na ikonu otazníku v pravém horním rohu a pak na možnost Vydat se na úvodní prohlídku.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.

Přidání ovládacího prvkuAdd a control

Můžete přidat libovolný ovládací prvek z nejrůznějších kategorií tak, že kliknete nebo klepnete na panelu nástrojů na kartu Vložit, pak na kategorii a potom na požadovaný ovládací prvek.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. V této části si projděte ovládací prvky v jednotlivých kategoriích, abyste věděli, jaké typy ovládacích prvků můžete přidat a kde je můžete najít.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.

Na kartě Vložit klikněte nebo klepněte na kteroukoli z těchto kategorií a pak klikněte nebo klepněte na ovládací prvek, který chcete přidat:On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

Text: Popisek, Textové zadání, Text HTML, Psaní peremText: Label, Text input, HTML Text, Pen input
Ovládací prvky: Tlačítko, Rozevírací seznam, Výběr data, Seznam, Zaškrtněte políčko, Přepínač, Přepínací tlačítko, Posuvník, Hodnocení, ČasovačControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
Galerie: Svisle, Vodorovně, Proměnlivá výška, Prázdná svislá, Prázdná vodorovná, Prázdná s proměnlivou výškouGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
Tabulka datData table
Formuláře: Upravit, Zobrazení, Formulář entityForms: Edit, Display, Entity form
Média: Obrázek, Fotoaparát, Čárový kód, Video, Zvuk, Mikrofon, Přidat obrázekMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
Grafy: Sloupcový graf, Spojnicový graf, Výsečový grafCharts: Column chart, Line chart, Pie chart
IkonyIcons

Tip

Pokud potřebujete pro ovládací prvky více místa, přidejte další obrazovku.If you need more space for controls, add another screen.

Konfigurace ovládacího prvku přímoConfigure a control directly

V této části kurzu přidáte a nakonfigurujete ovládací prvek Popisek. Použité principy pak můžete z velké části uplatnit i na další ovládací prvky.In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. Klikněte nebo klepněte na kartu Vložit a potom na Popisek.Click or tap the Insert tab, and then click or tap Label.

    Karta Vložit

    Ovládací prvek, který přidáte, bude standardně vybraný.When you add a control, it's selected by default. Můžete ale vybrat některý existující ovládací prvek tím, že na něj kliknete nebo klepnete.You can also select an existing control by clicking or tapping it. Když je vybrán nějaký ovládací prvek, zobrazí se kolem něj oblast výběru a změní se některé oblasti uživatelského rozhraní, které umožňují tento ovládací prvek nakonfigurovat.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. Například vybraný ovládací prvek Popisek může vypadat takto:For example, a selected Label control resembles this graphic.

    Vybraný popisek

    Důležité

    Pokud ve chvíli, kdy máte vybraný nějaký ovládací prvek, vyberete jiný ovládací prvek nebo prázdnou oblast na obrazovce, předchozí prvek vybraný nezůstane.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. Zmenšete šířku ovládacího prvku Popisek tak, že přetáhnete úchyt na pravém okraji oblasti výběru směrem doleva.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (Prostřední úchyt se zobrazí jenom v případě, že přiblížíte zobrazení.)(The middle handle appears only if you zoom in.)

    Zúžený popisek

    Velikost ovládacího prvku můžete změnit také tak, že změníte jeho výšku, šířku, nebo obojí, jak je popsáno níže v tomto tématu.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Ovládací prvek Popisek můžete také celý přesunout – buď přetažením oblasti výběru, nebo tak, že změníte vlastnost X, Y, nebo obě dvě, jak je to popsáno níže v tomto tématu.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. Klikněte třikrát na text v ovládacím prvku Popisek a potom zadejte text Hello, world.Triple-click the text that appears in the Label control, and then type Hello, world.

    Popisek s vlastním textem

    Tento text můžete upravit také nastavením jeho vlastnosti Text, jak je to popsáno níže v tomto tématu.You can also modify this text by setting the Text property of this control, as this topic describes later.

Konfigurace ovládacího prvku z panelu nástrojůConfigure a control from the toolbar

Při konfiguraci ovládacího prvku z panelu nástrojů můžete změnit více vlastností, než když ho konfigurujete přímo.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Zkontrolujte, že máte vybraný ovládací prvek Popisek, a klikněte nebo klepněte na panelu nástrojů na kartu Domů.With the Label control selected, click or tap the Home tab of the toolbar.

    Karta Domů

  2. Klikněte nebo klepněte na Vyplnit a potom na barvu, například na akvamarínovou.Click or tap Fill, and then click or tap a color such as aquamarine.

    Možnost Vyplnit

    Změna se odrazí na ovládacím prvku Popisek.The Label control reflects your selection.

    Popisek s akvamarínovou výplní

  3. Změňte rodinu písem a velikost textu (například na 18 bodů,Change the font family and the size of the text (for example, to 18 pt. Georgia).Georgia).

    Ovládací prvky písma

    Změna se odrazí na ovládacím prvku Popisek.The Label control reflects your selection.

    18 bodů, Georgia

  4. Klikněte nebo klepněte na kartu Popisek, potom na Svislé zarovnání a pak na Nahoře.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Karta textového pole

    Změna se odrazí na ovládacím prvku Popisek.The Label control reflects your selection.

    Popisek s textem zarovnaným k hornímu okraji pole

Konfigurace ovládacího prvku na kartě VlastnostiConfigure a control from the Properties tab

Pomocí karty Vlastnosti můžete nakonfigurovat ovládací prvek, aniž byste museli psát vzorec.By using the Properties tab, you can configure a control without writing a formula. V této části kurzu přidáte a nakonfigurujete další ovládací prvek Popisek. Použité principy pak můžete z velké části uplatnit i na další ovládací prvky.In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. Podle postupu, který je popsaný výše v tomto tématu, přidejte další ovládací prvek Popisek.Add another Label control as described earlier in this topic.

  2. Zkontrolujte, že je nový ovládací prvek vybraný, a v pravém podokně klikněte nebo klepněte na kartu Vlastnosti.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Panel Vlastnosti

  3. Do pole Text zadejte karta Vlastnosti.In the Text box, type Properties tab.

    Text popisku panelu Vlastnosti

    Ovládací prvek Popisek zobrazí zadaný text.The Label control shows the entered text.

    Text plátna panelu Vlastnosti

  4. Na panelu Vlastnosti klikněte nebo klepněte na ikonu Vyplnit a potom klikněte nebo klepněte na nějakou barvu.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Text barvy panelu Vlastnosti

    Změna se odrazí na ovládacím prvku Popisek.The Label control reflects your selection.

    Barva plátna panelu Vlastnosti

  5. Klikněte nebo klepněte na vlastnost Color (Barva) na panelu Vlastnosti.Click or tap the Color property in the properties panel.

    Vlastnost panelu Vlastnosti

    Na řádku vzorců se zvýrazní hodnota vlastnosti Barva.The value of the Color property is highlighted in the formula bar.

    Výraz vlastnosti panelu Vlastnosti

  6. Odstraňte druhý ovládací prvek Popisek tak, že na něj kliknete nebo klepnete a potom stisknete Odstranit.Delete the second Label control by clicking or tapping it and then pressing Delete.

Konfigurace ovládacího prvku na řádku vzorcůConfigure a control in the formula bar

Pomocí řádku vzorců můžete nastavit vlastnosti, které nelze nastavit přímo, na kartě Vlastnosti ani na panelu nástrojů.By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. Můžete například nastavit popis ovládacího prvku, který se uživateli zobrazí, když na něj umístí ukazatel, ale neklikne nebo neklepne na něj.For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. Můžete zadávat libovolně složité vzorce, a vytvářet tak sofistikované aplikace.You can also specify complicated formulas that increase the power of your app.

Každá změna, kterou jste v předchozích krocích provedli, ovlivnila hodnotu vlastnosti konfigurovaného ovládacího prvku.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Při změně velikosti ovládacího prvku jste změnili jeho vlastnost Width (Šířka).When you resized the control, you changed its Width property.
  • Při změně umístění jste změnili jeho vlastnosti X a Y.When you moved the control, you changed its X and Y properties.
  • Při změně textu, který ovládací prvek zobrazuje, jste změnili jeho vlastnost Text.When you changed the text that the control displays, you changed its Text property.

Kromě konfigurace ovládacího prvku přímo, na kartě Vlastnosti a na panelu nástrojů můžete hodnotu vlastnosti aktualizovat také tak, že ji vyberete v seznamu vlastností a pak zadáte hodnotu na řádek vzorců.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. Při použití tohoto postupu můžete vlastnost vyhledat abecedně a můžete určit více typů hodnot.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Vyberte ponechaný ovládací prvek Popisek, v seznamu vlastností klikněte nebo klepněte na Text a pak na řádek vzorců zadejte "My Company Name" (včetně uvozovek).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.

    Řetězcový literál v popisku

    Když řetězec uzavřete do uvozovek, určíte tím, že se má použít přesně v zadaném tvaru.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Případně můžete hodnotu vlastnosti zadat ve vzorci.As an alternative, you can set the value of a property to a formula.

  2. Vyberte ovládací prvek Popisek, v seznamu vlastností klikněte nebo klepněte na Text a pak na řádek vzorců zadejte Dnes() (bez uvozovek).With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    Ovládací prvek zobrazuje aktuální datum.The control shows the current date.

    Funkce Dnes

    Tip

    Můžete definovat různé formáty data a času a provádět s nimi výpočty.You can format dates and times in various ways, in addition to performing calculations on them.

Konfigurace dvou ovládacích prvků a jejich vzájemná interakceConfigure two controls to interact with each other

V této části kurzu přidáte zaškrtávací políčko a nakonfigurujete, aby se popisek, který už máte vytvořený, zobrazoval jenom v případě, že je políčko zaškrtnuté.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. Klikněte nebo klepněte na kartu Vložit.Click or tap the Insert tab.

    Karta Vložit

  2. Klikněte nebo klepněte na Ovládací prvky a potom na Zaškrtávací políčko.Click or tap Controls, and then click or tap Check box.

    Vložení zaškrtávacího políčka

  3. Ovládací prvek Zaškrtávací políčko umístěte pod ovládací prvek Popisek a pro vlastnost Text ovládacího prvku Zaškrtávací políčko zadejte 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.

    Konfigurace zaškrtávacího políčka

  4. Nechte ovládací prvek Zaškrtávací políčko stále vybraný, klikněte nebo klepněte na jeho název přímo nad kartou Vlastnosti a zadejte MyCheckbox (Moje zaškrtávací políčko).With the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Přejmenování zaškrtávacího políčka

  5. Kliknutím nebo klepnutím vyberte ovládací prvek Popisek.Click or tap the Label control to select it.

  6. Na kartě Vlastnosti klikněte nebo klepněte na vlastnost Visible (Viditelný).On the Properties tab, click or tap the Visible property.

    Vlastnost Visible

  7. Na řádku vzorců smažte text true a zadejte nebo vložte tento vzorec:In the formula bar, delete true, and then type or paste this formula:

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

    Funkce Když označuje, že by se měl popisek zobrazovat pouze v případě, že je políčko zaškrtnuté.This If function states that the label should appear only when the check box is selected. Protože políčko zaškrtnuté není, ovládací prvek Popisek se skryje (zobrazuje se pouze oblast výběru).Because the check box is cleared, the Label control disappears (except for the selection box).

    Vzorec pro vlastnost Visible

  8. Klikněte nebo klepněte na ovládací prvek Zaškrtávací políčko, aby se kolem něj zobrazila oblast výběru, a dalším kliknutím nebo klepnutím na něj přidejte značku zaškrtnutí.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.

    Popisek se znovu zobrazí:The Label reappears:

    Popisek se zobrazuje, když je políčko zaškrtnuté

  9. Zrušte zaškrtnutí ovládacího prvku Zaškrtávací políčko, aby se ovládací prvek Popisek skryl.Clear the Check box control to hide the Label control.

    Při zrušení zaškrtnutí políčka popisek zmizí

Toto je pouze základní příklad. Chování a vzhled aplikace můžete nakonfigurovat vytvořením jednoho nebo více vzorců, které mohou být jednoduché nebo i složité.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.

Přejmenování obrazovky nebo ovládacího prvkuRename a screen or a control

Obrazovky a ovládací prvky si můžete přejmenovat – snadněji se tak vyznáte ve vzorcích a zjednodušíte si jejich správu.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Klikněte nebo klepněte na obrazovku nebo ovládací prvek, který chcete přejmenovat.Click or tap the screen or the control that you want to rename.

  2. V pravém podokně klikněte nebo klepněte na název ovládacího prvku (přímo nad kartou Vlastnosti) a pak zadejte požadovaný název.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.

    Přejmenování zaškrtávacího políčka

Vyhledání a výběr obrazovky nebo ovládacího prvkuFind and select a screen or a control

Obrazovku nebo ovládací prvek můžete vyhledat a vybrat, i když je skrytá nebo překrytá jiným ovládacím prvkem, pomocí vyhledávání v levém podokně.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. V tomto podokně se zobrazují buď miniatury všech obrazovek v aplikaci, nebo hierarchické zobrazení jednotlivých obrazovek a ovládacích prvků, které obsahují.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.

  • Pokud chcete přepnout mezi miniaturami a hierarchickým zobrazením, klikněte nebo klepněte na ikonu v pravém horním rohu podokna.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Přepnutí zobrazení

  • Pokud chcete vyhledat nějaký ovládací prvek, zadejte jeden nebo více znaků z jeho názvu. Zvýrazní se názvy ovládacích prvků, které zadaný text obsahují.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    Pokud kliknete nebo klepnete na některý výsledek hledání, vyberete tento ovládací prvek v aplikaci.If you click or tap a search result, you select that control in the app.

    Hledání ve stromovém zobrazení

  • Pokud chcete přesunout, duplikovat, odstranit nebo přejmenovat obrazovku, klikněte na ni pravým tlačítkem (případně klikněte nebo klepněte na tři tečky vedle ní) a potom klikněte nebo klepněte na požadovanou možnost.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.

    Místní nabídka stromového zobrazení

  • Pokud chcete zkopírovat a vložit, odstranit nebo přejmenovat nějaký ovládací prvek, klikněte na něj pravým tlačítkem (případně klikněte nebo klepněte na tři tečky vedle něj) a potom klikněte nebo klepněte na požadovanou možnost.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.