Skapa en app från SharePointCreating an app from SharePoint

Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Update app screens, controls, and fields; and use formulas to further customize app behavior.

Du kommer lära dig att...

Skapa en appGenerate an app

I det här avsnittet av kursen skapar vi en app från SharePoint-listan Golvbeläggningsuppskattningar.In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. Appen kan användas av någon som t.ex. gör uppskattningar hos kunder och som refererar till listan för att hålla den uppdaterad.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 avsnittet Komma igång visade vi dig hur du kan generera en app från samma lista – så varför tar vi upp 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? I stället för att starta i PowerApps Studio visar vi dig nu till att börja med hur PowerApps är integrerat i SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Därefter tar vi en närmare titt på hur appen är sammansatt, och visar dig hur du kan anpassa den.Second, we dig deeper into how the app is put together, and show you how to customize it. Det här avsnittet kommer definitivt att ge dig matnyttig information. Så låt oss sätta igång!You'll definitely get some new information going through this section, so let's jump in!

Generera appenGenerate the app

Följande bild visar SharePoint-listan Golvbeläggningsuppskattningar, som innehåller grundläggande information, t.ex. namn, pris och en bild på varje typ av golv.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 hur PowerApps och Microsoft Flow nu har integrerats i SharePoint Online, så att du enkelt kan skapa appar och flöden från dina listor.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.

Listan Golvbeläggningsuppskattningar

Om du vill skapa en app klickar du på PowerApps och sedan på Skapa en app.To build an app, click PowerApps, then Create an app. Skriv ett namn för appen i den högra rutan och klicka sedan på Skapa.In the right hand pane, enter a name for the app, then click Create. När du har klickat på Skapa börjar PowerApps generera appen.After you click Create, PowerApps starts to generate the app. PowerApps kan dra olika slags slutsatser om dina data, och därigenom generera en användbar app som utgångspunkt.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Generera appen från listan

Visa appen i PowerApps StudioView the app in PowerApps Studio

Din nya treskärmsapp öppnas i PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Alla appar som genereras av data har samma skärmuppsättning:All apps generated from data have the same set of screens:

  • Skärmen för bläddring: här bläddrar du och sorterar, filtrerar och uppdaterar data som hämtats från listan, och lägger till objekt genom att klicka på plusikonen (+).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.
  • Skärmen för information: här visar du detaljerad information om ett objekt, och kan välja att ta bort eller redigera objektet.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • Skärmen för att redigera/skapa: här kan du redigera ett befintligt objekt eller skapa ett nytt.The edit/create screen: where you edit an existing item or create a new one.

I det vänstra navigeringsfältet kan du klicka eller trycka på en ikon i det övre högra hörnet för att växla till miniatyrvisning.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Växla vyer

Klicka eller tryck på varje miniatyr om du vill visa kontrollerna på den skärmen.Click or tap each thumbnail to view the controls on that screen.

Den genererade appen

Kör appen i förhandsgranskningslägeRun the app in preview mode

Klicka eller tryck påClick or tap pilen Starta förhandsgranskning av app i det övre högra hörnet, så körs appen.in the top-right corner to run the app. Om du navigerar i appen ser du att den innehåller alla data från listan och att den ger en bra standardupplevelse.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 förhandsgranskningsläge

Härnäst ska vi utforska appen mer i detalj, och sedan anpassa appen så att den bättre passar våra behov.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Utforska den genererade appenExplore a generated app

I det här avsnittet tittar vi närmare på den genererade appen, och granskar de skärmar och kontroller som definierar appens beteende.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Vi går inte in i minsta detalj, men en mer övergripande bild av hur den här appen fungerar hjälper dig att skapa dina egna appar.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 ett avsnitt längre fram tittar vi närmare på de formler som fungerar med skärmar och kontroller.In a later topic, we'll look at the formulas that work with screens and controls.

Kontroller i PowerAppsUnderstanding controls in PowerApps

En kontroll är enkelt uttryckt ett UI-element som har vissa beteenden kopplade till sig.A control is simply a UI element that has behaviors associated with it. Många av kontrollerna i PowerApps är samma som de som du har använt i andra appar: etiketter, textrutor, listrutor, navigeringselement och så vidare.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 har mer specialiserade kontroller som Gallerier (som visar sammanfattningsdata) och Formulär (som visar detaljerad information om data och gör det möjligt för dig att skapa och redigera objekt).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). Det finns även andra riktigt coola kontroller som Bild, Kamera och Streckkod.And also some other really cool controls like Image, Camera, and Barcode. Om du vill se vad som är tillgängligt klickar eller trycker du på Infoga på menyfliken och klickar eller trycker sedan på alternativen i tur och ordning från Text till 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.

