Tworzenie aplikacji od podstawCreate an app from scratch

Utwórz swoją własną aplikację od podstaw, używając któregokolwiek z wielu różnorodnych źródeł danych i dodając kolejne źródła później, jeśli zajdzie taka potrzeba.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Określ wygląd i działanie każdego elementu interfejsu użytkownika, aby zoptymalizować wynik pod kątem swoich celów i przepływu pracy.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Takie podejście pochłania znacznie więcej czasu niż automatyczne generowanie aplikacji, ale doświadczeni projektanci aplikacji mogą tworzyć aplikacje najlepiej odpowiadające ich potrzebom.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Uwaga

Niniejszy temat został napisany pod kątem programu PowerApps Studio dla systemu Windows, ale procedura wygląda podobnie, jeśli otworzysz usługę PowerApps w przeglądarce.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Korzystając z tego samouczka, utworzysz aplikację, która zawiera dwa ekrany.By following this tutorial, you'll create an app that contains two screens. Na jednym ekranie użytkownicy mogą przeglądać zestaw rekordów:On one screen, users can browse through a set of records:

Ekran, na którym można przewijać zestaw danych

Na drugim ekranie użytkownicy mogą utworzyć rekord, zaktualizować jedno lub więcej pól w rekordzie lub usunąć cały rekord:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Ekran, na którym można dodawać i aktualizować dane

Wymagania wstępnePrerequisites

Możesz przejrzeć ten samouczek, aby zapoznać się tylko z podstawowymi założeniami lub postępować zgodnie z opisanymi czynnościami.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Skopiuj te dane, a następnie wklej je do pliku programu Excel.Copy this data, and then paste it into an Excel file.

    Start DayStart Day Start TimeStart Time Volunteer 1Volunteer 1 Volunteer 2Volunteer 2
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4-pm2pm-4-pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday 10am-noon10am-noon SinghSingh MorganMorgan
    SundaySunday 10am-noon10am-noon BatyeBatye NguyenNguyen
  2. Sformatuj te dane jako tabelę o nazwie Schedule, dzięki czemu usługa PowerApps może przeanalizować informacje.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Aby uzyskać więcej informacji, zobacz Create an Excel table in a worksheet (Tworzenie tabeli programu Excel w arkuszu).For more information, see Create an Excel table in a worksheet.

  3. Zapisz plik pod nazwą eventsignup.xls, a następnie przekaż go do konta magazynu w chmurze, takiego jak OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. Jeśli nie znasz usługi PowerApps:If you're new to PowerApps:

Tworzenie pustej aplikacji i łączenie z danymiCreate a blank app, and connect to data

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

    Opcja Nowy w menu Plik

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

    Opcja utworzenia aplikacji na podstawie danych

  3. Jeśli zostanie wyświetlony monit, uruchom przewodnik wprowadzający, aby zapoznać się z głównymi obszarami usługi PowerApps (bądź kliknij lub naciśnij pozycję Pomiń).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Krótki przewodnik

    Zawsze możesz uruchomić przewodnik później, klikając lub naciskając ikonę znaku zapytania w pobliżu lewego górnego rogu ekranu, 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-left corner of the screen and then clicking or tapping Take the intro tour.

  4. Na lewym pasku nawigacyjnym kliknij lub naciśnij ikonę w prawym górnym rogu, aby przełączyć się do widoku miniatur.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Przełączanie widoków

  5. W okienku po prawej stronie kliknij lub naciśnij pozycję Dodaj źródło danych.In the right-hand pane, click or tap Add data source.

    Dodawanie źródła danych

  6. Wykonaj jedną z następujących czynności:Perform either of these steps:

    • Jeśli masz już połączenie z kontem magazynu w chmurze, kliknij je lub naciśnij.If you already have a connection to your cloud-storage account, click or tap it.
    • Jeśli nie masz połączenia z kontem magazynu w chmurze, kliknij lub naciśnij pozycję Dodaj połączenie, kliknij lub naciśnij odpowiedni typ konta, kliknij lub naciśnij pozycję Połącz, a następnie (jeśli zostanie wyświetlony monit) podaj swoje poświadczenia.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. W obszarze Wybierz plik programu Excel przejdź do pliku eventsignup.xlsx, a następnie kliknij go lub naciśnij.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Określanie pliku programu Excel, który ma być używany

  8. W obszarze Wybierz tabelę zaznacz pole wyboru Schedule, a następnie kliknij lub naciśnij pozycję Połącz.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Określanie tabeli programu Excel, która ma być używana

    Na karcie Źródła danych w prawym okienku widoczne są źródła danych dodane do aplikacji.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Wyświetlanie połączonych źródeł danych

    Ten samouczek wymaga tylko jednego źródła danych, ale później możesz dodać więcej źródeł danych.This tutorial requires only one data source, but you can add more data sources later.

