Oprettelse af en app vha. SharePointCreating an app from SharePoint

Opret en app med tre skærme fra en SharePoint-liste, og udforsk derefter skærme og kontrolelementer fra appen.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Opdater appskærme, kontrolelementer og felter, og brug formler til yderligere at tilpasse appens funktionsmåder.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Du vil lære, hvordan du...

Generér en appGenerate an app

I denne del af kurset, skal vi oprette en app ud fra SharePoint-listen "Flooring Estimates"(Overslag på gulvbelægning).In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. Appen gør det f.eks. muligt for en taksator, der er ude hos en kunde, at kigge på listen og holde den opdateret.The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. I introduktionen viste vi dig, hvordan du opretter en app ud fra den samme liste – så hvorfor se på den igen?In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? For det første viser vi dig nu, hvordan PowerApps er integreret i SharePoint Online, i stedet for at begynde i PowerApps Studio.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. For det andet dykker vi dybere ned i, hvordan appen er sammensat, og viser dig, hvordan du tilpasser den.Second, we dig deeper into how the app is put together, and show you how to customize it. Du vil helt sikkert få nogle nye oplysninger, når du gennemgår dette afsnit, så lad os komme i gang!You'll definitely get some new information going through this section, so let's jump in!

Opret appenGenerate the app

På billedet nedenfor kan du se SharePoint-listen "Flooring Estimates" (Overslag på gulvbelægning), der indeholder grundlæggende oplysninger, som navn og pris og et billede af hver type gulvbelægning.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Du kan se, hvordan PowerApps og Microsoft Flow nu er integreret i SharePoint Online, så du nemt kan bygge apps og flow fra listerne.You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Listen Flooring Estimates

Hvis du vil bygge en app, skal du klikke på PowerApps og derefter Create an app (Opret en app).To build an app, click PowerApps, then Create an app. Angiv et navn til appen i ruden til højre, og klik derefter på Create (Opret).In the right hand pane, enter a name for the app, then click Create. Når du har klikket på Create (Opret), oprettes appen ved hjælp af PowerApps.After you click Create, PowerApps starts to generate the app. I PowerApps udledes der mange forskellige ting på basis af dine data, så der oprettes en nyttig app som udgangspunkt.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Opret app fra liste

Se appen i PowerApps StudioView the app in PowerApps Studio

Din nye app med tre skærme åbnes i PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Alle apps, der oprettes ud fra data, har det samme sæt skærme:All apps generated from data have the same set of screens:

  • Gennemgangsskærmen, hvor du gennemser, sorterer, filtrerer og opfrisker de data, der hentes fra listen, samt tilføjer varer ved at klikke på ikonet (+).The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • Detaljeskærmen, hvor du kan få vist flere oplysninger om en vare og vælge at slette eller redigere varen.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • Redigerings-/oprettelsesskærmen, hvor du kan redigere en eksisterende vare eller oprette en ny.The edit/create screen: where you edit an existing item or create a new one.

Klik eller tryk på et ikon øverst til højre på navigationslinjen i venstre side for at skifte til miniaturevisning.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Skift mellem visninger

Klik eller tryk på hvert miniaturebillede for at få vist kontrolelementerne på den pågældende skærm.Click or tap each thumbnail to view the controls on that screen.

Den oprettede app

Kør appen i eksempelvisningRun the app in preview mode

Klik eller tryk påClick or tap pilen til eksempelvisning af appen i øverste højre hjørne for at køre appen.in the top-right corner to run the app. Hvis du navigerer gennem appen, kan du se, at den indeholder alle dataene fra listen og giver en god standardoplevelse.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

Kør appen i eksempelvisning

I det følgende vil vi udforske appen yderligere og derefter tilpasse den, så passer bedre til vores behov.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Udforsk en oprettet appExplore a generated app

I dette emne kigger vi nærmere på den oprettede app og gennemser skærmene og de kontrolelementer, der definerer appens funktionsmåde.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Vi kan ikke gennemgå alle detaljer, men det indblik du får i appens funktioner, hjælper dig med at bygge dine egne apps.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. I et senere emne kigger vi på de formler, der kan bruges sammen med skærme og kontrolelementer.In a later topic, we'll look at the formulas that work with screens and controls.

Om kontrolelementerne i PowerAppsUnderstanding controls in PowerApps