Fliken Kontroller i PowerApps Studio-menyfliksområdet

Utforska bläddringsskärmenExplore the browse screen

Var och en av de tre appskärmarna har en överordnad kontroll och några ytterligare kontroller.Each of the three app screens has a main control and some additional controls. Den första skärmen i appen är bläddringsskärmen, med standardnamnet BrowseScreen1.The first screen in the app is the browse screen, named BrowseScreen1 by default. Huvudkontrollen på den här skärmen är ett galleri med namnet BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 innehåller andra kontroller, t.ex. NextArrow1 (en ikonkontroll). Öppna informationsskärmen genom att klicka eller trycka på ikonen.BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). Det finns även separata kontroller på skärmen, t.ex. IconNewItem1 (en ikonkontroll). Du kan skapa ett objekt på skärmen för att redigera/skapa genom att klicka eller trycka på ikonen.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).

Bläddringsskärm med kontroller

PowerApps innehåller olika typer av gallerier. Använd det som bäst passar din apps layoutkrav.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Fler sätt att kontrollera layouten på beskrivs längre fram i det här avsnittet.You will see more ways to control layout later in this section.

Gallerialternativ i PowerApps

Utforska informationsskärmenExplore the details screen

Nästa är skärm är informationsskärmen, med standardnamnet DetailScreen1.Next is the details screen, named DetailScreen1 by default. Huvudkontrollen på den här skärmen är ett visningsformulär som heter DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 innehåller andra kontroller, t.ex. DataCard1 (en kortkontroll som i det här fallet visar en golvkategori).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). Det finns även separata kontroller på skärmen, t.ex. IconEdit1 (en ikonkontroll). Du kan redigera ett objekt på skärmen för att redigera/skapa genom att klicka eller trycka på ikonen.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).

Informationsskärm med kontroller

Det finns många olika gallerialternativ, men formulär är enklare – de är antingen redigeringsformulär eller visningsformulär.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Formuläralternativ i PowerApps

Utforska skärmen för att redigera/skapaExplore the edit/create screen

Den tredje skärmen i appen är skärmen för att redigera/skapa, vilken har standardnamnet EditScreen1.The third screen in the app is the edit/create screen, named EditScreen1 by default. Huvudkontrollen på den här skärmen är ett redigeringsformulär som heter EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 innehåller andra kontroller, t.ex. DataCard8 (en kortkontroll med vilken du i det här fallet kan redigera golvkategorin).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). Det finns även separata kontroller på skärmen, t.ex. IconAccept1 (en ikonkontroll). Du kan spara de ändringar du gjort på skärmen för att redigera/skapa genom att klicka eller trycka på ikonen.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).

Redigeringsskärm med kontroller

Nu när du har fått en överblick av hur appen är uppbyggd av skärmar och kontroller ska vi i nästa avsnitt titta närmare på hur du kan anpassa appen.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.

Anpassa appenCustomize the app

I de första två avsnitten i den här sektionen genererade du en app från en SharePoint-lista och utforskade appen för att bättre förstå hur treskärmsapparna är uppbyggda.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 som PowerApps genererade är användbar men ofta kan man behöva anpassa en app efter det att den har genererats.The app that PowerApps generated is useful, but you will often customize an app after it's generated. I det här avsnittet ska vi gå igenom några grundläggande ändringar för varje skärm i appen.In this topic, we'll walk through some basic changes for each screen in the app. Det är mycket mer du kan göra om du vill anpassa en app, men det tar vi upp i senare avsnitt.There is a lot more you can do to customize an app - we'll get to that in later topics. Till att börja med kan du läsa det här avsnittet och sedan bygga vidare härifrån.In the meantime, you can take what you learn in this topic and build on it. Ta vilken app som helst som du har genererat – från en lista, en Excel-fil eller en annan källa – och se hur du kan anpassa den.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. Det är faktiskt det bästa sättet om man vill lära dig hur appar är konstruerade.It really is the best way to learn how apps are put together.

BläddringsskärmenBrowse screen