Wyświetlanie danychShow the data

  1. Na karcie Narzędzia główne kliknij lub naciśnij pozycję Nowy ekran, a następnie kliknij lub naciśnij pozycję Ekran listy.In the Home tab, click or tap New screen and then click or tap List screen.

    Dodawanie układu z nagłówkiem, podtytułem i elementem treści

    Zostanie dodany ekran z kilkoma kontrolkami domyślnymi, takimi jak pole wyszukiwania i kontrolka Galeria.A screen is added with several default controls, such as a search box and a Gallery control. Galeria zakrywa cały ekran pod polem wyszukiwania.The gallery covers the entire screen under the search box.

  2. Kliknij lub naciśnij dowolne miejsce w galerii, z wyjątkiem strzałki, na przykład bezpośrednio pod polem wyszukiwania.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Wybieranie kontrolki galeria

  3. W okienku po prawej stronie otwórz listę Układ, a następnie kliknij lub naciśnij opcję, która wyświetla tytuł, napis i treść.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Wybieranie kontrolki galeria

  4. Na liście właściwości kliknij lub naciśnij pozycję Items, skopiuj tę formułę i wklej ją na pasku formuły:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Jeśli nie masz pewności, gdzie jest lista właściwości, zobacz Add and configure controls (Dodawanie i konfigurowanie kontrolek).If you're not sure where the property list is, see Add and configure controls.

    Uwaga

    W przypadku źródeł danych programów SharePoint lub Excel, które zawierają nazwy kolumn ze spacjami, usługa PowerApps wyświetla każdą spację jako wartość „_x0020_”.For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". W tym przykładzie kolumna "Volunteer 1" zostanie wyświetlona w formule jako "Volunteer_x0020_1".In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Ta galeria zawiera dane z tabeli Schedule.This gallery shows the data from the Schedule table.

    Dane tabeli Schedule w galerii ułożone domyślnie

    Pole wyszukiwania umożliwia filtrowanie galerii na podstawie wpisanego tekstu.A search box can filter the gallery based on text that the user types. Jeśli użytkownik wpisze co najmniej jedną literę w polu wyszukiwania, galeria pokazuje tylko te rekordy, dla których pole Volunteer 1 zawiera wpisany przez użytkownika tekst.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    Przycisk sortowania umożliwia sortowanie rekordów na podstawie danych w kolumnie Volunteer 1.The sort button can sort the records based on data in the Volunteer 1 column. Jeśli użytkownik kliknie lub naciśnie ten przycisk, kolejność sortowania jest przełączana między malejącą i rosnącą.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Ta formuła zawiera funkcje Sort, If, IsBlank, Filter i Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Aby uzyskać więcej informacji na temat tych i innych funkcji, zobacz informacje ogólne o formułachFor more information about these and other functions, see the formula reference

  5. Wpisz i w polu wyszukiwania i kliknij lub naciśnij przycisk sortowania raz (lub nieparzystą liczbę razy).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    W galerii pojawią się następujące wyniki.The gallery shows these results.

    Sortowanie i filtrowanie galerii

    Więcej informacji na temat sortowania, filtrowania i innych funkcjiMore information about the Sort, Filter, and other functions

  6. Wybierz kontrolkę Etykieta u góry ekranu, klikając ją lub naciskając.Select the Label control at the top of the screen by clicking or tapping the control.

    Wybieranie paska tytułu

  7. Na liście właściwości kliknij lub naciśnij pozycję Text, skopiuj ten tekst i wklej go na pasku formuły.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "Wyświetl rekordy""View Records"

    Zmienianie paska tytułu

Tworzenie ekranu ChangeScreen i jego transparentuCreate the ChangeScreen and its banner

  1. Usuń nazwę Screen1 i zmień nazwę Screen2 na ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Zmiana nazwy ekranu

  2. Dodaj ekran i zmień jego nazwę na ChangeScreen.Add a screen, and rename it ChangeScreen.

    Dodawanie ekranu i zmiana jego nazwy

  3. Na karcie Wstawianie kliknij lub naciśnij pozycję Tekst, a następnie kliknij lub naciśnij pozycję Etykieta.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Skonfiguruj kontrolkę Etykieta, która właśnie została dodana:Configure the Label control that you just added:

    • Ustaw jej właściwość Text na następującą formułę:Set its Text property to this formula:
      "Change record""Change record"

    • Ustaw jej właściwość Fill na następującą formułę:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Ustaw jej właściwość Color na następującą formułę:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Ustaw właściwość Align na wartość Center.Set its Align property to Center.

    • Ustaw jego właściwość X na 0.Set its X property to 0.

    • Ustaw jego właściwość Width na 640.Set its Width property to 640. Kontrolka Etykieta będzie odzwierciedlać wprowadzone zmiany.The Label control reflects your changes.

      Ekran ChangeScreen z banerem