Et kontrolelement er blot et element i brugergrænsefladen, der har en funktionsmåde tilknyttet.A control is simply a UI element that has behaviors associated with it. Mange kontrolelementer i PowerApps er de samme som de kontrolelementer, du bruger i andre apps: etiketter, tekstinputfelter, rullelister, navigationselementer osv.Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. Men PowerApps omfatter mere specialiserede kontrolelementer, som Gallery (Galleri) (der viser oversigtsdata) og Forms (Formularer) (der viser detaljerede data og giver dig mulighed for at oprette og redigere varer).But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). Og derudover også nogle ret seje kontrolelementer, som Image (Billede), Camera (Kamera) og Barcode (Stregkode).And also some other really cool controls like Image, Camera, and Barcode. Klik eller tryk på Indsæt på båndet for at se, hvad der er tilgængeligt, og klik eller tryk derefter på de forskellige muligheder efter tur – fra Tekst til og med Ikoner.To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Fanen Controls (Kontrolelementer) på båndet i PowerApps Studio

Udforsk gennemgangsskærmenExplore the browse screen

Hver af de tre appskærme har et primært kontrolelement og nogle ekstra kontrolelementer.Each of the three app screens has a main control and some additional controls. Den første skærm i appen er gennemgangsskærmen, der som standard har navnet BrowseScreen1.The first screen in the app is the browse screen, named BrowseScreen1 by default. Det primære kontrolelement på denne skærm er et galleri med navnet BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 indeholder andre kontrolelementer, som NextArrow1 (et ikonkontrolelement, som du kan klikke eller trykke på for at gå til detaljeskærmen).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). Der er også separate kontrolelementer på skærmen, som IconNewItem1 (et ikonkontrolelement – klik eller tryk på det for at oprette et element på oprettelses-/redigeringsskærmen).There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Gennemgangsskærm med kontrolelementer

PowerApps har en række forskellige gallerityper, så du kan bruge den, der passer bedst til de layoutkrav, du har til din app.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Du kan se flere måder at styre layouts på senere i dette afsnit.You will see more ways to control layout later in this section.

Indstillinger for gallerier i PowerApps

Udforsk detaljeskærmenExplore the details screen

Derefter kommer detaljeskærmen, der som standard har navnet DetailScreen1.Next is the details screen, named DetailScreen1 by default. Det primære kontrolelement på denne skærm er en visningsformular med navnet DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 indeholder andre kontrolelementer, som DataCard1 (i dette tilfælde et kortkontrolelement, der viser kategorien Flooring (Gulvbelægning)).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). Der er også separate kontrolelementer på skærmen, som IconEdit1 (et ikonkontrolelement – klik eller tryk på det for at redigere den aktuelle vare på oprettelses-/redigeringsskærmen).There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Detaljeskærm med kontrolelementer

Der er masser af galleriindstillinger, men formularer er mere ligetil – det er enten en redigeringsformular eller en visningsformular.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Indstillinger for formularer i PowerApps

Udforsk oprettelses-/redigeringsskærmenExplore the edit/create screen

Den tredje skærm i appen er oprettelses-/redigeringsskærmen, der som standard har navnet EditScreen1.The third screen in the app is the edit/create screen, named EditScreen1 by default. Det primære kontrolelement på denne skærm er en redigeringsformular med navnet EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 indeholder andre kontrolelementer, som DataCard8 (et kortkontrolelement, der i dette tilfælde gør det muligt for dig at redigere kategorien Flooring).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). Der er også separate kontrolelementer på skærmen, som IconAccept1 (et ikonkontrolelement – klik eller tryk på det for at gemme de ændringer, du har foretaget på oprettelses-/redigeringsskærmen).There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Rediger skærme med kontrolelementer

Nu har du fået en fornemmelse af, hvordan programmet er sammensat af skærme og kontrolelementer, og vi skal herefter se på, hvordan du kan tilpasse appen i det næste emne.Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Tilpas appenCustomize the app

I de første to emner i dette afsnit, oprettede du en app ud fra en SharePoint-liste og udforskede appen for at få en bedre forståelse af, hvordan apps med tre skærme er sammensat.In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. Den app, der oprettes i PowerApps, er nyttig, men du har ofte brug for at tilpasse en app, efter at den er oprettet.The app that PowerApps generated is useful, but you will often customize an app after it's generated. I dette emne gennemgår vi nogle grundlæggende ændringer af appens forskellige skærme.In this topic, we'll walk through some basic changes for each screen in the app. Der er meget mere du kan gøre for at tilpasse en app–- det kommer vi til i nogle af de senere emner.There is a lot more you can do to customize an app - we'll get to that in later topics. I mellemtiden kan du bygge videre på det, du får at vide i dette emne.In the meantime, you can take what you learn in this topic and build on it. Tag en hvilken som helst app, du har oprettet – ud fra en liste, en Excel-fil eller en anden kilde – og se, hvordan du kan tilpasse den.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. Det er den allerbedste måde, når du skal have indblik i, hvordan en app er opbygget.It really is the best way to learn how apps are put together.

GennemgangsskærmBrowse screen

