Előzmények nélküli új alkalmazás létrehozásaCreate an app from scratch

Saját alkalmazását több különböző adatforrás valamelyikének a használatával az alapoktól építheti el, és szükség esetén a későbbiekben további adatforrásokat is hozzáadhat.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Meghatározhatja a felhasználói felület egyes elemeinek megjelenését és viselkedését, hogy a leginkább igazodjanak a kitűzött célokhoz és a használt munkafolyamatokhoz.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Ez a módszer sokkal időigényesebb. mint az alkalmazások automatikus létrehozása, de tapasztalt alkalmazáskészítők igényeiknek megfelelően a legjobb alkalmazást hozhatják létre.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Megjegyzés

Ez a témakör a PowerApps Studio for Windowshoz íródott, a benne szereplő lépések azonban a böngészőben megnyitott PowerAppsre is vonatkoztathatók.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Az oktatóanyag lépéseit követve egy két képernyőt tartalmazó alkalmazást hozhat létre.By following this tutorial, you'll create an app that contains two screens. Az egyik képernyőn a felhasználók egy rekordkészletből tallózhatnak:On one screen, users can browse through a set of records:

A különböző adatok megtekintésére szolgáló képernyő

A másik képernyőn a felhasználók létrehozhatnak egy rekordot, frissíthetik a rekordok mezőit, illetve egy teljes rekordot is törölhetnek:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Az adatok hozzáadására és frissítésére szolgáló képernyő

ElőfeltételekPrerequisites

Az oktatóanyagot átfuthatja az általános fogalmak áttekintéséhez, vagy lépésről lépésre pontosan is végrehajthatja.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Másolja az adatokat, és illessze be egy Excel-fájlba.Copy this data, and then paste it into an Excel file.

    Kezdés napjaStart Day Kezdés időpontjaStart Time 1. önkéntesVolunteer 1 2. önkéntesVolunteer 2
    SzombatSaturday 10:00 – 12:0010am-noon VasquezVasquez KumashiroKumashiro
    SzombatSaturday 12:00 – 14:00noon-2pm IceIce SinghalSinghal
    SzombatSaturday 14:00 – 16:002pm-4-pm MykMyk MuellerMueller
    VasárnapSunday 10:00 – 12:0010am-noon LiLi AdamsAdams
    VasárnapSunday 10:00 – 12:0010am-noon SinghSingh MorganMorgan
    VasárnapSunday 10:00 – 12:0010am-noon BatyeBatye NguyenNguyen
  2. Formázza az adatokat egy Ütemezés nevű táblázatként, hogy a PowerApps értelmezni tudja az adatokat.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    További információkért lásd: Excel-táblázat létrehozása munkalapokon.For more information, see Create an Excel table in a worksheet.

  3. Mentse a fájlt az eventsignup.xls néven, majd töltse fel egy felhőbeli tárfiókba, például a OneDrive-ba.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. Ha először használja a PowerAppst:If you're new to PowerApps:

Üres alkalmazás létrehozása és adatokhoz csatlakozásCreate a blank app, and connect to data

  1. A PowerApps Studio felületén kattintson vagy koppintson a File (Fájl) menü New (Új) pontjára (a képernyő bal szélének közelében).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    A Fájl menü Új pontja

  2. Kattintson vagy koppintson a Telefonos elrendezés elemre az Üres alkalmazás csempén.On the Blank app tile, click or tap Phone layout.

    Alkalmazás létrehozásának lehetősége adatokból

  3. Ha a rendszer felajánlja, megtekintheti a PowerApps főbb területeit ismertető útmutatót (vagy kattintson/koppintson a Skip (Kihagyás) elemre).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Gyors bemutató

    A bemutatót később is bármikor megtekintheti a képernyő bal felső sarkának közelében található kérdőjel ikonra, majd a Take the intro tour (Bemutató megtekintése) elemre kattintva vagy koppintva.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. A bal oldali navigációs sáv jobb felső sarkában lévő ikonok valamelyikére kattintva vagy koppintva váltson miniatűr nézetre.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Váltás a nézetek között

  5. A jobb oldali ablaktáblán kattintson vagy koppintson az Adatforrás hozzáadása lehetőségre.In the right-hand pane, click or tap Add data source.

    Adatforrás hozzáadása

  6. Végezze el az alábbi lépések egyikét:Perform either of these steps:

    • Amennyiben már rendelkezik kapcsolattal a felhőalapú tárfiókhoz, kattintson vagy koppintson rá.If you already have a connection to your cloud-storage account, click or tap it.
    • Ha még nem rendelkezik kapcsolattal a felhőalapú tárfiókhoz, kattintson vagy koppintson az Add Connection (Kapcsolat hozzáadása) parancsra, kattintson vagy koppintson a fiók típusára, kattintson vagy koppintson a Connect (Csatlakozás) elemre, majd (ha a rendszer erre kéri) adja meg a hitelesítő adatokat.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. A Choose an Excel file (Excel-fájl kiválasztása) területen keresse meg a eventsignup.xlsx fájlt, majd kattintson vagy koppintson rá.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    A használni kívánt Excel-fájl megadása

  8. A Choose a table (Tábla kiválasztása) területen jelölje be a Schedule (Ütemezés) jelölőnégyzetet, majd kattintson vagy koppintson a Connect (Csatlakozás) elemre.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    A használni kívánt Excel-tábla megadása

    A jobb oldali ablaktábla Data sources (Adatforrások) lapján megjelennek az alkalmazáshoz hozzáadott adatforrások.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Csatlakoztatott adatforrások megjelenítése

    Ebben az oktatóanyagban csak egy adatforrásra van szükség, de később további adatforrásokat is hozzáadhat.This tutorial requires only one data source, but you can add more data sources later.