Vi börjar med bläddringsskärmen.We'll start with the browse screen. SharePoint-listan innehåller en bild för varje produkt, men bilden visas inte som standard.The SharePoint list contains an image for each product but the image isn't displayed by default. Låt oss fixa det.Let's fix that. Välj en annan layout för bläddringsskärmen i rutan till höger på fliken Layout.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Resultaten visas direkt eftersom PowerApps uppdaterar appen i takt med att du gör ändringarna.You see the results right away because PowerApps updates the app as you make changes.

Anpassa bläddringsskärmens layout

Med grundlayouten i botten så ändra nu de fält som visas.With the right basic layout, now change the fields that are displayed. Klicka eller tryck på ett fält i det första objektet och ändra sedan de data som visas för varje objekt i rutan till höger.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Detta ger en bättre sammanfattning av varje objekt i listan.This provides a better summary of each item in the list.

Anpassa bläddringsskärmens fält

InformationsskärmenDetails screen

Vi vill ändra den ordning i vilken fälten visas på informationsskärmen, och vi vill också visa bilden.On the details screen, we want to change the order of the fields and display the image also. Det finns olika kontroller på den här skärmen, så processen skiljer sig något från bläddringsskärmen.There are different controls on this screen, so the process is a little different from the browse screen. Klicka eller tryck på ett fält i den högra rutan och dra sedan fältet Rubrik så att det hamnar högst upp.Click or tap a field, then in the right-hand pane, drag the Title field to the top. Klicka eller tryck sedan på fältet Bild så att det visas.Then click or tap the Image field to display it.

Anpassa informationsskärmens fält

Redigera/skapa-skärmenEdit/create screen

På den skärm där du kan redigera och skapa poster vill vi avslutningsvis ändra ett fält så att det blir lättare att ange text.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Klicka på eller tryck på listrutan för fältet Översikt och klicka eller tryck sedan på kontrollen Redigera flerrads-text.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Anpassa redigeringsskärmens fält

Du ser hur du med några få enkla steg kan förbättra en genererad apps utseende och funktioner.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. I det här avsnittet har vi fokuserat på användargränssnittet i PowerApps Studio, vilket erbjuder en mängd olika alternativ för hur du kan anpassa dina appar.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. I nästa avsnitt tar vi upp formler, vilka spelar en viktig roll för apparnas beteende.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Utforska appformlerExplore app formulas

En av de största fördelarna med PowerApps är att man inte behöver skriva traditionell programkod – du behöver inte vara utvecklare för att skapa appar!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 behöver fortfarande veta hur du uttrycker logik i en app och hur du hanterar navigering, filtrering, sortering och andra funktioner i appen.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 är här som formlerna kommer in.This is where formulas come in. Om du har använt Excel-formler tidigare känns nog den metod som PowerApps använder välbekant.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. I det här avsnittet vi visar några grundläggande formler för textformatering och går sedan igenom tre av de formler som PowerApps inkluderar i den genererade appen.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 känsla för vad formler kan göra.You will get a taste of what formulas can do. Du kan sedan ägna lite tid åt att studera andra formler i den genererade appen och skriva egna.Then you can spend some time looking at other formulas in the generated app and writing your own.

Förstå formler och egenskaperUnderstanding formulas and properties

I det föregående avsnittet inkluderade vi prisfältet i bläddringsskärmens galleri, men den visades som ett enkelt tal utan någon 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. Anta att vi vill lägga till ett dollartecken och även ändra textfärg beroende på hur mycket objektet kostar (till exempel rött om det är mer än 5 dollar, annars grönt).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). Följande bild visar idéen.The following image shows the idea.

Textformatering för färg och valuta

Låt oss börja med valutaformateringen.Let's start with the currency formatting. Som standard drar PowerApps bara in ett prisvärde för varje objekt, vilket anges som Text-egenskap för den etikett som visar priset.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 för pris

Om du vill lägga till en dollarvalutasymbol klickar eller trycker du på etikettkontrollen och i formelfältet anger du Textegenskap för den här formeln.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Prisets valutaformatering

