Dodawanie i konfigurowanie kontrolki w usłudze PowerAppsAdd and configure a control in PowerApps

Dodawaj różne elementy interfejsu użytkownika do aplikacji i konfiguruj aspekty ich wyglądu oraz działania bezpośrednio z poziomu paska narzędzi na karcie Właściwości lub na pasku formuły.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. Te elementy interfejsu użytkownika noszą nazwę kontrolek, zaś aspekty, które możesz konfigurować, są nazywane właściwościami.These UI elements are called controls, and the aspects that you configure are called properties.

Wymagania wstępnePrerequisites

  1. Zarejestruj się w usłudze PowerApps, zainstaluj ją i otwórz, a następnie zaloguj się, podając te same poświadczenia, których użyto podczas rejestracji.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.

  2. W programie PowerApps Studio kliknij lub naciśnij pozycję Nowy w menu Plik (w pobliżu lewej krawędzi).In PowerApps Studio, click or tap New on the File menu (near the left edge).

    Opcja Nowy w menu Plik

  3. Na kafelku Pusta aplikacja kliknij lub naciśnij pozycję Układ telefonu.On the Blank app tile, click or tap Phone layout.

    Tworzenie aplikacji od podstaw

  4. Jeśli zostanie wyświetlony monit o skorzystanie z przewodnika wprowadzającego, kliknij lub naciśnij przycisk Dalej, aby zapoznać się z kluczowymi obszarami interfejsu usługi PowerApps (albo kliknij lub naciśnij przycisk Pomiń).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).

    Otwieranie ekranu przewodnika wprowadzającego

    Zawsze możesz uruchomić przewodnik później, klikając lub naciskając ikonę znaku zapytania w pobliżu prawego górnego rogu, a następnie klikając lub naciskając pozycję Uruchom przewodnik wprowadzający.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.

Dodawanie kontrolkiAdd a control

Aby dodać dowolną kontrolkę z wielu kategorii, należy kliknąć lub nacisnąć kartę Wstawianie na pasku narzędzi, kliknąć lub nacisnąć kategorię, a następnie kliknąć lub nacisnąć żądaną kontrolkę.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. W tej sekcji możesz przejrzeć kontrolki z poszczególnych kategorii, aby zapoznać się z typami kontrolek, które można dodać, oraz miejscem, gdzie się one znajdują.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 karcie Wstawianie kliknij lub naciśnij dowolną kategorię, a następnie kliknij lub naciśnij kontrolkę, którą chcesz dodać:On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

Tekst: Etykieta, Wprowadzanie tekstu, Tekst HTML, Wprowadzanie pióremText: Label, Text input, HTML Text, Pen input
Kontrolki: Przycisk, Lista rozwijana, Selektor daty, Pole listy, Pole wyboru, Przycisk radiowy, Przełącznik, Suwak, Ocena, CzasomierzControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
Galeria: Pionowa, Pozioma, Elastyczna wysokość, Pusta pionowa, Pusta pozioma, Pusta z elastyczną wysokościąGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
Tabela danychData table
Formularze: Edycja, Wyświetlanie, Formularz jednostkiForms: Edit, Display, Entity form
Multimedia: Obraz, Aparat, Kod kreskowy, Wideo, Dźwięk, Mikrofon, Dodaj obrazMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
Wykresy: Wykres kolumnowy, Wykres liniowy, Wykres kołowyCharts: Column chart, Line chart, Pie chart
IkonyIcons

Porada

Jeśli potrzebujesz więcej miejsca na kontrolki, dodaj kolejny ekran.If you need more space for controls, add another screen.

Bezpośrednie konfigurowanie kontrolkiConfigure a control directly