Az adatok megjelenítéseShow the data

  1. A Home (Kezdőlap) lapon kattintson vagy koppintson a New screen (Új képernyő) elemre, majd kattintson vagy koppintson a List screen (Képernyő listázása) elemre.In the Home tab, click or tap New screen and then click or tap List screen.

    Fejlécet, alcímet és törzselemet tartalmazó elrendezés hozzáadása

    A képernyő több alapértelmezett vezérlővel jelenik meg, például egy keresőmezőt tartalmazó és a katalógus vezérlővel.A screen is added with several default controls, such as a search box and a Gallery control. A katalógus a keresőmező alatti teljes képernyőterületet elfoglalja.The gallery covers the entire screen under the search box.

  2. Kattintson vagy koppintson bárhol a katalógusban, kivéve valamely nyílra, mint például közvetlenül a keresőmező alatt.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Katalógus kiválasztása

  3. A jobb oldali ablaktáblában nyissa meg az elrendezések listáját, majd kattintson vagy koppintson arra a lehetőséget, amely a címet, egy alcímet és a szervezetet jeleníti meg.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Katalógus kiválasztása

  4. A tulajdonságlistában kattintson vagy koppintson az Items (Elemek) lehetőségre, másolja ezt a képletet, majd illessze be a képletsávba:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Önkéntes_x0020_1"), "Önkéntes_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))

    Ha nem biztos abban, hogy hol található a tulajdonságlista esetén, olvassa el a vezérlők hozzáadásának és konfigurálásának módját.If you're not sure where the property list is, see Add and configure controls.

    Megjegyzés

    Azoknál az Excel- és SharePoint-adatforrásoknál, amelyekben szóközt tartalmazó oszlopnevek szerepelnek, a PowerApps az összes szóközt „_x0020_” karakterként jeleníti meg.For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". Ebben a példában az „Önkéntes 1” oszlop „Önkéntes_x0020_1” formában jelenik meg a képletekben.In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Ez a katalógus a Schedule (Ütemezés) tábla adatait jeleníti meg.This gallery shows the data from the Schedule table.

    A Schedule (Ütemezés) tábla adatai a katalógusban alapértelmezés szerint

    A keresőmező a felhasználó által beírt szöveg alapján szűrheti a katalógust.A search box can filter the gallery based on text that the user types. Ha a felhasználó legalább egy betűt beír a keresőmezőbe, a katalógus csak azokat a rekordokat jeleníti meg, amelyekhez a felhasználó által beírt szöveg található az 1. önkéntes mezőben.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.

    A rendezési gombbal a rekordok az 1. önkéntes oszlop adatai alapján rendezhetők.The sort button can sort the records based on data in the Volunteer 1 column. A felhasználó a gombra kattintva vagy koppintva válthat a növekvő és csökkenő rendezési sorrend között.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Ez a képlet a Sort, If, IsBlank, Filter és Text függvényeket tartalmazza.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Ezen és más függvényekkel kapcsolatos további információkért tekintse meg a képletreferenciátFor more information about these and other functions, see the formula reference

  5. Írjon be egy i karaktert a keresési mezőbe, és kattintson vagy koppintson egyszer a Rendezés gombra (vagy páratlan számú alkalommal).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    A katalógusban megjelennek az eredmények.The gallery shows these results.

    Katalógus rendezése és szűrése

    További információ a rendezéssel, szűréssel és egyéb funkciókkal kapcsolatbanMore information about the Sort, Filter, and other functions

  6. A képernyő felső részén kattintson vagy koppintson a Label (Címke) vezérlőre a kiválasztásához.Select the Label control at the top of the screen by clicking or tapping the control.

    Válassza ki a címsort

  7. A tulajdonságlistában kattintson vagy koppintson a Text (Szöveg) lehetőségre, másolja ezt a szöveget, majd illessze be a képletsávba.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "View Records""View Records"

    A címsor módosítása

