Övning – Utforma ytterligare sidor och e-post i Power Apps

  • 10 minuter

I den här lektionen kommer du att utforma ytterligare sidor för att stödja dina funktioner för mixad verklighet. Dessa sidor utför vissa specifika funktioner som krävs för att programmet ska fungera korrekt. Du kommer också att använda e-postfunktionen i Power Apps för att skicka orderinformationen till kunderna.

Skapa anteckningssida

Användaren kan ta bilder under View i MR session och visa dem via ett galleri. På sidan Anteckningarkan du lagra textanteckningar och bilder som tagits under View i MR session.

  1. Skapa två nya Tomma-skärmar och byt namn på dem Product_notes och Carpet_notes.

    Skärmbild av nya skärmar för anteckningar.

  2. Utforma sidan Product_notes: Välj listrutan Indata och välj sedan Textinmatning. Byt namn på den TextInput_products.

    Skärmbild av att lägga till textindata.

  3. Välj Galleri>Vågrät om du vill inkludera en vågrät typ av galleri. Du kommer att lagra foton tagna under View och i MR-sessionen i det här galleriet. Byt namn på galleriet View_products.

    Skärmbild av att lägga till ett vågrätt galleri.

  4. Placera galleriet på den andra delen av skärmen. Behåll endast bilden genom att ta bort Subtitle och Title. Förstora bilden.

    Skärmbild av endast bild i galleriet.

  5. Välj galleriet och konfigurera egenskapen Objekt genom att lägga till följande rad:

    ViewInMR1.Photos

    Skärmbild av att lägga till egenskaper i galleriet.

    Alla bilder som tagits i View i MR-sessionen lagras i det här galleriet för framtida referens.

  6. Nu ska vi infoga en etikett överst på skärmen. Välj alternativet Etikett och centrera det. Anpassa positionen, färgen och textvisningen efter dina behov. Byt namn på den Notes_label.

    Skärmbild av infogning av etikett.

  7. Vi placerar en Tillbaka-ikon över den tidigare tillagda etiketten för att hjälpa användaren att navigera till startsidan vid behov. Om du vill lägga till ikonen Tillbaka går du till fliken Infoga, expanderar listrutan Ikoner och väljer sedan ikonen Bakåt.

    Skärmbild av att lägga till bakåt-ikonen.

  8. Placera ikonen Tillbaka korrekt och konfigurera egenskapen OnSelect genom att lägga till följande:

    Navigate(Product_details,ScreenTransition.Cover)

    Skärmbild av positionerade och OnSelect.

  9. Växla till skärmen Product_details och lägg till en anteckningsikon från listrutan Ikoner på fliken Infoga.

    Skärmbild av att lägga till anteckningsikonen.

  10. Konfigurera egenskapen OnSelect för ikonen Note genom att lägga till följande rad:

    Navigate(Product_notes,ScreenTransition.CoverRight)

    Skärmbild av OnSelect för anteckning.

  11. Replikera samma procedur för Notes_carpets.

    Notera

    Vi kommer inte att inkludera funktionen View i MR för kategorin Mattor. På sidan Notes_carpets utesluter du att du lägger till kontrollen Galleri för att lagra foton som tagits under View i MR session.

    Tips

    Du kan testa programmet genom att trycka på F5- på tangentbordet eller välja knappen Spela upp i det övre högra hörnet i Power Apps Studio.

Skapa en sida för ordersammanfattning

  1. Lägg till knappar i skärmarna Product_details och Carpet_details. Byt namn på knapparna Order_product och Order_carpet. Ändra visningstexten för knapparna till Order.

    Skärmbild av hur du lägger till beställningsknappen.

  2. Skapa två nya Tomma-skärmar och byt namn på dem Beställ_produkter och Beställ_mattor.

    Skärmbild av att lägga till nya skärmar.

  3. Välj skärmen Product_details och konfigurera sedan egenskapen OnSelect för knappen Order enligt följande:

    Navigate('Order_products',ScreenTransition.Cover)

    Skärmbild av Order OnSelect-konfiguration.

  4. Följ samma procedur för Carpet_details skärmen.

  5. På sidan Order_products infogar du Product, Price, Coloroch Notes etiketter och byter namn på dem.

    Skärmbild av etiketter i Order_sofas.

  6. Infoga tomma etiketter bredvid Product, Price, Coloroch Notes enligt bilden.

    Skärmbild av tomma etiketter i Order_sofas.

  7. Konfigurera egenskapen Text för dessa tomma etiketter enligt följande:

    • Produkt:

      Gallery_products.Selected.Name

      Skärmbild av konfiguration av produkttext.

    • Pris:

      Gallery_products.Selected.Price

      Skärmbild av hur du konfigurerar pristext.

    • Färg:

      Gallery_products.Selected.Color

      Skärmbild av hur du konfigurerar färgtext.

    • Anteckningar:

      TextInput_products.Text

      Skärmbild av hur du konfigurerar anteckningstext.

  8. Lägg till ytterligare en etikett överst och ändra dess visningstext till ordersammanfattning. Ändra teckenstorleken och teckensnittet efter dina behov.

    Skärmbild av att lägga till etikett för ordersammanfattning.

  9. Expandera listrutan Galleri och välj Vågrät. Behåll endast avbildningen. ta bort andra komponenter i Gallery. Byt namn på den Order_gallery_products

    Skärmbild av att lägga till galleri.

  10. Konfigurera egenskapen Objekt i det här galleriet genom att lägga till följande rad:

    ViewInMR1.Photos

    Skärmbild av hur du konfigurerar objekt i galleriet.

  11. Lägg till tre etiketter och ändra visningstexten till Ange din e-post för att få ett orderbekräftelsemeddelande!, Organisations-e-post-ID:och Kundens e-post-ID:respektive.

    Skärmbild av tre etiketter.

  12. Expandera listrutan Indata och välj Textinmatning. Lägg till två textindata komponenter på skärmen och placera dem som de visas i bilden. Byt namn på dem Input1_products och Input2_products.

    Skärmbild av två textinmatningsfält.

  13. Konfigurera egenskapen Tipstext genom att lägga till Ange e-post-ID:; lagra inget värde i egenskapen Standard. Justera teckenstorleken och färgen efter behov.

    Skärmbild av hur du konfigurerar tipstext.

  14. Lägg till en knapp från fliken Infoga och konfigurera egenskapen Text genom att lägga till Bekräfta.

    Skärmbild av att lägga till knappen Bekräfta.

  15. Expandera listrutan Ikoner och välj ikonen Tillbaka och Start. Placera dem korrekt, enligt bilden.

    Skärmbild av att lägga till bakåt- och hemikoner.

  16. Konfigurera egenskapen OnSelect för följande två ikoner:

    • Tillbaka:

      Navigate(Product_details,ScreenTransition.CoverRight)

      Skärmbild av OnSelect-konfigurationen.

    • Hem:

      Navigate('Home Page',ScreenTransition.CoverRight)

      Skärmbild av konfigurationen av OnSelect: Order.

  17. Följ samma procedur för Beställ_mattor.