W ramach tej procedury dodasz i skonfigurujesz kontrolkę Etykieta, jednak wiele z opisanych zasad ma również zastosowanie do innych kontrolek.In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. Kliknij lub naciśnij kartę Wstawianie, a następnie kliknij lub naciśnij pozycję Etykieta.Click or tap the Insert tab, and then click or tap Label.

    Karta Wstawianie

    Po dodaniu kontrolki zostanie ona domyślnie wybrana.When you add a control, it's selected by default. Możesz także wybrać istniejącą kontrolkę, klikając lub naciskając ją.You can also select an existing control by clicking or tapping it. Po wybraniu kontrolki zostanie ona otoczona polem zaznaczania, a pozostałe obszary interfejsu użytkownika zmieniają się, umożliwiając konfigurację wybranej kontrolki.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. Na przykład wybrana kontrolka Etykieta przypomina następującą grafikę.For example, a selected Label control resembles this graphic.

    Wybrana etykieta

    Ważne

    Jeśli podczas wybierania kontrolki lub pustego obszaru ekranu wybrana jest inna kontrolka, wybór pierwszego elementu zostaje anulowany.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. Zmniejsz szerokość kontrolki Etykieta, przeciągając uchwyt z prawej krawędzi pola zaznaczania w lewo.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (Środkowy uchwyt jest wyświetlany tylko przy powiększeniu).(The middle handle appears only if you zoom in.)

    Etykieta po zmianie rozmiaru

    Rozmiar kontrolki można również zmienić, modyfikując jej właściwość Height, Width lub obie te właściwości, co opisano w dalszej części tego tematu.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Przenieś kontrolkę Etykieta, przeciągając samo pole zaznaczania (lub modyfikując właściwość X, Y lub obie te właściwości, co opisano w dalszej części tego tematu).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. Kliknij trzykrotnie tekst wyświetlony w kontrolce Etykieta, a następnie wpisz tekst Hello, world.Triple-click the text that appears in the Label control, and then type Hello, world.

    Etykieta z niestandardowym tekstem

    Ten tekst można również zmodyfikować, ustawiając właściwość Text kontrolki, co opisano w dalszej części tego tematu.You can also modify this text by setting the Text property of this control, as this topic describes later.

Konfigurowanie kontrolki z poziomu paska narzędziConfigure a control from the toolbar

Konfigurując kontrolkę z poziomu paska narzędzi, możesz określić szerszy zakres opcji niż w przypadku bezpośredniego konfigurowania kontrolki.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Po wybraniu kontrolki Etykieta kliknij lub naciśnij kartę Narzędzia główne na pasku narzędzi.With the Label control selected, click or tap the Home tab of the toolbar.

    Karta Narzędzia główne

  2. Kliknij lub naciśnij pozycję Wypełnij, a następnie kliknij lub naciśnij kolor, np. beryl.Click or tap Fill, and then click or tap a color such as aquamarine.

    Opcja wypełnienia

    Kontrolka Etykieta zostanie zmieniona zgodnie z dokonanym wyborem.The Label control reflects your selection.

    Etykiety z wypełnieniem berylowym

  3. Zmień rodzinę czcionek i rozmiar tekstu (na przykład na Georgia,Change the font family and the size of the text (for example, to 18 pt. 18 pkt).Georgia).

    Kontrolki czcionek

    Kontrolka Etykieta zostanie zmieniona zgodnie z dokonanym wyborem.The Label control reflects your selection.

    Georgia 18 pkt

  4. Kliknij lub naciśnij kartę Etykieta, kliknij lub naciśnij pozycję Wyrównanie w pionie, a następnie kliknij lub naciśnij pozycję Do góry.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Karta Pole tekstowe

    Kontrolka Etykieta zostanie zmieniona zgodnie z dokonanym wyborem.The Label control reflects your selection.

    Etykieta z tekstem wyrównanym do górnej krawędzi pola

Konfigurowanie kontrolki z poziomu karty WłaściwościConfigure a control from the Properties tab

