Obs! Den här artikeln ingår i en självstudieserie om hur man använder PowerApps, Microsoft Flow och Power BI med SharePoint Online. Var noga med att läsa introduktionen för att få en översikt samt relaterade nedladdningar.

I den här uppgiften, ska vi skapa en app från grunden. Den här appen låter en användare tilldela en ansvarig för projekt och uppdatera projektinformationen. Du kommer att se vissa av samma kontroller och formler som du såg i den första appen, men du kommer att få skapa mer själv av appen den här gången. Processen är mer komplicerad, men du lär dig mer så vi tycker att det är en rättvis kompromiss.

Tips: Hämtningspaketet för det här scenariot innehåller en färdig version av appen: project-details-app.msapp.

Snabbgenomgång av PowerApps Studio

I den förra uppgiften använde du PowerApps Studio för webben, men vi vill vara säkra på att du förstår alla delarna innan vi går vidare. Du kan fortsätta att arbeta i PowerApps Studio för webben, eller använda PowerApps Studio för Windows.

PowerApps Studio har tre fönster och en menyflik, vilket gör att appskapande känns lite som att skapa en presentation i PowerPoint:

  1. Vänster navigeringsfält, som visar en hierarkisk vy över alla appens skärmar och kontroller, samt miniatyrer av skärmarna

  2. Mittfönstret, som innehåller appskärmen som du arbetar med

  3. Höger fönster, där du ställer in alternativ som layout och datakällor

  4. Egenskaper-listrutan, där du väljer de egenskaper som formlerna gäller för

  5. Formelfältet, där du lägger till formler (som i Excel) som definierar appbeteendet

  6. Menyfliken, där du lägger till kontroller och anpassar designelement

PowerApps Studio

Steg 1: Skapa skärmar

Nu när genomgången är avklarad så kan vi börja skapa en app.

Skapa och spara appen

  1. I PowerApps Studio, klickar eller trycker du på ny och sedan under tom app, klickar eller trycker du på telefonlayout.

    Tom app, telefonlayout

  2. Klicka eller tryck på fil, vilket öppnar fliken appinställningar. Skriv in namnet projekthanteringsapp.

    Appnamn

  3. Klicka eller tryck på Spara som, verifiera att appen sparas till molnet och klicka sedan på Spara i det nedre högra hörnet.

    Spara till molnet

  4. Klicka eller tryck på Tillbaka till app-ikonen för att gå tillbaka till appen.

Lägg till fyra skärmar i appen

I det här steget ska du skapa fyra tomma skärmar för appen. Vi använder olika skärmlayouter beroende på skärmens syfte. Vi lägger till saker till de här skärmarna i senare steg.

Skärrm Syfte
SelectTask Startskärmen. Navigera till andra skärmar
AssignManager Tilldela en ansvarig till ett godkänt projekt
ViewProjects Visa en lista över projekt med sammanfattningsinformation
UpdateDetails Visa och uppdatera information för ett projekt
  1. På fliken start, klickar eller trycker du på NewScreen och sedan rullningsbar skärm.

    Rullningsbar skärm

  2. Ändra skärmens namn till SelectTask.

    Byt namn på skärmen

  3. Skapa och byt namn på ytterligare skärmar:

    1. Klicka eller tryck på NewScreen och därefter rullningsbar skärm. Ändra skärmens namn till AssignManager.
    2. Klicka eller tryck på NewScreen och därefter listskärm. Ändra skärmens namn till ViewProjects.
    3. Klicka eller tryck på NewScreen och därefter formulärskärm. Ändra skärmens namn till UpdateDetails.
  4. Välj de tre punkterna (... ) bredvid Screen1 och klicka eller tryck sedan på ta bort.

    Ta bort skärmen

Appen bör nu se ut som på följande bild.

Alla appskärmar

Steg 2: Anslut till en SharePoint-lista

