Övning – Lägga till en datakälla i arbetsyteappen och utforma funktionella sidor

8 minuter

I Power Apps kan du ansluta dina data till ett redan befintligt program eller till ett program som du skapar från grunden. Din app kan ansluta till SharePoint, Microsoft Dataverse, Salesforce, OneDrive eller någon annan datakälla.

Vi kommer att använda SharePoint som vår primära datakälla för det här programmet. Du kan ansluta till SharePoint-webbplatsen för att automatiskt generera en app från en anpassad lista, skapa en anslutning innan du lägger till data i en befintlig app eller skapa en app från grunden.

Skapa en SharePoint-webbplats

Logga in på SharePoint-portalen med dina autentiseringsuppgifter för Microsoft-organisationen.
Välj + Skapa webbplats på SharePoint-startsidan för att skapa SharePoint- webbplats.
På Startsidan för SharePoint hittar du följande information:
- Välj webbplatstyp. valet är Kommunikationswebbplats eller Gruppwebbplats. Välj Kommunikationswebbplats.
- Ange ett lämpligt namn för webbplatsen. till exempel Easy Sales.
- Lägg till webbplatsbeskrivning om det behövs (valfritt).
- Välj Språk du väljer i listrutan.
Välj Slutför för att skapa en SharePoint- webbplats för att ladda upp dina data.

En modern SharePoint-webbplats skapas och är redo att användas på några sekunder. Nu kan du skapa en lista, ett dokumentbibliotek, en sida och så vidare på din nyligen skapade webbplats.

Not

Om du har valt Gruppwebbplatsskapas även en Microsoft 365-grupp.

Skapa SharePoint-lista

En SharePoint-lista samlar in data med viss struktur, som liknar en tabell, ett kalkylblad eller en enkel databas. Den kan innehålla många olika typer av information, till exempel siffror, text, bifogade filer och till och med bilder.

För vårt Easy Sales-program skapar vi en lista med information om alla produktkategorier: Sofas, Chairs, Tablesoch Carpets.

På den nyligen skapade SharePoint-webbplatsen under namnet Easy Salesväljer du listrutan + Ny och väljer sedan List för att skapa din SharePoint-lista.
I fönstret Skapa en lista väljer du Tom lista för att skapa en SharePoint- lista från grunden.
Konfigurera fönstret Skapa enligt följande:
- Ange ett lämpligt namn för listan. till exempel Easy Sales.
- Fyll i beskrivningen om det behövs (valfritt).
- Låt kryssrutan Visa i webbplatsnavigering vara markerad.
- Välj Skapa.

Lägga till data i Din SharePoint-lista

När listan har skapats är det dags att lägga till data. Här betyder "data" information om en viss produkt. Produktinformationen innehåller följande information: Namn, Bild, Pris, Dimensioner, Vikt, Färg, PrimaryMaterial, Område, Höjd och 3D-modell/bild av produkten som ska visas i mixad verklighet.

I den skapade listan Easy sales väljer du + Lägg till kolumn för att lägga till en kolumn av en specifik typ. Listan nedan visar de kolumner som behöver skapas, med deras namn och typer i det här formatet: Namnet på kolumnen - kolumntypen.
- Namn: Enskild textrad
- ImageLink: Enkel textrad
- Pris: Enkel textrad
- Dimensioner: Enkel rad av text
- Vikt: Enskild textrad
- "Color: Enkel textrad"
- PrimaryMaterial: Enkel textrad
- höjd: Nummer
- Djup: Nummer
- Bredd: Nummer
- Pris/cm2: Antal
- ProductCategory: Enskild textrad
- FileType: Enskild textrad
Välj kolumntypen i listrutan. Välj till exempel Enskild textrad.

Ange information om kolumnen på fliken Skapa kolumnen och välj Spara.

Upprepa samma procedur för resten av kolumnerna i föregående lista.

Anteckning

När du har skapat en SharePoint- lista skapas en standardkolumn rubrik som du kan byta namn på som Namn.
När vi har lagt till kolumnerna måste vi lägga till faktiska data under dessa kolumner. Börja lägga till data i kolumner genom att ladda ned den anpassade mappen som innehåller all produktinformation för alla fyra listorna. För att komma åt data väljer du följande länk, väljer knappen Fler filåtgärder (...) längst upp till höger på sidan och väljer Ladda ned.

anpassad mapp för Power Apps
Välj + Ny för att lägga till ett objekt och fyll sedan i nödvändig information enligt den nedladdade Excel-filen. Välj Spara för att spara den angivna informationen.

Not

Med rutnätsvyn kan du lägga till information fritt till olika rader eller kolumner.
Börja lägga till dina data i respektive kolumner, enligt bilden:

Obs

Om du vill ta med egna bilder kan du lägga till bildlänkarna för offentliga avbildningar som är tillgängliga på Internet under kolumnen ImageLink. Du kan hämta bildlänkarna genom att högerklicka och välja alternativet Kopiera bildadress.

Notera