A ChangeScreen képernyő és szalagcímének létrehozásaCreate the ChangeScreen and its banner

  1. Törölje a Screen1 képernyőt, és nevezze át a Screen2 képernyőt a ViewScreen névre.Delete Screen1, and rename Screen2 to ViewScreen.

    Képernyő átnevezése

  2. Adjon hozzá egy képernyőt, majd nevezze át a ChangeScreen névre.Add a screen, and rename it ChangeScreen.

    Képernyő hozzáadása és átnevezése

  3. Az Insert (Beszúrás) lapon kattintson vagy koppintson a Text (Szöveg), majd a Label (Címke) elemre.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Konfigurálja az előzőekben hozzáadott Label vezérlőt:Configure the Label control that you just added:

    • Állítsa be a Text (Szöveg) tulajdonsághoz a következő képletet:Set its Text property to this formula:
      „Change record” (Rekord módosítása)"Change record"

    • Állítsa be a Fill (Kitöltés) tulajdonsághoz a következő képletet:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Állítsa a Color (Szín) tulajdonsághoz a következő képletet:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Állítsa be az Align (Igazítás) tulajdonságot a Center (Középre) értékre.Set its Align property to Center.

    • Állítsa be az X tulajdonságát a 0 értékre.Set its X property to 0.

    • Állítsa be a Width tulajdonságát a 640 értékre.Set its Width property to 640. A Label (Címke) vezérlőelem a változásnak megfelelően módosul.The Label control reflects your changes.

      A ChangeScreen képernyő a szalagcímmel