I det här steget ska vi ansluta till SharePoint-listan produktinformation. Vi använder bara en lista i den här appen, men du kan enkelt ansluta till bägge om du vill utöka appen.

  1. I det vänstra navigeringsfältet, klickar eller trycker du på skärmen SelectTask.

  2. I höger fönster, klickar eller trycker du på Lägg till datakälla.

    Anslut till data

  3. Klicka eller tryck på Ny anslutning.

    Ny anslutning

  4. Klicka eller tryck på SharePoint.

    SharePoint-anslutning

  5. Välj Anslut direkt (cloud services) och klicka eller tryck därefter på skapa.

    Anslut direkt (cloud services)

  6. Ange en SharePoint-URL och klicka eller tryck sedan på .

    SharePoint-URL för anslutning

  7. Välj listan projektinformation och klicka eller tryck sedan på Anslut.

    Välj listan projektinformation

    Datakällor-fliken i det högra fönstret visar nu anslutningen som du skapade.

    Datakällor-fliken

Steg 3: Skapa SelectTask-skärmen

I det här steget, skapar vi ett sätt att navigera till de andra skärmarna i appen och jobbar med några av de kontroller, formler och formateringsalternativ som PowerApps erbjuder.

Uppdatera rubriken och infoga en introduktionstext

  1. I det vänstra navigeringsfältet, väljer du skärmen SelectTask.

  2. I det mellersta fönstret, väljer du standard [Rubrik]. I formelfältet uppdaterar du sedan Text-egenskapen till Contoso projekthantering.

    Textegenskapen i formelfältet

  3. I infoga-fliken, klickar eller trycker du på etikett och drar etiketten nedåt under översta banderollen.

    Lägg till etikett

  4. I formelfältet ställer du in följande egenskaper för etiketten:

    • Färg-egenskapen = DarkGray
    • Storlek-egenskapen = 18
    • Text-egenskapen = klicka eller tryck på en uppgift för att fortsätta...

    Uppdatera etikettexten

Lägg till två navigeringsknappar

  1. I infoga-fliken, klickar eller trycker du på knapp och drar sedan knappen under etiketten.

    Lägg till knapp

  2. I formelfältet ställer du in följande egenskaper för knappen:

    • OnSelect-egenskapen = Navigera(AssignManager, tona). När du kör appen och klickar på den här knappen, navigerar du till den andra skärmen i appen med en tona-övergång mellan skärmarna.
    • Text-egenskapen = tilldela ansvarig
  3. Ändra storlek på knappen för att passa texten.

    Uppdatera knapptexten

  4. Infoga en till knapp med följande egenskaper:

    • OnSelect-egenskapen = navigera(ViewProjects Tona).
    • Text-egenskapen = uppdatera information

    Uppdatera knapptexten

    Obs: knappen har etiketten uppdateringsinformation, men vi navigerar först till skärmen ViewProjects för att välja ett projekt att uppdatera.

Kör appen

Appen kan inte göra så mycket än, men du kan köra den om du vill:

  1. Klicka eller tryck på skärmen SelectTask (appen startar alltid från den markerade skärmen i förhandsgranskningsläget i PowerApps Studio).

  2. Klicka eller tryck på Kör app-ikonen i det övre högra hörnet, så körs appen.

  3. Klicka eller tryck på en av knapparna för att navigera till en annan skärm.

  4. Klicka eller tryck på Stäng appförhandsgranskning-ikonen i det övre högra hörnet, så stängs appen.

Steg 4: Skapa AssignManager-skärmen

I det här steget använder vi ett galleri för att visa alla projekt som har godkänts men ännu inte har en ansvarig. Vi lägger till andra kontroller så att du kan tilldela en ansvarig.

Obs: vi ska skapa en sida senare i appen som låter dig redigera alla fält för ett projekt (inklusive ansvarig-fältet), men vi tror att det skulle vara lite häftigt att skapa en sådan här skärm också.

  1. Spara ändringarna som du har gjort.

  2. I det vänstra navigeringsfältet, klickar eller trycker du på skärmen AssignManager.

Uppdatera rubriken och infoga en introduktionstext

  1. Ändra [Rubrik] till tilldela ansvarig.

  2. Lägg till en etikett med följande egenskaper:

    • Färg-egenskapen = DarkGray
    • Storlek-egenskapen = 18
    • Text-egenskapen = välj ett projekt och tilldela sedan en ansvarig

    Layout för tilldela ansvarig