Du behöver inte värdena för höjd, djup och bredd för kategorilistan Carpet. Den här produktkategorin tar upp det areavärde som mäts under måttet i MR session och anger priset på mattan enligt den beräknade arean. Vi har dock lagt till kolumnen Price/cm2 för att underlätta beräkningsprocessen.

Skapa anslutning

Nu när alla våra data som krävs för programmet lagras i SharePoint-listan upprättar vi en anslutning i Power Apps. När anslutningen har upprättats kan du enkelt komma åt SharePoint-data via programmet.

Om du vill börja skapa en anslutning loggar du in på Power Apps- och väljer Anslutningar i det vänstra navigeringsfältet. Välj sedan + Ny anslutning i det övre vänstra hörnet.
Välj SharePoint. Vi väljer SharePoint- eftersom vi har lagrat nödvändiga data i SharePoint- listor.
Om du vill ansluta till SharePoint Online väljer du Anslut direkt (molntjänster)och väljer sedan Skapaoch anger sedan autentiseringsuppgifter om du uppmanas att göra det.
Anslutningen skapas och du kan skapa en app från grunden.

Anteckning

Även om anslutningen skapas kan du fortfarande lägga till, redigera och ta bort data som lagras i SharePoint-listan. Alla ändringar återspeglas i programmet via anslutningen.

Nu ska vi börja skapa programmet Easy Sales baserat på SharePoint-data och sedan lägga till data från andra källor, om så önskas. Genom att följa den här proceduren kan du utforma några av huvudsidorna i programmet. Du får till exempel lära dig att utforma en välkomstskärm, produktsida och produktlista. Vi kommer också att komma åt data som lagras i SharePoint-listan via Power Apps-gallerikontrollen.

Öppna en tom app

Gå till startsidan för Power Apps och välj sedan Skapa på den vänstra menyn. Välj Tom appoch välj sedan Skapa under Tom arbetsyteapp.
Ange ett namn för din app. till exempel Easy-Sales. Välj Telefonoch välj sedan Skapa.

Power Apps Studio skapar en tom app för telefoner.

Notera

Du kan utforma en app från grunden för olika enheter, men det här avsnittet fokuserar på att utforma en app för telefoner.
Om dialogrutan Välkommen till Power Apps Studio öppnas väljer du Hoppa över.

Ansluta till data

Om du vill inkludera data i din Power Apps måste du ansluta till data via kopplingarna i din applikation. Eftersom vi har lagrat alla data i en SharePoint- lista väljer vi SharePoint- som en av anslutningsprogrammen.

Välj till vänster i Power Apps Studioalternativet Data.
När du har öppnat fönstret Data väljer du knappen Lägg till data för att ansluta till data.
I fönstret Välj en datakälla expanderar du avsnittet Connectors och väljer alternativet SharePoint.
I föregående övning skapade vi redan en anslutning. Välj den skapade anslutningen för att lägga till data i ditt program. Välj SharePoint-webbplats som skapades under namnet Easy Sales.
När du har valt Easy Sales SharePoint-webbplats visas alla listor som skapats på webbplatsen. Välj sedan den SharePoint-lista som skapats för programmet och klicka på Anslut.
Alla nödvändiga data är anslutna och redo att användas i programmet. Nu kan du börja skapa programmet.

Skapa välkomstskärmen

Välj alternativet trädvy till vänster om Power Apps Studio. Du bör redan ha en tom skärm i Power Apps Studio. Om inte, på fliken Start väljer du nedåtpilen bredvid Ny skärm som öppnar listan med skärmtyper. Välj sedan Tom för att skapa en tom skärm.
Byt namn på skärmen till Välkomstskärmen genom att välja ikonen med tre punkter (...) bredvid skärmnamnet och välja alternativet Byt namn på.
Välj den nyligen skapade skärmen för att ändra dess egenskaper på fliken Egenskaper till höger på skärmen.
Välj listrutan bredvid egenskapen Bakgrundsbild för att lägga till en bild till skärmen. Välj + Lägg till en bildfil för att välja den nedladdade logotypfilen.
Ange bildpositionen till Anpassa så att hela bilden får plats i den angivna storleken. Alternativet Anpassa skalar bilden proportionellt och beskär inte bilden.
På fliken Infoga expanderar du listrutan Input och väljer Timer. Dra sedan knappen på skärmen och placera den var du vill.
Om du vill redigera några av timeregenskaperna kan du antingen använda listrutan Egenskap i det övre vänstra hörnet eller använda fönstret Egenskaper. Ange följande egenskaper:
- Autostart: true
- Varaktighet: 2000
- Synlig: falsk
  
  Notera
  
  Som standard mäts varaktigheten i millisekunder. Sedan 1 sekund = 1 000 millisekunder anger vi 2000 som värde för varaktigheten.
