Vytvorenie plátnovej aplikácie úplne od začiatku na základe excelových údajovCreate a canvas app from scratch based on Excel data

Vytvorte si vlastnú plátnovú aplikáciu úplne od začiatku na základe excelových údajov, ktoré sú naformátované ako tabuľka, a potom (ak chcete), pridajte údaje z iných zdrojov.Create your own canvas app from scratch based on Excel data, formatted as a table, and then add data from other sources if you want. Podľa tohto kurzu vytvoríte aplikáciu s dvoma obrazovkami.By following this tutorial, you'll create an app that contains two screens. Na prvej obrazovke môžu používatelia prehľadávať množinu záznamov.On one screen, users can browse through a set of records. Na druhej obrazovke môžu používatelia vytvoriť záznam, aktualizovať jedno alebo viacero polí záznamu alebo celý záznam odstrániť.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record. Tento prístup je časovo náročnejší ako automatické generovanie aplikácie, ale tvorcovia aplikácií, ktorí majú viac skúseností, môžu pomocou neho vytvoriť tú najlepšiu aplikáciu zodpovedajúcu ich potrebám.This approach takes more time than generating an app automatically does, but app makers who have more experience can use it to build the best app for their needs.

PredpokladyPrerequisites

Ak chcete postupovať presne podľa krokov v tomto kurze, najskôr vytvorte excelový súbor z týchto ukážkových údajov.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. Tieto údaje skopírujte a vložte ich do excelového súboru.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime VolunteerVolunteer BackupBackup
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4pm2pm-4pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday noon-2pmnoon-2pm SinghSingh MorganMorgan
    SundaySunday 2pm-4pm2pm-4pm BatyeBatye NguyenNguyen
  2. Údaje naformátujte ako tabuľku s názvom Schedule, aby služba PowerApps mohla informácie analyzovať.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Ďalšie informácie nájdete v téme Formátovanie tabuľky v Exceli.For more information, see Format a table in Excel.

  3. Súbor uložte pod názvom eventsignup.xls, zatvorte ho a potom ho nahrajte do konta cloudového úložiska, ako je napríklad OneDrive.Save the file under the name eventsignup.xls, close it, and then upload it to a cloud-storage account, such as OneDrive.

Dôležité

Môžete použiť vlastný excelový súbor a použiť tento kurz iba na získanie všeobecného prehľadu.You can use your own Excel file and review this tutorial for general concepts only. Údaje v excelovom súbore je však potrebné naformátovať ako tabuľku.However, the data in the Excel file must be formatted as a table. Ďalšie informácie nájdete v téme Formátovanie tabuľky v Exceli.For more information, see Format a table in Excel.

Otvorenie prázdnej aplikácieOpen a blank app

  1. Prihláste sa do služby PowerApps.Sign in to PowerApps.

  2. V časti Vytvorte svoju vlastnú aplikáciu vyberte položku Plátnová aplikácia z prázdnej.Under Make your own app, select Canvas app from blank.

    Vytvorenie prázdnej plátnovej aplikácieCreate blank canvas app

  3. Zadajte názov svojej aplikácie, vyberte položku Telefón a potom vyberte možnosť Vytvoriť.Specify a name for your app, select Phone, and then select Create.

    Úplne novú aplikáciu môžete navrhnúť pre telefóny alebo iné zariadenia (napríklad tablety).You can design an app from scratch for phones or for other devices (such as tablets). Táto téma sa zameriava na návrh aplikácie pre telefóny.This topic focuses on designing an app for phones.

    Zadanie názvu a formátu aplikácieSpecify name and format of app

    Aplikácia PowerApps Studio vytvorí prázdnu aplikáciu pre telefóny.PowerApps Studio creates a blank app for phones.

  4. Ak sa zobrazí dialógové okno Vitajte v aplikácii PowerApps Studio, vyberte možnosť Preskočiť.If the Welcome to PowerApps Studio dialog box opens, select Skip.