Lägg till en tillbaka-pil för att återgå till skärmen SelectTask

  1. Klicka eller tryck på det blå fältet högst upp på skärmen.

  2. I infoga-fliken, klickar eller trycker du på ikoner och sedan på vänster.

    Infoga vänsterpil

  3. Flytta pilen till vänster sida av det blå fältet och ställ in följande egenskaper:

    • Färg-egenskapen = Vit
    • Höjd-egenskapen = 40
    • OnSelect-egenskapen = navigera(SelectTask, Tona)
    • Bredd-egenskapen = 40

    Lägg till tillbaka-knapp

Lägga till och ändra ett galleri

  1. I infoga-fliken, klickar eller trycker du på galleri och sedan lodrät.

    Lägg till ett lodrätt galleri

  2. Välj rubrik, underrubrik och brödtext från layout-menyn i det högra fönstret.

    Ändra gallerilayouten

    Galleriet har nu rätt layout men har fortfarande standard exempeltext. Vi ordnar det snart.

    Galleriet med standardtexten

  3. Ange följande egenskaper för galleriet:

    • BorderThickness-egenskapen = 1
    • BorderStyle-egenskapen = streckad
    • Objekt egenskapen = Filter (”information”, PMAssigned = ”otilldelade”). Endast projekt utan tilldelad ansvarig inkluderas i galleriet.

    Galleri med text från listan

  4. I det högra fönstret, uppdaterar du fälten för att matcha följande lista:

    • ApprovedDate
    • Status
    • Rubrik

    Gallerifält

  5. Ändra storlek på etiketterna i galleriet efter behov och ta bort pilen från det första galleriobjektet (vi inte behöver navigera någonstans från det här galleriet).

    Ta bort pilikonen

    Skärmen bör nu se ut som följande bild.

    Formaterat galleri

Ändra färgen på ett objekt om det är markerat

  1. Välj galleriet och ställ sedan in TemplateFill-egenskapen till om (ThisItem.IsSelected=true, orange, vit).

  2. Markera ett objekt i galleriet. Skärmen bör nu se ut som följande bild.

    Galleri med valt objekt

