Pridanie a konfigurácia ovládacieho prvku plátnovej aplikácie v službe PowerAppsAdd and configure a canvas-app control in PowerApps

Pridajte si do plátnovej aplikácie rôzne prvky používateľského rozhrania a nakonfigurujte aspekty ich vzhľadu a správania priamo z panela s nástrojmi, na karte Vlastnosti alebo v riadku vzorcov.Add a variety of UI elements to your canvas app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. Tieto prvky používateľského rozhrania se označujú ako ovládacie prvky a ich aspekty, ktoré nakonfigurujete, ako vlastnosti.These UI elements are called controls, and the aspects that you configure are called properties.

PredpokladyPrerequisites

  1. Zaregistrujte sa do PowerApps a potom sa prihláste pomocou rovnakých poverení, ktoré ste použili pri registrácii.Sign up for PowerApps, and then sign in by providing the same credentials that you used to sign up.

  2. V aplikácii PowerApps Studio kliknite alebo ťuknite v ponuke Súbor (pri ľavom okraji) na možnosť Nový.In PowerApps Studio, click or tap New on the File menu (near the left edge).

    Možnosť Nový v ponuke Súbor

  3. Na dlaždici Prázdna aplikácia kliknite alebo ťuknite na položku Rozloženie pre telefón.On the Blank app tile, click or tap Phone layout.

    Vytvorenie aplikácie úplne od začiatku

  4. Ak sa zobrazí výzva na spustenie úvodnej prehliadky, kliknite alebo ťuknite na položku Ďalej a zoznámte sa s hlavnými časťami rozhrania PowerApps (prípadne kliknite alebo ťuknite na položku Vynechať).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).

    Prvá obrazovka úvodnej prehliadky

    Prehliadku môžete kedykoľvek neskôr spustiť tak, že kliknete alebo ťuknete na ikonu otáznika v pravom hornom rohu a potom na možnosť Vydať sa na úvodnú prehliadku.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.

Pridanie ovládacieho prvkuAdd a control

Môžete pridať ľubovoľný ovládací prvok z najrôznejších kategórií tak, že kliknete alebo ťuknete na paneli s nástrojmi na kartu Vložiť, potom na kategóriu a potom na požadovaný ovládací prvok.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 tejto časti si prejdite ovládacie prvky v jednotlivých kategóriách, aby ste vedeli, aké typy ovládacích prvkov môžete pridať a kde ich môžete nájsť.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 karte Vložiť kliknite alebo ťuknite na ktorúkoľvek z týchto kategórií a potom kliknite alebo ťuknite na ovládací prvok, ktorý chcete pridať:On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

Text: Označenie, Vstup textu, Text HTML, Vstup peromText: Label, Text input, HTML Text, Pen input
Ovládacie prvky: Tlačidlo, Rozbaľovacia ponuka, Výber dátumu, Zoznam, Začiarkavacie políčko, Prepínač, Jazdec, Hodnotenie, ČasovačControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
Galéria: Zvisle, Vodorovne, Flexibilné výška, Prázdna zvislá, Prázdna vodorovná, Prázdna s premenlivou výškouGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
Tabuľka údajovData table
Formuláre: Upraviť, Zobrazenie, Formulár entityForms: Edit, Display, Entity form
Médiá: Obrázok, Fotoaparát, Čiarový kód, Video, Zvuk, Mikrofón, Pridať obrázokMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
Grafy: Stĺpcový graf, Čiarový graf, Koláčový grafCharts: Column chart, Line chart, Pie chart
IkonyIcons

Tip

Ak potrebujete pre ovládacie prvky viac miesta, pridajte ďalšiu obrazovku.If you need more space for controls, add another screen.

Konfigurácia ovládacieho prvku priamoConfigure a control directly

