Øvelse – Utform flere sider og e-post i Power Apps

10 minutter

I denne enheten skal du utforme noen ekstra sider for å støtte funksjonene for blandet virkelighet. Disse sidene utfører noen spesifikke funksjoner som kreves for at applikasjonen skal oppføre seg riktig. Du skal også bruke e-postfunksjonaliteten i Power Apps til å sende ordredetaljene til kundene.

Opprett notatside

Brukeren kan ta bilder under Vis i blandet virkelighet-økten og vise dem gjennom et galleri. På Notater-siden kan du lagre tekstnotater og bilder som er tatt under Vis i blandet virkelighet-økt .

Opprett to nye tomme skjermer og gi dem nytt navn Product_notes og Carpet_notes.
Utform den Product_notes siden: Velg rullegardinlisten Inndata , og velg deretter Tekstinndata. Gi den nytt navn TextInput_products.
Velg Horisontalt galleri> for å inkludere en vannrett type galleri. Du lagrer bilder som er tatt under Vis i blandet virkelighet-økten i dette galleriet. Gi nytt navn til galleriet View_products.
Plasser galleriet på den andre delen av skjermen. Behold bare bildet ved å slette undertittelen og tittelen. Forstørr bildet.
Velg galleriet, og konfigurer Items-egenskapen ved å legge til følgende linje:
```
ViewInMR1.Photos
```
Alle bildene som er tatt i View in MR-økten , lagres i dette galleriet for fremtidig referanse.
La oss sette inn en etikett øverst på skjermen. Velg Etikett-alternativet , og deretter Midtstill den . Tilpass posisjon, farge og tekstvisning i henhold til dine behov. Gi den nytt navn Notes_label.
Vi plasserer et Tilbake-ikon over den tidligere lagt til etiketten for å hjelpe brukeren med å navigere til hjemmesiden når det er nødvendig. Hvis du vil legge til Tilbake-ikonet, utvider du rullegardinmenyen Ikoner på Sett inn-fanen og velger deretter Tilbake-ikonet.
Plasser ikonet Tilbake riktig, og konfigurer OnSelect-egenskapen ved å legge til følgende:
```
Navigate(Product_details,ScreenTransition.Cover)
```
Bytt til den Product_details skjermen og legg til et notatikon fra rullegardinmenyen Ikoner på Sett inn-fanen .
Konfigurer OnSelect-egenskapen for Notat-ikonet ved å legge til følgende linje:
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Repliker samme prosedyre for Notes_carpets.

Merk deg

Vi vil ikke inkludere View in MR-funksjonen for Tepper-kategorien . For den Notes_carpets siden utelater du å legge til Galleri-kontrollen for å lagre bilder som er tatt under Vis i blandet språk-økten .

Tip

Du kan teste programmet ved å trykke på F5-tasten på tastaturet eller velge Spill av-knappen øverst til høyre i Power Apps Studio.

Opprett side for bestillingssammendrag

Legg til knapper på Product_details og Carpet_details skjermer. Gi knappene nytt navn Order_product og Order_carpet. Endre visningsteksten for knappene til Rekkefølge.
Opprett to nye tomme skjermer og gi dem nytt navn Order_products og Order_carpets.
Velg Product_details-skjermen, og konfigurer deretter OnSelect-egenskapen for Ordre-knappen på følgende måte:
```
Navigate('Order_products',ScreenTransition.Cover)
```
Følg samme prosedyre for Carpet_details-skjermen .
På Order_products-siden setter du inn etiketter for Produkt, Pris, Farge og Merknader , og gir dem nytt navn.
Sett inn tomme etiketter ved siden av Produkt, Pris, Farge og Merknader som vist på figuren.

Konfigurer Text-egenskapen for disse tomme etikettene på følgende måte:

Produkt:
```
Gallery_products.Selected.Name
```
PRIS:
```
Gallery_products.Selected.Price
```
Farge:
```
Gallery_products.Selected.Color
```
Notater:
```
TextInput_products.Text
```