Lägg till en etikett, textinmatning och en Ok-knapp för att skicka in ansvarig-tilldelningar

  1. Klicka eller tryck utanför galleriet som du har arbetat med.

  2. I infoga-fliken, klickar eller trycker du på etikett. Dra etiketten under galleriet till vänster. Ställ in följande egenskaper för etiketten:

    • Storlek-egenskapen = 20
    • Text-egenskapen = Ansvarig:

    Lägg till ansvarig-etikett

  3. I infoga-fliken, klickar eller trycker du på text och därefter textinmatning. Dra textinmatningen under galleriet i mitten. Ställ in följande egenskaper för listmenyn:

    • Standard-egenskapen = ””
    • Höjd-egenskapen = 60
    • Storlek-egenskapen = 20
    • Bredd-egenskapen = 250

    Lägga till textinmatning

  4. I infoga-fliken, klickar eller trycker du på knapp. Dra knappen under galleriet till höger. Ställ in följande egenskaper för knappen:

    • Höjd-egenskapen = 60
    • OnSelect-egenskapen = korrigering(projektinformation, sökning(projektinformation, ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Se djupdykning i formler för mer information.
    • Den här formeln uppdaterar listan projektinformation och ställer in ett värde för PMAssigned-fältet.
    • Storlek-egenskapen = 20
    • Text-egenskapen = Ok
    • Bredd-egenskapen = 80

    Lägg till OK-knapp

Den färdiga skärmen bör nu se ut som följande bild.

Färdig tilldela ansvarig-skärm

Steg 5: Skapa ViewProjects-skärmen

I det här steget ska vi ändra egenskaperna för galleriet på ViewProjects-skärmen. Det här galleriet visar objekt från projektinformation-listan. Du väljer ett objekt på den här skärmen och redigerar sedan informationen på UpdateDetails-skärmen.

  1. I det vänstra navigeringsfältet, klickar eller trycker du på skärmen ViewProjects.

  2. Ändra [Rubrik] till visa projekt.

  3. I det vänstra navigeringsfältet, klickar eller trycker du på BrowserGallery1 under ViewProjects.

  4. Välj rubrik, underrubrik och brödtext från layout-menyn i det högra fönstret.

    Ändra gallerilayouten

    Galleriet har nu rätt layout med standard exempeltext.

    Galleriet med standardtexten

  5. Välj uppdatera-knappen uppdatera-ikonen och ställ in dess OnSelect-egenskap till uppdatera(projektinformation).

  6. Markera nytt objekt-knappen lägg till ny ikon och ställ in dess OnSelect-egenskap till NewForm(EditForm1); Navigera(UpdateDetails, ScreenTransition.None).

Lägg till en tillbaka-pil för att återgå till skärmen SelectTask

  1. I det vänstra navigeringsfältet, klickar eller trycker du på skärmen AssignManager.

  2. Markera tillbaka-pilen som du har lagt till där och kopiera den.

  3. Klistra in pilen i ViewProjects-skärmen och placera den till vänster om uppdateringsknappen.

    Tillbaka-knapp

    Alla dess egenskaper kommer med den, inklusive OnSelect-egenskapen för navigera(SelectTask, tona).

Ändra datakällan för BrowseGallery1-galleriet

  1. Välj BrowseGallery1-galleriet och ställ in objekt-egenskapen i galleriet till SortByColumns(Filter(projektinformation, StartsWith(rubrik, TextSearchBox1.Text)), rubrik, Om(SortDescending1, fallande, stigande)).

    Det här ställer in datakällan för galleriet för projektinformation-listan och använder rubrik-fältet för söka och sortera.

  2. Välj information-pilikonen i det första galleriobjektet och ställ in OnSelect-egenskapen till navigera(UpdateDetails, inga).

     Visa projektgalleriet. Första markerade objekt

  3. I det högra fönstret, uppdaterar du fälten för att matcha följande lista:

    • Status
    • PMAssigned
    • Rubrik

    Gallerifält

    Den färdiga skärmen bör nu se ut som följande bild.

    Visa projekt-skärmen färdig

Steg 6: Skapa UpdateDetails-skärmen

I det här steget ansluter vi redigeringsformuläret på UpdateDetails-skärmen till vår datakälla och gör en del egenskaps- och fältändringar. På den här skärmen, kan du redigera information för ett projekt som du valt i Visa projekt-skärmen.

  1. I det vänstra navigeringsfältet, klickar eller trycker du på skärmen UpdateDetails.

  2. Ändra [Rubrik] till uppdatera information.

  3. I det vänstra navigeringsfältet, klickar eller trycker du på EditForm1 under UpdateDetails.

  4. Ställ in följande egenskaper för formuläret:

    • DataSource-egenskapen = projektinformation
    • Objekt-egenskapen = BrowseGallery1.Selected
  5. Med formuläret fortfarande markerat, klickar du eller trycker i kryssrutan för följande fält i det högra fönstret i den ordning som visas:

    • Rubrik
    • PMAssigned
    • Status
    • ProjectedStartDate
    • ProjectedEndDate
    • ProjectedDays
    • ActualDays

    Redigera formulärfält

  6. Välj avbryt-knappen avbryt-ikonen och ställ in dess OnSelect-egenskap till ResetForm(EditForm1); Tillbaka().

  7. Välj spara-knappen kryssmarkering spara-ikonen och kolla in OnSelect-formeln SubmitForm(EditForm1). Eftersom vi använder kontrollen för redigeringsformuläret så kan vi använda Submit(), istället för att använda Patch() som vi gjorde tidigare.

Den färdiga skärmen bör nu se ut som följande bild (om fälten är tomma, kontrollera att du väljer ett objekt på Visa projekt-skärmen).

Uppdatera information-skärmen färdig

Steg 7: Kör appen

Nu när appen är klar så kan vi köra den och se hur det fungerar. Vi lägger till en länk på SharePoint-webbplatsen till appen. Du kommer att kunna köra appen i webbläsaren, men du kan behöva dela appen för att andra ska kunna köra den. Mer information finns i dela dina appar.

Lägg till en länk till appen

  1. I Office 365-appstartaren, klickar eller trycker du på PowerApps.

    PowerApps i Office 365-appstartaren

  2. I PowerApps, klickar eller trycker du på ellipsen, (... ) för projekthanterings-appen och därefter på öppna.

    Välj projekthanterings-appen

  3. Kopiera adressen (URL:en) för appen i webbläsaren.

    Kopiera app-URL

  4. I SharePoint, klickar eller trycker du på Redigera länkar.

    Redigera SharePoint-webbplatslänkar

  5. Klicka eller tryck på(+) länk.

    Lägg till app-länk till SharePoint-webbplatsen

  6. Skriv in projekthanterings-app och klistra in adressen till appen.

    Redigera länkegenskaperna

  7. Klicka eller tryck på Ok och sedan Spara.

    Spara länkändringarna

Tilldela en ansvarig till ett projekt

Nu när vi har appen på vår SharePoint-webbplats, antar vi rollen som projektgodkännare. Vi ska hitta projekt som inte har någon ansvarig tilldelad och tilldela en ansvarig till ett av dem. Därefter antar vi rollen som projektansvarig och lägger till lite information om ett projekt som är tilldelat till oss.

  1. Först ska vi titta på listan projektinformation i SharePoint. Två projekt har värdet otilldelat i kolumnen PMAssigned. Vi kommer att se dessa i appen.

    Otilldelade projekt i SharePoint-listan

  2. Klicka eller tryck på länken som du skapade till appen.

  3. På den första skärmen, klicker eller trycker du på tilldela ansvarig.

    Appens introduktionsskärm

  4. På skärmen tilldela ansvarig, kan du se de två otilldelade projekten i listan. Välj projektet ny BI-programvara.

    Galleri med valt objekt

  5. I textinmatningen ansvarig, skriver du in Joni Sherman och klickar sedan på Ok.

    Ändringen tillämpas i listan och galleriet uppdaterar så att bara det återstående otilldelade projektet visas.

    Tilldela ansvarig till projektet

  6. Gå tillbaka till SharePoint-listan och uppdatera sidan. Du ser att projektposten nu har uppdaterats med namnet på den projektansvarige.

    Projektansvarig tilldelad i SharePoint-listan

Uppdatera informationen för projektet

  1. Klicka eller tryck på tillbaka-ikonen för att gå tillbaka till den första skärmen och klicka eller tryck sedan på uppdatera information.

    Appens introduktionsskärm

  2. På skärmen visa projekt, skriver du in ny i sökrutan.

    Sök i app-galleriet

  3. Klicka på information-pilikonen för objektet ny BI-programvara.

    Galleri-objekt valt

  4. På skärmen uppdatera information, anger du följande värden:

    • ProjectedStartDate-fältet = 6/3/2017
    • ProjectedEndDate-fältet = 24/3/2017
    • ProjectedDays-fältet = 15

    Uppdatera objektinformation

  5. Klicka eller tryck på Kryssmarkeringsikonen om du vill tillämpa ändringen för SharePoint-listan.

  6. Stäng appen och gå tillbaka till listan. Du ser nu att projektposten har uppdaterats med datum- och dagändringarna.

    Uppdaterad SharePoint-lista

Djupdykning i formler

Detta är det andra valfria avsnittet om PowerApps-formler. I den första djupdykningen, tittade vi på en av formlerna som PowerApps skapar för bläddra-galleriet i en tre-skärms app. I den här djupdykning ska vi titta på en formel som vi använder för skärmen AssignManager i vår andra app. Här är formeln:

Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Men vad gör den här formeln? När du väljer ett objekt i galleriet och klickar på OK-knappen, uppdaterar formeln projektinformation-listan och ställer in PMAssigned-kolumnen till värdet som du anger i textinmatningen. Formeln använder sig av funktioner för att göra sitt jobb:

När du sätter ihop funktionerna i formeln händer följande:

  1. När du klickar på OK-knappen, anropas Patch-funktionen för att uppdatera projektinformation-listan.

  2. I Patch-funktionen, identiferar LookUp-funktionen vilken rad i projektinformation-listan som ska uppdateras. Den gör det genom att jämföra ID för det markerade galleriobjektet med ID i listan. Till exempel ett ID på 12 innebär att posten för nya BI-programvara ska uppdateras.

  3. Nu när Patch-funktionen har rätt ID, uppdaterar den PMAssigned-fältet till värdet i TextInput1.Text.

Nästa steg

Nästa steg i självstudien blir att skapa en Power Bi-rapport för att analysera projekt.