Skapa slutsida

  1. Skapa en blankskärm och döp om den till Slutsida.

    Skärmbild av slutsidan.

  2. Lägg till en Etikett och ändra dess visningstext till Beställning Skickad!. Placera etiketten efter behov på skärmen.

    Skärmbild av att lägga till etikett för Beställning är framgångsrikt placerad.

  3. Lägg till en knapp längst ned på skärmen. Konfigurera egenskapen Text för knappen genom att lägga till Shop more. Vi dirigerar användaren till startsidan: välj knappen Shop more och lägg sedan till följande rad i egenskapen OnSelect.

    Navigate('Home Page',ScreenTransition.Cover)

    Skärmbild av knappen Visa mer.

  4. Expandera listrutan Media och välj Image för att lägga till en bildkomponent på sidan Slut.

    Skärmbild av att lägga till bildkomponent.

  5. Placera bilden enligt bilden. Välj filen för -logotypen som ska visas.

    Skärmbild av att lägga till en logotypfil i bildkomponenten.

    Tips

    Spara ditt program ofta genom att välja fliken Fil överst och välja alternativet Spara. Om du uppmanas till det väljer du sedan alternativet Moln och väljer Spara.

Skicka e-post via Power Apps

  1. Välj fliken Data och välj + Lägg till data. Expandera Connectorsoch välj sedan Office 365 Outlook för att lägga till det som en av anslutningarna för den här applikationen.

    Skärmbild av att lägga till dataanslutningar för Outlook.

  2. Öppna Order_products och konfigurera sedan egenskapen OnSelect för knappen Bekräfta genom att lägga till följande rader:

    Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
Navigate('End page',ScreenTransition.Cover)

    Skärmbild av konfigureringsknappen Bekräfta.

    Not

    Namnen som används i föregående funktion följer de namngivningskonventioner som användes i det här programmet vid tidpunkten för utvecklingen. Du kan anpassa funktionen enligt ditt program.

Om du implementerar föregående steg måste programmet fungera på följande sätt: programmet innehåller en Notes-sida för att lagra alla sessionsanteckningar, en sammanfattningssida för Order för att granska din beställning och skicka e-postmeddelanden och en slutsida för att ge en utmärkt stängning av programmet.

Animering av programdemo när du har lagt till ytterligare sidor och e-postfunktioner.

Testa ditt program på en mobil enhet

  1. Välj nedladdningslänken för enheten:

  2. Öppna Power Apps på din mobila enhet och logga in med dina autentiseringsuppgifter för Microsoft-kontot.

  3. De appar som du använde nyligen visas på standardskärmen när du loggar in på Power Apps Mobile.

    Home är standardskärmen när du loggar in. Den visar de appar som du använde nyligen och de appar som du har markerat som favoriter.

  4. Om du vill köra en app på en mobil enhet väljer du apppanelen. Om det är första gången du kör en canvas-app med hjälp av Power Apps mobil, visas en skärm som visar svepgesterna.

  5. Om du vill stänga en app använder du fingret för att svepa från appens vänstra kant till höger. På Android-enheter kan du också välja knappen Tillbaka och bekräfta att du har för avsikt att stänga appen.

    Not

    Om en app kräver en anslutning till en datakälla eller behörighet att använda enhetens funktioner (till exempel kameran eller platstjänsterna) måste du ge medgivande innan du kan använda appen. Vanligtvis uppmanas du bara första gången du kör appen.