Pripojenie k údajomConnect to data

  1. V strede obrazovky vyberte možnosť pripojenia k údajom.In the middle of the screen, select connect to data.

  2. Ak sa zobrazí tabla Údaje, vyberte na nej pripojenie svojho konta cloudového úložiska.In the Data pane, select the connection for your cloud-storage account if it appears. Ak sa nezobrazí, podľa nasledujúcich krokov pridajte pripojenie:Otherwise, follow these steps to add a connection:

    1. Vyberte položku Nové pripojenie, vyberte dlaždicu požadovaného konta cloudového úložiska a potom vyberte položku Vytvoriť.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. Ak sa zobrazí výzva, zadajte svoje poverenia k danému kontu.If prompted, provide your credentials for that account.
  3. Do časti Vybrať súbor programu Excel zadajte alebo vložte prvé písmená súboru eventsignup, čím sa zoznam vyfiltruje, a potom vyberte nahraný súbor.Under Choose an Excel file, type or paste the first letters of eventsignup to filter the list, and then select the file that you uploaded.

  4. V časti Vybrať tabuľku začiarknite políčko Schedule a potom vyberte položku Pripojiť.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. Výberom ikony na zavretie (X) v pravom hornom rohu zavrite tablu Údaje.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Vytvorenie obrazovky zobrazeniaCreate the view screen

  1. Na karte Domov výberom šípky nadol vedľa položky Nová obrazovka otvorte zoznam typov obrazoviek a potom vyberte položku Zoznam.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    Pridá sa obrazovka s niekoľkými predvolenými ovládacími prvkami, ako je napríklad vyhľadávacie pole a ovládací prvok Galéria.A screen is added with several default controls, such as a search box and a Gallery control. Galéria vypĺňa celú obrazovku pod vyhľadávacím poľom.The gallery covers the entire screen under the search box.

  2. V hornej časti novej obrazovky vyberte ovládací prvok Označenie a potom zmeňte [Title] na View records.At the top of the new screen, select the Label control, and then replace [Title] with View records.

    Zmena záhlavia okna

  3. Na ľavom navigačnom paneli vyberte položku BrowseGallery1.In the left navigation bar, select BrowseGallery1.

    Galéria bude ohraničená oblasťou výberu s rukoväťami.A selection box with handles surrounds the gallery.

    Pridanie obrazovky so zoznamom

  4. Na karte Vlastnosti na table vpravo vyberte šípku nadol, ktorá patrí k ponuke Rozloženie.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    Otvorte ponuku rozloženia

  5. Vyberte položku Nadpis, podnadpis a telo.Select Title, subtitle, and body.

  6. V riadku vzorcov nahraďte položku CustomGallerySample položkou Schedule a nahraďte obe inštancie položky SampleText položkou Volunteer.In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. Na pravej strane riadka vzorcov vyberte šípku nadol a potom položku Formátovať text.On the right edge of the formula bar, select the down arrow, and then select Format text.

    Vzorec zodpovedá tomuto príkladu:The formula matches this example:

    SortByColumns(
        Search(
            Schedule;
            TextSearchBox1.Text;
            "Volunteer"
        );
        "Volunteer";
        If(
            SortDescending1;
            SortOrder.Descending;
            SortOrder.Ascending
        )
    )
    
  8. Na karte Vlastnosti na table vpravo vyberte položku Upraviť vedľa označenia Polia.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. V okne Title2 vyberte položku Volunteer.In the Title2 box, select Volunteer.

  10. Výberom ikony na zavretie (X) v pravom hornom rohu zavrite tablu Údaje.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Používatelia môžu galériu zoradiť a filtrovať podľa mena dobrovoľníka na základe funkcií vzorca SortByColumns a Search.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • Ak používateľ zadá do vyhľadávacieho poľa aspoň jedno písmeno, galéria zobrazí iba záznamy, ktorých pole Volunteer obsahuje text zadaný používateľom.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer field contains the text that the user typed.
  • Ak používateľ vyberie tlačidlo na zoradenie (medzi tlačidlom na obnovenie a tlačidlom so znamienkom plus v záhlaví okna), galéria zobrazí záznamy vo vzostupnom alebo zostupnom poradí (podľa toho, koľkokrát používateľ tlačidlo vyberie) na základe poľa Volunteer.If a user selects the sort button (between the refresh button and the plus button in the title bar), the gallery shows the records in ascending or descending order (depending on how many times the user selects the button) based on the Volunteer field.