Za pomocą karty Właściwości można skonfigurować kontrolkę bez wpisywania formuły.By using the Properties tab, you can configure a control without writing a formula. W ramach tej procedury dodasz i skonfigurujesz kolejną kontrolkę Etykieta, jednak wiele z opisanych zasad ma również zastosowanie do innych kontrolek.In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. Dodaj kolejną kontrolkę Etykieta zgodnie z opisem we wcześniejszej części tego tematu.Add another Label control as described earlier in this topic.

  2. Po wybraniu nowej kontrolki kliknij lub naciśnij kartę Właściwości w okienku po prawej stronie.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Panel właściwości

  3. W polu Tekst wpisz karta Właściwości.In the Text box, type Properties tab.

    Tekst etykiety na panelu właściwości

    Kontrolka Etykieta wyświetla wprowadzony tekst.The Label control shows the entered text.

    Tekst kanwy na panelu właściwości

  4. Kliknij lub naciśnij ikonę Wypełnij na panelu Właściwości, a następnie kliknij lub naciśnij kolor.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Tekst koloru na panelu właściwości

    Kontrolka Etykieta zostanie zmieniona zgodnie z dokonanym wyborem.The Label control reflects your selection.

    Kolor kanwy na panelu właściwości

  5. Kliknij lub naciśnij właściwość Color na panelu właściwości.Click or tap the Color property in the properties panel.

    Właściwość na panelu właściwości

    Wartość właściwości Color zostanie wyróżniona na pasku formuły.The value of the Color property is highlighted in the formula bar.

    Wyrażenie właściwości na panelu właściwości

  6. Usuń drugą kontrolkę Etykieta, klikając lub naciskając ją, a następnie naciskając klawisz Delete.Delete the second Label control by clicking or tapping it and then pressing Delete.

Konfigurowanie kontrolki na pasku formułyConfigure a control in the formula bar

Za pomocą paska formuły można ustawić właściwości, których nie można ustawić bezpośrednio na karcie Właściwości ani z poziomu paska narzędzi.By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. Na przykład można ustawić etykietkę narzędzia, która jest wyświetlana, gdy użytkownik wskazuje kontrolkę, ale jej nie klika ani nie naciska.For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. Można również określić skomplikowane formuły, które zwiększają możliwości aplikacji.You can also specify complicated formulas that increase the power of your app.

Każda zmiana dokonywana wcześniej w tym temacie wiązała się z aktualizacją wartości właściwości konfigurowanej kontrolki.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Przy zmianie rozmiaru kontrolki zmieniana była właściwość Width.When you resized the control, you changed its Width property.
  • Przy przenoszeniu kontrolki zmieniane były właściwości X i Y.When you moved the control, you changed its X and Y properties.
  • Podczas zmiany tekstu wyświetlanego przez kontrolkę zmieniana była właściwość Text.When you changed the text that the control displays, you changed its Text property.

Zamiast konfigurować kontrolkę bezpośrednio, na karcie Właściwości lub z poziomu paska narzędzi możesz również zaktualizować wartość właściwości, wybierając ją na liście właściwości, a następnie określając jej wartość na pasku formuły.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. Przyjmując takie podejście, możesz wyszukać właściwość alfabetycznie, a także określić więcej typów wartości.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Po wybraniu pozostałej kontrolki Etykieta kliknij lub naciśnij pozycję Text na liście właściwości, a następnie wpisz tekst "Nazwa mojej firmy" (wraz ze znakami cudzysłowu) na pasku formuły.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.

    Etykieta z ciągiem literału

    Umieszczając ciąg tekstowy w cudzysłowie, określasz, że powinien być traktowany dokładnie tak, jak został wpisany.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Alternatywnie możesz ustawić wartość właściwości w formule.As an alternative, you can set the value of a property to a formula.

  2. Po wybraniu kontrolki Etykieta kliknij lub naciśnij pozycję Text na liście właściwości, a następnie wpisz Today() (bez znaków cudzysłowu) na pasku formuły.With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    Kontrolka wyświetli bieżącą datę.The control shows the current date.

    Funkcja Today

    Porada

    Daty i godziny może formatować na różne sposoby, a nie tylko wykonywać obliczenia z ich użyciem.You can format dates and times in various ways, in addition to performing calculations on them.

Konfigurowanie dwóch kontrolek w celu ich wzajemnej interakcjiConfigure two controls to interact with each other