V tejto časti kurzu pridáte a nakonfigurujete ovládací prvok Označenie. Použité princípy potom môžete z veľkej časti uplatniť aj na ďalšie ovládacie 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. Kliknite alebo ťuknite na kartu Vložiť a potom na Označenie.Click or tap the Insert tab, and then click or tap Label.

    Karta Vložiť

    Po pridaní bude ovládací prvok predvolene vybratý.When you add a control, it's selected by default. Môžete však vybrať niektorý existujúci ovládací prvok tým, že naňho kliknete alebo ťuknete.You can also select an existing control by clicking or tapping it. Keď je vybratý určitý ovládací prvok, zobrazí sa okolo neho pole výberu a zmenia sa niektoré oblasti používateľského rozhrania, ktoré umožňujú tento ovládací prvok nakonfigurovať.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. Vybratý ovládací prvok Označenie môže vyzerať napríklad takto.For example, a selected Label control resembles this graphic.

    Vybraté označenie

    Dôležité

    Ak vo chvíli, keď máte vybratý určitý ovládací prvok, vyberiete iný ovládací prvok alebo prázdnu oblasť na obrazovke, predchádzajúci prvok vybratý nezostane.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šite šírku ovládacieho prvku Označenie tak, že pretiahnete rukoväť na pravom okraji poľa výberu smerom doľava.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (Prostredná rukoväť sa zobrazí iba v prípade, že priblížite zobrazenie.)(The middle handle appears only if you zoom in.)

    Označenie so zmenenou veľkosťou

    Veľkosť ovládacieho prvku môžete tiež zmeniť tak, že zmeníte jeho výšku, šírku alebo oboje podľa popisu nižšie v tejto téme.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Ovládací prvok Označenie môžete tiež celý presunúť – buď pretiahnutím poľa výberu, alebo tak, že zmeníte vlastnosť X, Y alebo oboje, ako je to opísané nižšie v tejto téme.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. Kliknite trikrát na text v ovládacom prvku Označenie a potom zadajte text Hello, world.Triple-click the text that appears in the Label control, and then type Hello, world.

    Označenie s vlastným textom

    Tento text môžete tiež upraviť nastavením jeho vlastnosti Text, ako je to opísané nižšie v tejto téme.You can also modify this text by setting the Text property of this control, as this topic describes later.

Konfigurácia ovládacieho prvku z panela s nástrojmiConfigure a control from the toolbar

Pri konfigurácii ovládacieho prvku z panela s nástrojmi môžete zmeniť viacero vlastností, než keď ho konfigurujete priamo.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Skontrolujte, či máte vybratý ovládací prvok Označenie a kliknite alebo ťuknite na paneli s nástrojmi na kartu Domov.With the Label control selected, click or tap the Home tab of the toolbar.

    Karta Domov

  2. Kliknite alebo ťuknite na Vyplniť a potom na farbu (napríklad na akvamarínovú).Click or tap Fill, and then click or tap a color such as aquamarine.

    Možnosť výplne

    Zmena sa prejaví na ovládacom prvku Označenie.The Label control reflects your selection.

    Označenie s akvamarínovou výplňou

  3. Zmeňte skupinu písiem a veľkosť textu (napríklad na 18 bodov,Change the font family and the size of the text (for example, to 18 pt. Georgia).Georgia).

    Farby písma

    Zmena sa prejaví na ovládacom prvku Označenie.The Label control reflects your selection.

    Písmo Georgia s veľkosťou 18 bodov

  4. Kliknite alebo ťuknite na kartu Označenie, potom na Zvislé zarovnanie a potom na Hore.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Karta s textovým poľom

    Zmena sa prejaví na ovládacom prvku Označenie.The Label control reflects your selection.

    Označenie s textom zarovnaným na hornú časť poľa

Konfigurácia ovládacieho prvku na karte VlastnostiConfigure a control from the Properties tab

Pomocou karty Vlastnosti môžete nakonfigurovať ovládací prvok bez toho, aby ste museli písať vzorec.By using the Properties tab, you can configure a control without writing a formula. V tejto časti kurzu pridáte a nakonfigurujete ďalší ovládací prvok Označenie. Použité princípy potom môžete z veľkej časti uplatniť aj na ďalšie ovládacie 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. Pridajte ďalší ovládací prvok Označenie podľa postupu opísaného vyššie v tejto téme.Add another Label control as described earlier in this topic.

  2. Skontrolujte, či je nový ovládací prvok vybratý, a na pravej table kliknite alebo ťuknite na kartu Vlastnosti.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Panel Vlastnosti

  3. Do poľa Text zadajte karta Vlastnosti.In the Text box, type Properties tab.

    Text označenia panela Vlastnosti

    Ovládací prvok Označenie zobrazí zadaný text.The Label control shows the entered text.

    Text plátna na paneli Vlastnosti

  4. Na paneli Vlastnosti kliknite alebo ťuknite na ikonu Vyplniť a potom kliknite alebo ťuknite na nejakú farbu.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Text farby panela Vlastnosti

    Zmena sa prejaví na ovládacom prvku Označenie.The Label control reflects your selection.

    Farba plátna na paneli Vlastnosti

  5. Kliknite alebo ťuknite na vlastnosť Color (Farba) na paneli Vlastnosti.Click or tap the Color property in the properties panel.

    Panel vlastností

    V riadku vzorcov sa zvýrazní hodnota vlastnosti Farba na paneli Vlastnosti.The value of the Color property is highlighted in the formula bar.

    Výraz vlastnosti panela Vlastnosti

  6. Odstráňte druhý ovládací prvok Označenie tak, že naňho kliknete alebo ťuknete a potom stlačíte Odstrániť.Delete the second Label control by clicking or tapping it and then pressing Delete.