Ďalšie informácie o týchto a ďalších funkciách nájdete v článku Referenčné informácie k vzorcom.For more information about these and other functions, see the formula reference.

Vytvorenie obrazovky pre zmenyCreate the change screen

  1. Na karte Domov vyberte vedľa možnosti Nová obrazovka šípku nadol a potom vyberte položku Formulár.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. Na ľavom navigačnom paneli vyberte položku EditForm1.In the left navigation bar, select EditForm1.

  3. Na karte Vlastnosti na table vpravo vyberte šípku nadol vedľa položky Zdroj údajov a potom v zozname, ktorý sa zobrazí, vyberte položku Schedule.On the Properties tab of the right-hand pane, select the down arrow next to Data source, and then select Schedule in the list that appears.

  4. Pod zdrojom údajov, ktorý ste práve zadali, vyberte položku Upraviť polia.Under the data source that you just specified, select Edit fields.

  5. Na table Polia vyberte položku Pridať pole, začiarknite políčka pre jednotlivé polia a potom vyberte položku Pridať.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. Výberom šípky vedľa názvu jednotlivé polia zbaľte a potom presuňte pole Volunteer nahor, aby sa zobrazovalo na začiatku zoznamu polí.Select the arrow next to the name of each field to collapse it, and then drag the Volunteer field up so that it appears at the top of the list of fields.

    Zmena usporiadania polí

  7. Výberom ikony na zavretie (X) v pravom hornom rohu zavrite tablu Polia.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. Nastavte vlastnosť Item daného formulára na tento výraz – zadajte ho alebo prilepte do riadka vzorcov:Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. V hornej časti obrazovky vyberte ovládací prvok Označenie a potom zmeňte [Title] na Change records.At the top of the screen, select the Label control, and then replace [Title] with Change records.

    Zmena záhlavia okna

Odstránenie a premenovanie obrazoviekDelete and rename screens

  1. Na ľavom navigačnom paneli vyberte pri obrazovke Screen1 tri bodky (...) a potom vyberte položku Odstrániť.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    Odstránenie obrazovky

  2. Pri obrazovke Screen2 vyberte tri bodky (...), vyberte položku Premenovať a potom zadajte alebo prilepte názov ViewScreen.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Pri obrazovke Screen3 vyberte tri bodky (...), vyberte položku Premenovať a potom zadajte alebo prilepte názov ChangeScreen.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

Konfigurácia ikon na obrazovke zobrazeniaConfigure icons on the view screen

  1. V hornej časti obrazovky ViewScreen vyberte ikonu kruhovej šípky.Near the top of the ViewScreen, select the circular-arrow icon.

    Pridanie záznamu

  2. Vo vlastnosti OnSelect tejto ikony nastavte nasledujúci vzorec:Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    Keď používateľ vyberie túto ikonu, údaje z poľa Schedule sa aktualizujú z excelového súboru.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

    Ďalšie informácie o tejto a ďalších funkciách nájdete v referenčných informáciách ku vzorcom.For more information about this and other functions, see the formula reference.

  3. V pravom hornom rohu obrazovky ViewScreen vyberte ikonu so znamienkom plus.In the upper-right corner of the ViewScreen, select the plus icon.

    Pridanie záznamu

  4. Vo vlastnosti OnSelect tejto ikony nastavte nasledujúci vzorec:Set the OnSelect property for that icon to this formula:

    NewForm(EditForm1);;Navigate(ChangeScreen;ScreenTransition.None)

    Keď používateľ vyberie túto ikonu, zobrazí sa obrazovka ChangeScreen, na ktorej budú všetky polia prázdne, takže používateľ môže jednoduchšie vytvoriť záznam.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. Pri prvom zázname v galérii vyberte šípku doprava.Select the right-pointing arrow for the first record in the gallery.

    Výber šípky

  6. Vlastnosť OnSelect tejto šípky nastavte na nasledujúci vzorec:Set the OnSelect property for the arrow to this formula:

    EditForm(EditForm1);; Navigate(ChangeScreen; ScreenTransition.None)

    Keď používateľ vyberie túto ikonu, zobrazí sa obrazovka ChangeScreen, na ktorej bude každé pole zobrazovať údaje vybraného záznamu, takže používateľ môže daný záznam jednoduchšie upraviť alebo odstrániť.When the user selects this icon, ChangeScreen appears with each field showing the data for the selected record, so that the user can edit or delete the record more easily.