W ramach tej procedury dodasz pole wyboru, a następnie skonfigurujesz istniejącą etykietę tak, aby wyświetlała się tylko wtedy, gdy zostanie zaznaczone pole wyboru.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. Kliknij lub naciśnij kartę Wstawianie.Click or tap the Insert tab.

    Karta Wstawianie

  2. Kliknij lub naciśnij pozycję Kontrolki, a następnie kliknij lub naciśnij pozycję Pole wyboru.Click or tap Controls, and then click or tap Check box.

    Wstawianie pola wyboru

  3. Przenieś kontrolkę Pole wyboru, tak aby była wyświetlana poniżej kontrolki Etykieta i ustaw właściwość Text kontrolki Pole wyboru, aby wyświetlał się tekst Pokaż tekst.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.

    Konfigurowanie pola wyboru

  4. Przy zaznaczonej kontrolce Pole wyboru kliknij lub naciśnij jej nazwę tuż powyżej karty Właściwości, a następnie wpisz MojePoleWyboru.With the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Zmiana nazwy pola wyboru

  5. Kliknij lub naciśnij kontrolkę Etykieta, aby ją wybrać.Click or tap the Label control to select it.

  6. Na karcie Właściwości kliknij lub naciśnij właściwość Visible.On the Properties tab, click or tap the Visible property.

    Właściwość Visible

  7. Na pasku formuły usuń wartość true, a następnie wpisz lub wklej następującą formułę:In the formula bar, delete true, and then type or paste this formula:

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

    Niniejsza funkcja If określa, że etykieta powinna zostać wyświetlona tylko wtedy, gdy pole wyboru jest zaznaczone.This If function states that the label should appear only when the check box is selected. Ponieważ pole wyboru jest wyczyszczone, kontrolka Etykieta zniknęła (z wyjątkiem pola zaznaczenia).Because the check box is cleared, the Label control disappears (except for the selection box).

    Formuła Visible

  8. Kliknij lub naciśnij kontrolkę Pole wyboru, aby dodać do niej pole zaznaczenia, a następnie kliknij lub naciśnij ją ponownie, aby dodać znacznik wyboru.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.

    Etykieta pojawia się ponownie:The Label reappears:

    Etykieta jest wyświetlana, gdy pole wyboru jest zaznaczone

  9. Wyczyść kontrolkę Pole wyboru, aby ukryć kontrolkę Etykieta.Clear the Check box control to hide the Label control.

    Etykieta znika, gdy pole wyboru jest wyczyszczone

To podstawowy przykład, jednak możesz skonfigurować działanie i wygląd aplikacji, tworząc jedną lub więcej formuł, od prostych po złożone.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.

Zmienianie nazwy ekranu lub kontrolkiRename a screen or a control

Dzięki zmianie nazwy ekranu lub kontrolki, możesz tworzyć formuły czytelniejsze i łatwiejsze w obsłudze.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Kliknij lub naciśnij ekran lub kontrolkę, których nazwę chcesz zmienić.Click or tap the screen or the control that you want to rename.

  2. W okienku po prawej stronie kliknij lub naciśnij nazwę kontrolki (tuż powyżej karty Właściwości), a następnie wpisz wybraną nazwę.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.

    Zmiana nazwy pola wyboru

Znajdowanie i wybieranie ekranu lub kontrolkiFind and select a screen or a control

Za pomocą wyszukiwania w okienku po lewej stronie istnieje możliwość znalezienia ekranu lub kontrolki, nawet jeśli jest ona ukryta lub nakłada się na inną kontrolkę.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. Okienko to wyświetla miniaturę każdego ekranu w aplikacji lub hierarchiczny widok każdego ekranu i kontrolek, które on zawiera.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.

  • Aby przełączyć między widokiem miniatur i widokiem hierarchicznym, kliknij lub naciśnij ikonę w prawym górnym rogu okienka.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Przełączanie widoków

  • Aby znaleźć kontrolkę, wpisz jeden lub więcej znaków w celu wyróżnienia nazw kontrolek, które zawierają wpisany tekst.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    Kliknij lub naciśnij wynik wyszukiwania, aby wybrać daną kontrolkę w aplikacji.If you click or tap a search result, you select that control in the app.

    Wyszukiwanie w widoku drzewa

  • Aby przenieść ekran w górę lub w dół, zduplikować go, usunąć go lub zmienić jego nazwę, kliknij go prawym przyciskiem myszy (ewentualnie kliknij lub naciśnij wielokropek obok niego), a następnie kliknij lub naciśnij wybraną opcję.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.

    Menu kontekstowe widoku drzewa

  • Aby skopiować/wkleić kontrolkę, usunąć ją lub zmienić jej nazwę, kliknij ją prawym przyciskiem myszy (ewentualnie kliknij lub naciśnij wielokropek obok niej), a następnie kliknij lub naciśnij wybraną opcję.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.