Konfigurácia ovládacieho prvku v riadku vzorcovConfigure a control in the formula bar

Pomocou riadka vzorcov môžete nastaviť vlastnosti, ktoré nie je možné nastaviť priamo na karte Vlastnosti ani na paneli s nástrojmi.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 napríklad nastaviť popis ovládacieho prvku, ktorý sa zobrazí používateľovi, keď naňho umiestni kurzor, ale neklikne naň ani neťukne.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 tiež zadávať ľubovoľne zložité vzorce a vytvárať tak sofistikované aplikácie.You can also specify complicated formulas that increase the power of your app.

Každá zmena, ktorú ste v predchádzajúcich krokoch vykonali, ovplyvnila hodnotu vlastnosti konfigurovaného ovládacieho prvku.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Pri zmene veľkosti ovládacieho prvku ste zmenili jeho vlastnosť Width (Šírka).When you resized the control, you changed its Width property.
  • Pri zmene umiestnenia ste zmenili jeho vlastnosti X a Y.When you moved the control, you changed its X and Y properties.
  • Pri zmene textu, ktorý ovládací prvok zobrazuje, ste zmenili jeho vlastnosť Text.When you changed the text that the control displays, you changed its Text property.

Okrem konfigurácie ovládacieho prvku priamo na karte Vlastnosti a na paneli nástrojov môžete hodnotu vlastnosti aktualizovať tiež tak, že ju vyberiete v zozname vlastností a potom zadáte hodnotu na riadku vzorcov.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. Pri použití tohto postupu môžete vlastnosť vyhľadať abecedne a môžete určiť viac typov hodnôt.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Vyberte ponechaný ovládací prvok Označenie, v zozname vlastností kliknite alebo ťuknite na Text a potom do riadka vzorcov zadajte "My Company Name" (vrátane úvodzoviek).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.

    Doslovný reťazec v označení

    Keď reťazec uzavriete do úvodzoviek, určíte tým, že sa má použiť presne v zadanom tvare.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Prípadne môžete hodnotu vlastnosti zadať vo vzorci.As an alternative, you can set the value of a property to a formula.

  2. Vyberte ovládací prvok Označenie, v zozname vlastností kliknite alebo ťuknite na Text a potom do riadka vzorcov zadajte Dnes() (bez úvodzoviek).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í prvok zobrazuje aktuálny dátum.The control shows the current date.

    Funkcia Dnes

    Tip

    Môžete definovať rôzne formáty dátumu a času a vykonávať s nimi výpočty.You can format dates and times in various ways, in addition to performing calculations on them.

Konfigurácia dvoch ovládacích prvkov a ich vzájomná interakciaConfigure two controls to interact with each other