Legg til en annen etikett øverst, og endre visningsteksten til Ordresammendrag. Endre skriftstørrelse og skrift i henhold til dine behov.
Utvid rullegardinlisten Galleri , og velg Vannrett. Behold bare bildet; slette andre komponenter i galleriet. Gi den nytt navn Order_gallery_products
Konfigurer Items-egenskapen for dette galleriet ved å legge til følgende linje:
```
ViewInMR1.Photos
```
Legg til tre etiketter og endre visningsteksten til Skriv inn e-postadressen din for å få en ordrebekreftelses-e-post!, Organisasjons-e-post-ID: og Kunde-e-post-ID:, henholdsvis.
Utvid rullegardinmenyen Inndata , og velg Tekstinntasting. Legg til to tekstinndatakomponenter på skjermen, og plasser dem som vist på bildet. Gi dem nytt navn Input1_products og Input2_products.
Konfigurer egenskapen Hint text ved å legge til Skriv inn e-post-ID:; lagre ingen verdi i Default-egenskapen . Juster skriftstørrelsen og fargen etter behov.
Legg til en knapp fra Sett inn-fanen , og konfigurer Text-egenskapen ved å legge til Bekreft.
Utvid rullegardinmenyen Ikoner og velg Tilbake og Hjem-ikonet . Plasser dem riktig, som vist på bildet.

Konfigurer OnSelect-egenskapen for disse to ikonene på følgende måte:

Tilbake:

Navigate(Product_details,ScreenTransition.CoverRight)

Hjem:

Navigate('Home Page',ScreenTransition.CoverRight)

Følg samme fremgangsmåte for Order_carpets.

Opprett sluttside

Opprett en tom skjerm og gi den navnet Sluttside.
Legg til en etikett og endre visningsteksten til Ordre sendt!. Plasser etiketten etter behov på skjermen.
Legg til en knapp nederst på skjermen. Konfigurer Text-egenskapen for knappen ved å legge til Shop more. La oss lede brukeren til hjemmesiden: Velg Kjøp mer-knappen , og legg deretter til følgende linje i OnSelect-egenskapen .
```
Navigate('Home Page',ScreenTransition.Cover)
```
Utvid rullegardinmenyen Media , og velg Bilde for å legge til en bildekomponent på sluttsiden.
Plasser bildet som vist på bildet. Velg logofilen som skal vises.

Tip

Lagre programmet ofte ved å velge fanen Fil øverst og velge alternativet Lagre. Hvis du blir bedt om det, velger du alternativet Skyen , og deretter velger du Lagre.

Sende e-postmeldinger via Power Apps

Velg Data-fanen , og velg + Legg til data. Utvid koblingene, og velg deretter Office 365 Outlook for å legge den til som en av koblingene for dette programmet.

Åpne Order_products , og konfigurer deretter OnSelect-egenskapen for Bekreft-knappen ved å legge til følgende linjer:

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)

Merk deg

Navnene som brukes i den foregående funksjonen, følger navnekonvensjonene som ble brukt i dette programmet på utviklingstidspunktet. Du kan tilpasse funksjonen i henhold til applikasjonen din.

Implementering av de foregående trinnene må få søknaden til å fungere på følgende måte: søknaden din vil inneholde en Notater-side for å lagre alle øktnotatene, en Ordresammendrag-side for å se gjennom bestillingen din og sende e-post, og en sluttside for å gi en utmerket avslutning på applikasjonen.

Test applikasjonen din på en mobil enhet

Velg nedlastingslenken for enheten din:
- For iOS (iPad eller iPhone), gå til App Store.
- For Android, gå til Google Play.
Åpne Power Apps på mobilenheten, og logg på med legitimasjonen for Microsoft-kontoen.
Appene du nylig har brukt, vises på standardskjermen når du logger på Power Apps Mobile.

Hjem er standardskjermen når du logger på. Den viser appene du nylig har brukt, og appene du har merket som favoritter.
Hvis du vil kjøre en app på en mobil enhet, velger du appflisen. Hvis dette er første gang du kjører en lerretsapp ved hjelp av Power Apps Mobile, viser en skjerm sveipebevegelsene.
Hvis du vil lukke en app, bruker du fingeren til å sveipe fra venstre kant av appen til høyre. På Android-enheter kan du også velge Tilbake-knappen og bekrefte at du hadde tenkt å lukke appen.

Merk deg

Hvis en app krever en tilkobling til en datakilde eller tillatelse til å bruke enhetens funksjoner (for eksempel kameraet eller posisjonstjenester), må du gi samtykke før du kan bruke appen. Vanligvis blir du bare spurt første gang du kjører appen.

Tilbakemeldinger

Var denne siden nyttig?