Űrlap hozzáadása és konfigurálásaAdd and configure a form

  1. Az Insert (Beszúrás) lapon kattintson vagy koppintson a Forms (Űrlapok), majd az Edit (Szerkesztés) elemre.On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. Helyezze és méretezze át az űrlapot úgy, hogy a képernyő nagy részét lefedje.Move and resize the form to cover most of the screen.

    Űrlap hozzáadása

    Az űrlap neve alapértelmezés szerint Form1 (1. űrlap), kivéve, ha előzőleg már hozzáadott és eltávolított űrlapot.The form is named Form1 by default unless you already added and removed a form. Ebben az esetben nevezze át az űrlapot a Form1 (1. űrlap) névre.In that case, rename the form to Form1.

  3. Állítsa be a Form1 DataSource tulajdonságát a Schedule (Ütemezés) értékre.Set DataSource property of Form1 to Schedule.

  4. Állítsa be a Form1 Item (Elem) tulajdonságát a következő kifejezésre:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. Az egyes mezők megjelenítéséhez kattintson vagy koppintson a mezők jelölőnégyzetére a jobb oldali ablaktáblán.In the right-hand pane, click or tap the checkbox for each field to show it.

    Mezők megjelenítése az űrlapon

  6. Az űrlap alsó részén kattintson vagy koppintson az Add a custom card (Egyéni kártya hozzáadása) elemre.Near the bottom of the form, click or tap Add a custom card.

    Egyéni kártya hozzáadása

  7. Adjon hozzá egy Label (Címke) vezérlőt az új kártyához.Add a Label control in the new card.

  8. Állítsa az új vezérlő AutoHeight tulajdonságát true (igaz) értékűre, Text (Szöveg) tulajdonságánál pedig adja meg a következő képletet:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    A címke ekkor megjeleníti majd az űrlap hibáit.The label will show any errors from the form.

  9. A bal oldali navigációs sávon kattintson vagy koppintson a miniatűrre a ChangeScreen kiválasztásához.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. Az Insert (Beszúrás) lapon kattintson vagy koppintson az Icons (Ikonok) elemre, majd a Back arrow, (Vissza nyíl) hozzáadásának lehetőségére, végül pedig helyezze át a nyilat a képenyő bal alsó sarkába.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. A nyíl OnSelect (Kiválasztáskor) tulajdonságának állítsa be a következő képletet:Set the arrow's OnSelect property to this formula:

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

    Amikor a felhasználó a nyílra kattint vagy koppint, a Navigate (Navigálás) funkció a ViewScreen képernyőt nyitja meg.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Adjon hozzá egy Button (Gomb) vezérlőt az űrlap alatt, majd a gomb Text tulajdonságánál adja meg a következő szöveget: „Mentés”.Add a Button control under the form, and set the button's Text property to "Save".

    Mentés gomb hozzáadása

  13. A gomb OnSelect tulajdonságához adja meg a következő képletet: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))

    Ha a felhasználó a gombra kattint vagy koppint, a SubmitForm funkció menti az adatforrás módosításait, és újra megjelenik a ViewScreen képernyő.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. A képernyő alján adjon hozzá egy másik egy gombot, állítsa annak Text tulajdonságát „Eltávolítás” értékűre, majd az OnSelect tulajdonságnál adja meg a következő képletet: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))

    Ha a felhasználó erre a gombra kattint vagy koppint, a Remove (Eltávolítás) funkció eltávolítja a rekordot, és újra megjelenik a ViewScreen képernyő.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. A Remove (Eltávolítás) gomb Visible tulajdonságánál adja meg a következő képletet:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Ezzel a lépéssel elrejti a Remove (Eltávolítás) gombot, ha a felhasználó éppen rekordot hoz létre.This step hides the Remove button when the user is creating a record.

    A ChangeScreen ennek a példának megfelelően néz ki:The ChangeScreen matches this example:

    Az utolsó ChangeScreen

Navigáció beállítása a ViewScreen képernyőnSet navigation from ViewScreen

  1. A bal oldali navigációs sávon kattintson vagy koppintson a ViewScreen miniatűrjére.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    A ViewScreen megnyitása

  2. Kattintson vagy koppintson a katalógus első rekordjának Next (Tovább) nyilára.Click or tap the Next arrow for the first record in the gallery.

    Tovább nyíl

  3. Adja meg a nyíl OnSelect tulajdonságához a következő képletet:Set the OnSelect property of that arrow to this formula:

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

  4. A jobb felső sarokban kattintson vagy koppintson a plusz ikonra.In the upper-right corner, click or tap the plus icon.

    Rekord hozzáadása

  5. A kiválasztott ikon OnSelect tulajdonságához adja meg a következő képletet:Set the OnSelect property of the selected icon to this formula:

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

    Ha a felhasználó erre az ikonra kattint vagy koppint, megjelenik a ChangeScreen képernyő, amelynek minden mezője üres, így a felhasználó könnyebben hozhat létre rekordot.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Az alkalmazás futtatásaRun the app

Az alkalmazás testreszabása során az alkalmazásnak a Preview (Előnézet) módban való futtatásával tesztelheti a módosításokat, a jelen szakaszban ismertetett lépéseket végrehajtva.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. A bal oldali navigációs sávon kattintson vagy koppintson a felső miniatűrre a ViewScreen kiválasztásához.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    A ViewScreen kiválasztása

  2. Nyissa meg az előnézeti módot az F5 billentyű lenyomásával (vagy a jobb felső sarok közelében lévő előnézeti ikonra kattintva vagy koppintva).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Előnézet mód megnyitása

  3. Kattintson vagy koppintson az adott rekordhoz tartozó Tovább nyílra a rekord részleteinek megjelenítéséhez.Click or tap the Next arrow for a record to show details about that record.

  4. A ChangeScreen képernyőn módosítsa egy vagy több mező információit, majd a Save (Mentés) gombra kattintva vagy koppintva mentse a módosításokat, vagy távolítsa el a rekordot a Remove (Eltávolítás) gomb segítségével.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. Zárja be az Előnézet módot az Esc billentyű lenyomásával (vagy a címsor alatti bezárási ikonra kattintva vagy koppintva).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Előnézet mód bezárása

Következő lépésekNext steps