Vi vill att välkomstskärmen bara ska vara synlig i två sekunder och sedan övergå till startsidan. Skapa en tom skärm som vi gjorde i föregående steg och byt namn på den till startsida. Senare väljer du den timerknapp som lagts till på skärmen Splash och konfigurerar egenskapen OnTimerEnd. Ersätt false med följande innehåll:
```
Navigate('Home Page',ScreenTransition.Fade)
```
Spara programmet genom att gå till Fil>Spara. Välj sedan alternativet Molnet och klicka på Spara.

Skapa startsidan

Välj den startsida som skapades tidigare. Om du vill infoga fyra knappar går du till fliken Infoga och väljer alternativet knapp för att lägga till knappar på skärmen. Justera knapparnas storlek och position efter behov. Byt namn på dem till Sofas_button, Chairs_button, Tables_buttonrespektive Carpets_button.
Ändra visningstexten för knapparna för att ange produktkategorier som soffor, stolar, tabeller och mattor.
Vi använder de här knapparna för att navigera till listan över produkter under olika kategorier. För att göra det måste vi filtrera bort produkterna från SharePoint-listan baserat på produktkategori. Skapa två nya Blank-skärmar och byt namn på dem Products och Carpets.
Välj den nyligen skapade knappen Sofas_button och konfigurera inställningen för egenskapen OnSelect. När du har valt knappen måste den ta oss till sidan med produktlistan som skapades i föregående steg. Ersätt false med följande kod:
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
Notе

Det ID:t är en kontextvariabel med ett visst tilldelat värde. Det här värdet skickas vidare till målsidan som anges i funktionen Navigate. Värdet som tilldelats variabeln filtrerar bort produkterna baserat på Produktkategori.
Upprepa samma procedur för de övriga tre knapparna. Kontrollera återigen att du anger rätt skärmnamn i funktionen Navigate. Om du till exempel vill konfigurera egenskapen OnSelect för knapparna Chairs, Tablesoch Carpets använder du funktionen Navigate på följande sätt:
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
Tips

Spara förloppet genom att välja fliken Fil överst och välja alternativet Spara. Du kan också använda Ctrl+S- för att spara förloppet.
Not

Standardsyntaxen för funktionen Navigate är: Navigate(Screen [, Transition [, UpdateContextRecord]])
- Skärm: Krävs. Skärmen som ska visas.
- Övergång: Valfritt. Den visuella övergång som ska användas mellan den aktuella skärmen och nästa skärm. Standardvärdet är Ingen.
- UpdateContextRecord: Valfritt. En post som innehåller namnet på minst en kolumn och ett värde för varje kolumn. Den här posten uppdaterar kontextvariablerna för den nya skärmen på ett sätt som om de har skickats till funktionen UpdateContext.
Tips

Du kan testa ditt program genom att trycka på F5- på tangentbordet eller klicka på knappen Spela upp i det övre högra hörnet i Power Apps Studio.

Använda gallerikontroll

Nu när vi har lagt till produktkategorierna visar vi listan över produkter under varje kategori. I Power Apps använder vi gallerikontroll för att se en datapost.

På skärmen Produkter, på fliken Infoga, väljer du Galleri>Lodrät för att lägga till gallerikontroll på skärmen.
Byt namn på den till Gallery_products. På fliken Egenskaper i det vänstra fönstret konfigurerar du egenskapen Objekt enligt följande:
```
If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))
```
Vi filtrerar produkter som lagras i SharePoint-listan baserat på produktkategori. Kontextvariablerna används för filtreringsprocessen.
Konfigurera egenskapen Gallery>Fields i fönstret Egenskaper genom att välja Redigera:
- Tilldela Price till rubriken Subtitle1.
- Tilldela rubriken Title till rubriken Title1.
När du tilldelar föregående fält ser du att data återspeglas i ditt -galleri.
Justera storleken på Gallery_products efter behov. Om du vill lägga till ImageLink- i rubriken Image1 väljer du Image i galleriet och konfigurerar egenskapen Image på fliken Egenskap genom att lägga till den här kodraden:
```
ThisItem.ImageLink
```
Nu ska vi infoga en etikett överst på skärmen genom att välja alternativet Etikett. Anpassa sedan positionen, färgen och textvisningen enligt bilden:
Lägg till tillbaka-ikonen ovanpå den tidigare tillagda etiketten för att hjälpa användaren att navigera till Startsida när det behövs. Om du vill lägga till ikonen Tillbaka expanderar du listrutan Ikoner och väljer ikonen Tillbaka.
Placera ikonen Tillbaka korrekt och ändra dess visningsfärg om det behövs. Konfigurera egenskapen OnSelect genom att lägga till följande:
```
Navigate('Home Page',ScreenTransition.Cover)
```
Följ samma procedur för sidan Carpets. Konfigurera egenskapen Objekt i galleriet som lagts till på sidan Carpets på följande sätt:
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
Tips

Spara förloppet genom att välja fliken Fil överst och välja alternativet Spara. Du kan också använda Ctrl+S- för att spara förloppet.

När du har implementerat föregående steg måste programmet se ut så här. Programmet kommer att innehålla en utmärkt Välkomstskärm, en startsidaoch en produktinventering för att bläddra bland produkter.