Dodawanie i konfigurowanie formularzaAdd and configure a form

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Formularze, a następnie kliknij lub naciśnij pozycję Edycja.On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. Przenieś formularz i zmień jego rozmiar tak, aby pokrywał większą część ekranu.Move and resize the form to cover most of the screen.

    Dodawanie formularza

    Domyślna nazwa formularza to Form1, chyba że jakiś formularz był już wcześniej dodawany i usuwany.The form is named Form1 by default unless you already added and removed a form. W takim przypadku zmień nazwę formularza na Form1.In that case, rename the form to Form1.

  3. Ustaw właściwość DataSource formularza Form1 na Schedule.Set DataSource property of Form1 to Schedule.

  4. Ustaw właściwość Item formularza Form1 na następujące wyrażenie:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. W okienku po prawej stronie kliknij lub naciśnij pole wyboru dla każdego pola, aby było wyświetlane.In the right-hand pane, click or tap the checkbox for each field to show it.

    Pokazywanie pól na formularzu

  6. W dolnej części formularza kliknij lub naciśnij pozycję Dodaj kartę niestandardową.Near the bottom of the form, click or tap Add a custom card.

    Dodawanie karty niestandardowej

  7. Dodaj kontrolkę Etykieta na nowej karcie.Add a Label control in the new card.

  8. Ustaw właściwość AutoHeight nowej kontrolki na wartość true, a właściwość Text ustaw na następującą formułę:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    Na etykiecie będą wyświetlane ewentualne błędy z formularza.The label will show any errors from the form.

  9. Na lewym pasku nawigacyjnym kliknij lub naciśnij miniaturę ekranu ChangeScreen, aby go wybrać.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. Na karcie Wstawianie kliknij lub naciśnij pozycję Ikony, kliknij lub naciśnij opcję, aby dodać pozycję Strzałka wstecz, a następnie przenieś strzałkę w lewy dolny róg ekranu.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. Ustaw właściwość OnSelect strzałki na następującą formułę:Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Gdy użytkownik kliknie lub naciśnie strzałkę, funkcja Navigate otworzy ekran ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Poniżej formularza dodaj kontrolkę Przycisk i ustaw dla właściwości Text przycisku wartość "Zapisz".Add a Button control under the form, and set the button's Text property to "Save".

    Dodawanie przycisku zapisywania

  13. Dla właściwości OnSelect przycisku ustaw następującą formułę:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Gdy użytkownik kliknie lub naciśnie przycisk, funkcja SubmitForm zapisze wszelkie zmiany w źródle danych i ekran ViewScreen zostanie wyświetlony ponownie.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. Na dole ekranu dodaj kolejny przycisk, ustaw dla jego właściwości Text wartość "Usuń", a dla właściwości OnSelect ustaw następującą formułę:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Gdy użytkownik kliknie lub naciśnie ten przycisk, funkcja Remove usunie rekord i zostanie ponownie wyświetlony ekran ViewScreen.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Dla właściwości Visible przycisku Usuń ustaw następującą formułę:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Ten krok powoduje ukrycie przycisku Usuń, gdy użytkownik tworzy rekord.This step hides the Remove button when the user is creating a record.

    Ekran ChangeScreen odpowiada temu przykładowi:The ChangeScreen matches this example:

    Końcowy wygląd ekranu ChangeScreen

Ustawianie nawigacji z ekranu ViewScreenSet navigation from ViewScreen

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij miniaturę ekranu ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Otwieranie ekranu ViewScreen

  2. Kliknij lub naciśnij pozycję Strzałka Dalej dla pierwszego rekordu w galerii.Click or tap the Next arrow for the first record in the gallery.

    Strzałka Dalej

  3. Dla właściwości OnSelect strzałki ustaw następującą formułę:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. W prawym górnym rogu kliknij lub naciśnij ikonę znaku plus.In the upper-right corner, click or tap the plus icon.

    Dodawanie rekordu

  5. Dla właściwości OnSelect wybranej ikony ustaw następującą formułę:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Gdy użytkownik kliknie lub naciśnie tę ikonę, zostanie wyświetlony ekran ChangeScreen z każdym polem pustym, dzięki czemu użytkownik będzie mógł łatwiej utworzyć rekord.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Uruchamianie aplikacjiRun the app

Podczas dostosowywania aplikacji testuj wprowadzane zmiany, uruchamiając aplikację w trybie Podgląd, tak jak opisano w tej sekcji.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij górną miniaturę, aby wybrać ekran ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Wybieranie ekranu ViewScreen

  2. Otwórz tryb Podgląd, naciskając klawisz F5 (bądź klikając lub naciskając ikonę Podgląd w prawym górnym rogu).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Otwieranie trybu podglądu

  3. Kliknij lub naciśnij strzałkę Dalej dla rekordu, aby wyświetlić szczegółowe informacje dotyczące tego rekordu.Click or tap the Next arrow for a record to show details about that record.

  4. Na ekranie ChangeScreen zmień informacje w jednym lub kilku polach, a następnie zapisz te zmiany, klikając lub naciskając przycisk Zapisz, lub usuń rekord, klikając lub naciskając przycisk Usuń.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. Zamknij tryb podglądu, naciskając klawisz Esc (bądź klikając lub naciskając ikonę zamykania poniżej paska tytułu).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Zamykanie trybu podglądu

Następne krokiNext steps