Konfigurácia ikon na obrazovke pre zmenyConfigure icons on the change screen

  1. Na obrazovke ChangeScreen vyberte ikonu X v ľavom hornom rohu.On ChangeScreen, select the "X" icon in the upper-left corner.

    Ikona Zrušiť

  2. Vo vlastnosti OnSelect tejto ikony nastavte nasledujúci vzorec:Set the OnSelect property for that icon to this formula:

    ResetForm(EditForm1);;Navigate(ViewScreen; ScreenTransition.None)

    Keď používateľ vyberie túto ikonu, všetky zmeny vykonané na tejto obrazovke sa zrušia a otvorí sa obrazovka zobrazenia.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. V pravom hornom rohu vyberte ikonu začiarknutia.In the upper-right corner, select the checkmark icon.

    Ikona v tvare značky začiarknutia

  4. Vlastnosť OnSelect symbolu začiarknutia nastavte na nasledujúci vzorec:Set the OnSelect property for the checkmark to this formula:

    SubmitForm(EditForm1);; Navigate(ViewScreen; ScreenTransition.None)

    Keď používateľ vyberie túto ikonu, všetky zmeny vykonané na tejto obrazovke sa uložia a otvorí sa obrazovka zobrazenia.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. Na karte Vložiť vyberte položku Ikony a potom vyberte ikonu Kôš.On the Insert tab, select Icons, and then select the Trash icon.

  6. Nastavte vlastnosť Color novej ikony na White a presuňte ju vedľa ikony začiarknutia.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    Ikona koša

  7. Vlastnosť Visible ikony Koša nastavte na nasledujúci vzorec:Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    Táto ikona sa zobrazí len vtedy, ak je formulár v režime Upraviť, nie v režime Nový.This icon will appear only when the form is in Edit mode, not in New mode.

  8. Vlastnosť OnSelect ikony koša nastavte na nasledujúci vzorec:Set the OnSelect property for the trash icon to this formula:

    Remove(Schedule; BrowseGallery1.Selected);; Navigate(ViewScreen; ScreenTransition.None)

    Keď používateľ vyberie túto ikonu, vybraný záznam sa odstráni zo zdroja údajov a otvorí sa obrazovka zobrazenia.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

Otestovanie aplikácieTest the app

  1. Vyberte položku ViewScreen a stlačením klávesu F5 (alebo výberom ikony Ukážka v pravom hornom rohu) otvorte ukážku.Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Otvorenie režimu ukážky

  2. Ak chcete zoznam filtrovať podľa mena dobrovoľníka, do vyhľadávacieho poľa zadajte alebo prilepte jedno či viac písmen.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. Ak chcete údaje zobraziť vo vzostupnom alebo zostupnom poradí podľa mena dobrovoľníka, jeden alebo viackrát vyberte ikonu zoradenia.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. Pridajte záznam.Add a record.

  5. Aktualizujte pridaný záznam a potom uložte zmeny.Update the record that you added, and then save the changes.

  6. Aktualizujte pridaný záznam a potom zrušte zmeny.Update the record that you added, and then cancel the changes.

  7. Odstráňte pridaný záznam.Delete the record that you added.

  8. Stlačením klávesu Esc zatvorte režim ukážky (alebo ho zatvorte výberom ikony na zatvorenie v pravom hornom rohu).Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

Ďalšie krokyNext steps

  • Stlačením kombinácie klávesov Ctrl + S uložte aplikáciu v cloude, aby ste ju mohli spustiť v iných zariadeniach.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Zdieľajte aplikáciu, aby ju mohli spustiť ostatní.Share the app so that other people can run it.
  • Získajte viac informácií o funkciách, ako je napríklad funkcia Patch, ktorú môžete použiť na správu údajov bez vytvárania štandardného formulára.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • Prepojte aplikáciu s riešením, aby ste ju napríklad mohli nasadiť v inom prostredí alebo publikovať v službe AppSource.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.