Vi starter med gennemgangsskærmen.We'll start with the browse screen. SharePoint-listen indeholder et billede for hvert produkt, men billedet vises ikke som standard.The SharePoint list contains an image for each product but the image isn't displayed by default. Lad os rette det.Let's fix that. Vælg et andet layout til gennemgangsskærmen under fanen Layout i ruden til højre.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Du kan se resultaterne med det samme, for PowerApps opdaterer appsene, efterhånden som du foretager ændringerne.You see the results right away because PowerApps updates the app as you make changes.

Rediger gennemgangsskærmens layout

Med det rigtige basislayout kan du nu ændre de felter, der vises.With the right basic layout, now change the fields that are displayed. Klik eller tryk på et felt i den første vare, og rediger derefter de data, der vises for hver vare, i ruden til højre.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Dette giver en bedre oversigt over de enkelte varer på listen.This provides a better summary of each item in the list.

Rediger gennemgangsskærmens felter

DetaljeskærmDetails screen

På detaljeskærmen vil vi ændre felternes rækkefølge og desuden have vist billedet.On the details screen, we want to change the order of the fields and display the image also. Der er forskellige kontrolelementer på skærmen, så processen er en smule anderledes end på gennemgangsskærmen.There are different controls on this screen, so the process is a little different from the browse screen. Klik eller tryk på et felt, og træk derefter feltet Title (Titel) til toppen af skærmen.Click or tap a field, then in the right-hand pane, drag the Title field to the top. Klik eller tryk derefter på feltet Image (Billede) for at få det vist.Then click or tap the Image field to display it.

Rediger detaljeskærmens felter

Redigerings-/oprettelsesskærmEdit/create screen

Til sidst vil vi ændre et felt på skærmen, hvor du kan redigere og oprette poster, så det bliver nemmere at skrive tekst.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Klik eller tryk på rullelisten for feltet Oversigt, og klik eller tryk derefter på kontrolelementet af typen Edit Multi-line Text.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Rediger redigeringsskærmens felter

Du kan se, hvordan du med nogle få grundlæggende trin kan gøre meget for at forbedre en oprettet apps udseende og brugeroplevelse.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. I dette emne fokuserede vi på brugergrænsefladen i PowerApps Studio, der omfatter en lang række muligheder for at tilpasse apps.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. Det næste emne omhandler formler, der spiller en vigtig rolle for en apps funktionsmåde.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Udforsk appformlerExplore app formulas

En af de største fordele ved PowerApps er, at du ikke behøver at skrive traditionel programkode – du behøver ikke at være udvikler for at oprette apps!One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! Men du skal stadig bruge en måde at udtrykke logik på i en app og styre en apps navigations-, filtrerings og sorteringsfunktioner samt andre funktioner.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. Det er her, formlerne kommer ind.This is where formulas come in. Hvis du har brugt Excel-formler, kender du lidt til den fremgangsmåde, der også skal bruges i PowerApps.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. I dette emne vil vi vise et par grundlæggende formler til tekstformatering og derefter gennemgå tre af de formler, PowerApps medtager i den oprettede app.In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. Du får en forsmag på, hvad formler kan bruges til.You will get a taste of what formulas can do. Derefter kan du bruge lidt tid på at kigge på nogle af de andre formler i den oprettede app og skrive dine egne.Then you can spend some time looking at other formulas in the generated app and writing your own.

Om formler og egenskaberUnderstanding formulas and properties

I det forrige emne medtog vi feltet Price (Pris) i galleriet på gennemgangsskærmen, men prisen blev vist som et almindeligt tal uden et valutasymbol.In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Lad os antage, at vi vil tilføje et dollartegn og også ændre tekstens farve, afhængigt af hvor meget varen koster (f.eks. rød, hvis den koster mere 5 USD, og ellers grøn).Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). Du kan se ideen på følgende billede.The following image shows the idea.

Tekstformatering for farve og valuta

Lad os starte med valutaformateringen.Let's start with the currency formatting. Som standard henter PowerApps blot en prisværdi for hver vare, der er angivet som egenskaben Text i det navn, hvor prisen vises.By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Standardformatering af prisen

Hvis du vil tilføje valutasymbolet for USD, skal du klikke eller trykke på navnekontrolelementet og angive egenskaben Text til denne formel.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Formatering af prisens valuta