V tejto časti kurzu pridáte začiarkavacie políčko a nakonfigurujete, aby sa vytvorené označenie zobrazovalo iba v prípade, že je políčko začiarknuté.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. Kliknite alebo ťuknite na kartu Vložiť.Click or tap the Insert tab.

    Karta Vložiť

  2. Kliknite alebo ťuknite na Ovládacie prvky a potom na Začiarkavacie políčko.Click or tap Controls, and then click or tap Check box.

    Vloženie začiarkavacieho políčka

  3. Ovládací prvok Začiarkavacie políčko umiestnite pod ovládací prvok Označenie a pre vlastnosť Text ovládacieho prvku Začiarkavacie políčko zadajte 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.

    Konfigurácia začiarkavacieho políčka

  4. Nechajte ovládací prvok Začiarkavacie políčko stále vybratý, kliknite alebo ťuknite na jeho názov priamo nad kartou Vlastnosti a zadajte MyCheckbox (Moje začiarkavacie políčko).With the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Premenovanie začiarkavacieho políčka

  5. Kliknutím alebo ťuknutím vyberte ovládací prvok Označenie.Click or tap the Label control to select it.

  6. Na karte Vlastnosti kliknite alebo ťuknite na vlastnosť Visible (Viditeľné).On the Properties tab, click or tap the Visible property.

    Vlastnosť Visible

  7. V riadku vzorcov odstráňte text true a zadajte alebo prilepte tento vzorec: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)

    Funkcia If (Ak) označuje, že by sa malo označenie zobrazovať iba v prípade, že je políčko začiarknuté.This If function states that the label should appear only when the check box is selected. Keďže políčko začiarknuté nie je, ovládací prvok Označenie sa skryje (zobrazuje sa iba pole výberu).Because the check box is cleared, the Label control disappears (except for the selection box).

    Vzorec vlastnosti Visible

  8. Kliknite alebo ťuknite na ovládací prvok Začiarkavacie políčko, aby sa okolo neho zobrazilo pole výberu, a ďalším kliknutím alebo ťuknutím naňho pridajte značku začiarknutia.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.

    Označenie sa znova zobrazí:The Label reappears:

    Označenie sa zobrazí, keď je políčko začiarknuté

  9. Zrušte začiarknutie ovládacieho prvku Začiarkavacie políčko, čím skryjete ovládací prvok Označenie.Clear the Check box control to hide the Label control.

    Označenie sa skryje, keď políčko nie je začiarknuté

Toto je iba základný príklad. Správanie a vzhľad aplikácie môžete nakonfigurovať vytvorením jedného alebo viacerých vzorcov, ktoré môžu byť jednoduché alebo aj zlož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.

Premenovanie obrazovky alebo ovládacieho prvkuRename a screen or a control

Obrazovky a ovládacie prvky môžete premenovať – jednoduchšie sa tak vyznáte vo vzorcoch a zjednodušíte si ich správu.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Kliknite alebo ťuknite na obrazovku alebo ovládací prvok, ktorý chcete premenovať.Click or tap the screen or the control that you want to rename.

  2. Na pravej table kliknite alebo ťuknite na názov ovládacieho prvku (priamo nad kartou Vlastnosti) a potom zadajte požadovaný názov.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.

    Premenovanie začiarkavacieho políčka

Vyhľadanie a výber obrazovky alebo ovládacieho prvkuFind and select a screen or a control

Obrazovku a ovládací prvok môžete vyhľadať a vybrať, aj keď sú skryté alebo prekryté iným ovládacím prvok. Slúži na to vyhľadávanie na ľavej table.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. Na tejto table sa zobrazujú buď miniatúry všetkých obrazoviek v aplikácii, alebo hierarchické zobrazenie jednotlivých obrazoviek a ovládacích prvkov, ktoré 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.

  • Ak chcete prepnúť medzi miniatúrami a hierarchickým zobrazením, kliknite alebo ťuknite na ikonu v pravom hornom rohu tably.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Prepnutie zobrazení

  • Ak chcete vyhľadať určitý ovládací prvok, zadajte jeden alebo viacero znakov z jeho názvu. Zvýraznia sa názvy ovládacích prvkov, ktoré zadaný text obsahujú.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    Ak kliknete alebo ťuknete na niektorý výsledok hľadania, vyberiete tento ovládací prvok v aplikácii.If you click or tap a search result, you select that control in the app.

    Vyhľadávanie v stromovom zobrazení

  • Ak chcete presunúť, duplikovať, odstrániť alebo premenovať obrazovku, kliknite na ňu pravým tlačidlom (prípadne kliknite alebo ťuknite na tri bodky vedľa nej) a potom kliknite alebo ťuknite na požadovanú možnosť.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.

    Kontextová ponuka stromového zobrazenia

  • Ak chcete skopírovať a prilepiť, odstrániť alebo premenovať určitý ovládací prvok, kliknite naňho pravým tlačidlom (prípadne kliknite alebo ťuknite na tri bodky vedľa neho) a potom kliknite alebo ťuknite na požadovanú možnosť.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.