Formeln – Text(Price, "[$-en-US]$ ##.00" använder Textfunktionen för att ange hur siffran ska formateras.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. Formeln fungerar som en Excel-formel, men PowerApps-formlerna refererar till kontroller och andra appelement istället för till celler i ett kalkylblad.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Om du klickar eller trycker på en kontroll och sedan klickar eller trycker på den nedrullningsbara listrutan för egenskap kommer du att se en lista över egenskaper som är relevanta för kontrollen.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. Här är till exempel från en lista över egenskaper för en etikett.For example, here is a partial list of the properties for a label. Vissa egenskaper är relevanta för många kontroller och andra endast för en viss kontroll.Some properties are relevant across a broad range of controls and others only for a specific control.

Ange egenskaper

Om du vill formatera färgen baserat på priset använder du en formel som de här för etikettens egenskap Färg: 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).

Prisets färgformatering

Formler som ingår i den genererade appenFormulas included in the generated app

När du nu förstår hur du kan använda formler tillsammans med egenskaper ska vi titta på tre exempel på formler som PowerApps använder i den genererade appen.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. Exemplen är alla från bläddringsskärmen och arbetar med OnSelect-egenskapen, som definierar vad som händer när en användare klickar eller trycker på en appkontroll.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örsta formeln är kopplad till IconNewItem1-kontrollen: Nytt objekt-ikonen.The first formula is associated with the IconNewItem1 control: New item icon. Du klickar eller trycker på den här kontrollen för att gå från bläddringsskärmen till redigera/skapa-skärmen och skapar ett objekt.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • Formeln är NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • Formeln exemplifierar ett nytt redigeringsformulär och navigerar därefter till redigera/skapa-skärmen så att du kan skapa ett nytt objekt.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. Värdet ScreenTransition.None innebär att det inte är någon övergång mellan skärmar (som till exempel en övertoning).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • Den andra formeln är kopplad till IconSortUpDown1-kontrollen: Sortera galleriet-ikonen.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Du klickar eller trycker på den här kontrollen för att sortera listan över objekt i bläddringsskärmens galleri.You click or tap this control to sort the list of items in the browse screen gallery.

    • Formeln är UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • Formeln använder UpdateContext för att uppdatera en variabel som kallas SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. Variabelns värde växlar fram och tillbaka när du klickar på kontrollen.The value of the variable switches back and forth as you click the control. Detta informerar galleriet på den här skärmen hur det ska sortera objekten (visa videoklippet för mer information).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • Den tredje formeln är kopplad till NextArrow1-kontrollen: Gå till informationpil-ikonen.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Du klickar eller trycker på den här kontrollen för att gå från bläddringsskärmen till informationsskärmen.You click or tap this control to go from the browse screen to the details screen.

    • Formeln är Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • Formeln navigerar till informationsskärmen, igen utan någon övergång.The formula navigates to the details screen, again with no transition.

Det finns många andra formler i appen, så ta ägna lite tid åt att klicka på kontroller och se vilka formler som har angetts för olika egenskaper.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.

SammanfattningWrapping it all up

Därmed avslutar vi detta avsnitt om utforskandet av den genererade appen och genomgången av skärmar, kontroller, egenskaper och formler som ger appen dess funktioner.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. Om du har följt med bör du nu ha en bättre förståelse för hur en genererad app fungerar.If you've followed along, you should have a better understanding of how a generated app works. Nu kan du med dig denna kunskap när du skapar dina egna appar.Now you can take this understanding into creating your own apps.

Innan vi går vidare till nästa avsnitt ska vi gå tillbaka till SharePoint och visa dig hur appen nu är integrerad med listupplevelsen.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 märker fungerar nu FlooringApp som en vy i listan, och du kan starta appen genom att klicka på Öppna.As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Detta ger ett enkelt sätt att hantera dina listor med en egen, anpassad upplevelse.This provides a simple way to manage your lists with a friendly customized experience.

App som en vy i Sharepoint-lista

När du nu har gått igenom SharePoint app-avsnittet kan du välja vad du vill göra härnäst:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

Avsnittet om hantering visar dig hur du delar och versionshanterar appar och ger en introduktion till miljöer, vilka fungerar som behållare för appar, data och andra resurser.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. Vi rekommenderar att alla någon gång ska gå igenom hanteringsavsnittet, men Common Data Service-avsnittet har också information som är mycket användbar, inklusive fler app-anpassningar.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.

Grattis!

You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Du har lärt dig att...

Nästa självstudiekurs

Creating an app from the Common Data Service

Deltagare

  • Michael Blythe
  • olprod
  • Tibor Sipos