Formlen: Text(Price, "[$-en-US]$ ##.00" bruger funktionen Text til at angive, hvordan antallet skal formateres.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. Formlen fungerer som en Excel-formel, men PowerApps-formler refererer til kontrolelementer og andre appelementer i stedet for celler i et regneark.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Hvis du klikker eller trykker på et kontrolelement og derefter klikker eller trykker på rullelisten med egenskaber, kan du se en liste over egenskaber, der er relevante for kontrolelementet.If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. Her er f.eks. en ufuldstændig liste over egenskaberne for et navn.For example, here is a partial list of the properties for a label. Nogle egenskaber er relevante på tværs af en lang række kontrolelementer og andre kun for et bestemt kontrolelement.Some properties are relevant across a broad range of controls and others only for a specific control.

Angivelse af egenskaber

Hvis du vil formatere farven på basis af prisen, skal du bruge en formel som den følgende for egenskaben Color for navnet: If(Price > 5, Color.Red, Color.Green).To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Formatering af prisens farve

Formler, der er inkluderet i den oprettede appFormulas included in the generated app

Nu forstår du, hvordan du kan bruge formler i forbindelse med egenskaber, og vi vil herefter kigge på tre eksempler på formler, der bruges i den oprettede app i PowerApps.Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. Eksemplerne er alle fra gennemgangsskærmen og bruges sammen med egenskaben OnSelect, der definerer, hvad der sker, når en bruger klikker eller trykker på et kontrolelement i en app.The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • Den første formel er knyttet til kontrolelementet IconNewItem1: Ikon for ny vare.The first formula is associated with the IconNewItem1 control: New item icon. Du klikker på eller tryk på dette kontrolelement for at gå fra gennemgangsskærmen til redigerings-/oprettelsesskærmen og oprette en vare.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • Formlen er NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • Formlen instantierer en ny redigeringsformular og flytter derefter til oprettelses-/redigeringsskærmen, så du kan oprette en ny vare.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. En værdi på ScreenTransition.None betyder, at der ikke er nogen overgang mellem skærme (f.eks. en tone).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • Den anden formel er knyttet til kontrolelementet IconSortUpDown1: Ikon for sortering af galleri.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Du skal klikke eller trykke på dette kontrolelement for at sortere listen over varer i galleriet på gennemgangsskærmen.You click or tap this control to sort the list of items in the browse screen gallery.

    • Formlen er UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • Formlen bruger UpdateContext til at opdatere en variabel med navnet SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. Variablens værdi skifter frem og tilbage, mens du klikker på kontrolelementet.The value of the variable switches back and forth as you click the control. Dette fortæller galleriet på denne skærm, hvordan varerne skal sorteres (se videoen for at få flere oplysninger).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • Den tredje formel er knyttet til kontrolelementet NextArrow1: Pileikon for navigering til oplysninger.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Du skal klikke eller trykke på dette kontrolelement for at gå fra gennemgangsskærmen til detaljeskærmen.You click or tap this control to go from the browse screen to the details screen.

    • Formlen er Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • Ved hjælp af formlen navigeres der til detaljeskærmen, igen uden overgang.The formula navigates to the details screen, again with no transition.

Der er mange andre formler i appen, så brug lidt tid på at klikke på kontrolelementer og se, hvilke formler der er angivet for forskellige egenskaber.There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

SammenfatningWrapping it all up

Hermed er vi nået til vejs ende i udforskningen af den oprettede app og de skærme, kontrolelementer, egenskaber og formler, der udgør appens funktionalitet.This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. Hvis du har fulgt kurset, har du nu fået en bedre forståelse af, hvordan en oprettet app fungerer.If you've followed along, you should have a better understanding of how a generated app works. Nu kan du bruge din nye viden til at oprette dine egne apps.Now you can take this understanding into creating your own apps.

Inden du går videre til næste afsnit, vil vi vende tilbage til SharePoint og vise dig, hvordan appen nu er integreret i en liste.Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. Som du kan se, fungerer FlooringApp nu som en visning af listen, og du starter appen ved at klikke på Open (Åbn).As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Dette gør det muligt for dig at administrere dine lister på en enkel og brugervenlig måde.This provides a simple way to manage your lists with a friendly customized experience.

App som visning af Sharepoint-liste

Nu, hvor du har gennemgået afsnittet om SharePoint-apps, kan du vælge, hvilket emne du vil gå til:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

I afsnittet om administration viser vi dig, hvordan du deler apps og styrer appversioner, og vi introducerer miljøer, som er objektbeholdere for apps, data og andre ressourcer.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. Vi anbefaler, at alle gennemgår afsnittet om administration på et tidspunkt, men afsnittet om Common Data Service indeholder også nogle nyttige oplysninger, herunder flere oplysninger om apptilpasning.We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

Tillykke!

Du har fuldført afsnittet Oprettelse af en app vha. SharePoint i Automatiseret læring til Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Du har lært, hvordan du...

Næste selvstudium

Oprettelse af en app vha. Common Data ServiceCreating an app from the Common Data Service

Bidragydere

  • Michael Blythe
  • olprod
  • Alisha-Acharya