Del via


Kapittel 3: Bygge en prototype med lite kode

Obs!

Kapittel 2 refererte til mobilappen som brukes av feltteknikere og -ingeniører, og skrivebordsappen som brukes av lokalt ansatte. Kapitlene nedenfor fokuserer på design, implementering og utrulling av mobilappene som er bygd med Power Apps. Skrivebordsappene blir værende igjen som en øvelse for leseren.

Kiana er skeptisk til lavkodeløsninger og Power Apps. Kiana og Maria bestemmer seg likevel for å bygge en app sammen for å hjelpe feltteknikerne å kontrollere lagerbeholdningen (og om nødvendig å bestille deler), spørre i kunnskapsbasen og sjekke neste avtale når de er utenfor kontoret og utfører servicearbeid. Kiana og Maria planlegger å bruke denne opplevelsen til å finne ut hvordan de kan legge til kontroller og bruke formler i Power Apps.

Selv om det å bygge en første lavkodeprototype er en vanlig oppgave for selvlærte utviklere, bestemmer Kiana seg for å følge med på prosessen for å forstå hvordan appen bygges. Kiana trenger denne informasjonen for å hjelpe Maria å integrere datakildene fra den virkelige verden, nett-API-ene og andre nødvendige tjenester i appen.

Element 1: lagerstyring i felten

Marias opprinnelige mål er å bygge en lerretsapp som viser en liste over deler og gjør det mulig for brukeren å vise detaljene for en hvilken som helst del. Til slutt skal brukeren også kunne bestille en del. Denne første versjonen av appen vil imidlertid ganske enkelt prototyp, og den kommer ikke til å bli koblet til en serverdel ennå. Etter at Maria har fått tilbakemelding fra Caleb, som er den ledende feltteknikeren, samarbeider Maria med Kiana på integrering av lerretsappen med lagersystemet som kjører lokalt.

Maria er svært kjent med det eksisterende lagerstyringssystemet og forstår informasjonen det inneholder. Maria starter ved å opprette en Excel-arbeidsbok som inneholder tabeller med eksempeldata med detaljer for noen eksempeldeler. Feltene i tabellen er ID, Navn, CategoryID, Pris, Oversikt, NumberInStock og Bilde (en URL-adresse som refererer til et bilde av delen). Denne arbeidsboken kan brukes til å bygge og teste lerretsappen for å sikre at de nødvendige dataene vises riktig. Maria lagrer denne arbeidsboken på en OneDrive-konto med navnet BoilerParts.xlsx.

Obs!

Du finner en kopi av denne arbeidsboken i mappen Aktiva i Git-repositoriet for denne veiledningen.

Regneark med deler til koker, med en liste over deler med kolonnene Id, Navn, CategoryId, Pris, Oversikt, NumberInStock og Bilde.

Hvis du er en relasjonsdatabaseutformer, legger du merke til at Excel-arbeidsboken presenterer en denormalisert visning av dataene. I en relasjonsdatabase vil for eksempel CategoryID sannsynligvis være en numerisk identifikator som refererer til en separat tabell som inneholder detaljene for kategorien, inkludert navnet.

Obs!

URL-adressene i Bilde-kolonnen er for øyeblikket bare plassholdere. I den fullførte appen blir disse URL-adressene erstattet med adressene til ekte bildefiler.

Følg denne fremgangsmåten for å opprette appen med Power Apps.

  1. Logg på Power Apps.

  2. Hjem-siden, under Start fra data, velger du Excel Online.

    Power Apps Studio-startside.

  3. Tilkoblinger-siden velger du OneDrive for Business og velger deretter Opprett.

    Ny OneDrive-tilkobling.

  4. På siden OneDrive for Business velger du BoilerParts.xlsx-filen.

    Koble til Excel-arbeidsboken.

  5. Velg tabellen i Excel-filen (Maria opprettet tabellen ved å bruke standardnavnet Table1), og velg deretter Koble til.

    Koble til Excel-tabellen.

  6. Vent mens Power Apps genererer appen.

    Generer appen.

  7. Når appen er generert, vises skjermbildet Bla gjennom, med feltene CategoryID, ID og Bilde fra hver rad i deletabellen i arbeidsboken.

    Deler som vises på Bla gjennom-skjermen.

  8. Feltene som vises for øyeblikket, er ikke særlig nyttige for å hjelpe en tekniker med å velge et produkt. På ruten med Bla gjennom-skjermen velger du etiketten Varmeveksler i den første dataraden. På formellinjen velger du Text-egenskapen fra rullegardinlisten. Endre verdien for denne egenskapen til ThisItem.Name. Teksten i det første feltet i hver rad byttes for å vise delnavnet.

    Obs!

    I følgende bilde er Varmeveksler-etiketten som opprinnelig på skjemaet, endret til produktnavnet, 3.5 W/S Heater.

    Endre teksten for en etikettkontroll.

  9. Gjenta forrige trinn for ID- og Bilde-etikettene. Endre Text-egenskapen i ID-feltet til CategoryID og Text-egenskapen i Bilde-feltet til Overview. Bla gjennom-skjermbildet skal nå se ut som følgende bilde, noe som det er mer sannsynlig at en feltingeniør synes er nyttig for valg av deler.

    En liste over elementer som viser navnet på en del, kategorien den er i, og en beskrivende oversikt.

  10. Søkefunksjonen i søkeskjermbildet Bla gjennom fører som standard til bruk av feltene som opprinnelig var valgt da skjermbildet ble generertm, i dette tilfellet CategoryID, ID og Bilde. Resultatene sorteres etter CategoryID. Det er fornuftig å bytte dette til feltene Name, CategoryID og Overview, slik at resultatene sorteres etter Name. Velg BrowseGallery1-kontrollen i trevisningsruten. Velg egenskapen Items i rullegardinlisten til venstre på formellinjen. Dra nedre kant av formellinjen ned slik at formelen er fullstendig synlig. Formelen inneholder følgende uttrykk:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    Sorter og søk i felter.

  11. Endre søkeuttrykket slik at det refererer til feltene Name, CategoryID og Overview, ved å bruke følgende formel:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    
  12. Tittelen i skjemaoverskriften er ikke nyttig, og standardtemaet samsvarer ikke med VanArsdels utseende og virkemåte. I skjermbildet Bla gjennom velger du Table1-etiketten, og på formellinjen endrer du Text-egenskapen for etiketten til "Bla gjennom deler" (inkluder anførselstegnene i verdien).

  13. På verktøylinjen velger du Tema (du må kanskje utvide verktøylinjen for å vise flere elementer), og deretter velger du Skog-temaet. Fargene og stilen for Bla gjennom-skjermen endres slik at det samsvarer med temaet.

    Velg temaet.

Gjør Detaljer-skjermbildet nyttigere

Du har opprettet den grunnleggende appen og endret Bla gjennom-skjermbildet for å vise felt som en tekniker kan bruke til å identifisere en del. Appen inneholder også en Detaljer-skjerm, som viser all informasjonen for en valgt del. Feltene på denne skjermen vises ikke i en logisk rekkefølge, så du bør ordne dem på nytt. Du kan også slette ID-feltet fra dette skjermbildet fordi denne informasjonen ikke er relevant for en tekniker.

  1. Rull ned i trevisningsruten, og velg DetailScreen1. Dette skjermbildet viser detaljer om delen som en bruker velger i Bla gjennom-skjermbildet.

    Skjermbilde med detaljer om deler.

  2. I overskriften på Detaljer-skjermbildet i den midterste ruten velger du Table1-etiketten. På Egenskaper-fanen i den høyre ruten endrer du Text-egenskapen til Deledetaljer.

    Obs!

    I mange tilfeller kan du oppnå samme resultat ved å bruke formellinjen som Egenskaper-ruten. Noen egenskaper som bare er tilgjengelige via Egenskaper-ruten.

    Endre overskriften på skjermbildet for å bla gjennom deler.

  3. I trevisningsruten, under DetailScreen1, velger du DetailForm1. På Egenskaper-fanen i den høyre ruten velger du Rediger felter ved siden av Felter. I den midterste ruten velger og drar du feltene slik at de vises i følgende rekkefølge, fra topp til bunn:

    • Navn
    • CategoryID
    • Oversikt
    • Pris
    • NumberInStock
    • Bilde
    • ID

    Ordne felter på detaljskjermbildet.

  4. Velg ID-feltet, velg ellipsen som vises til høyre for feltet, og velg deretter Fjern på rullegardinmenyen som vises. Denne handlingen fjerner ID-feltet fra skjemaet.

    Fjern ID-feltet fra skjemaet.

  5. I trevisningsruten, under DetailForm1, velger du CategoryID_DataCard1. Dette elementet er en DataCard-kontroll som viser navnet på et felt (kalt for nøkkelen) og dennes verdi.

    CategoryID-datakortkontroll.

    Avansert-fanen i den høyre ruten velger du Lås opp for å endre egenskaper. I Data-delen endrer du DisplayName-feltet til "Kategori" (inkluder anførselstegnene).

    Obs!

    Som med Egenskaper-fanen er mange av egenskapene på Avansert-fanen også tilgjengelige via formallinjen. Du kan angi disse egenskapene ved å bruke formellinjen hvis du foretrekker det.

    Endre visningsnavnet for CategoryID-detaljfeltet.

  6. Gjenta det forrige trinnet for å endre nøkkelen for NumberInStock_DataCard1 til "Antall på lager" (inkluder anførselstegnene).

  7. Du må justere formateringen i Pris-feltet for å vise dataene som en valutaverdi. I trevisningsruten, under DetailForm1, under Price_DataCard1, velger du DataCardValue7. Dette er feltet som viser verdien i Pris-feltet. I DataCardValue7-ruten til høyre, på Avansert-fanen, endrer du Text-egenskapen til Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Formater prisen som valuta.

    Uttrykket Parent.Default refererer til dataelementet som den overordnede kontrollen (DataCard) er bundet til, i dette tilfellet Pris-kolonnen. Tekst-funksjonen formaterer denne verdien på nytt ved å bruke formatet som er angitt som det andre argumentet. I dette eksemplet er dette den lokale valutaen med to desimaler.

  8. Bildedatakortet skal vise et bilde av delen i stedet for URL-adressen til bildefilen. I trevisningsruten, under DetailForm1, under Image_DataCard1, velger du DataCardValue3, og deretter velger du Slett for å fjerne denne kontrollen.

  9. Velg Image_DataCard1. Velg + Sett inn i den venstre ruten. I ruten Sett inn utvider du Media og velger deretter Bilde.

    Erstatt en URL-adresse for et bilde med et bilde.

  10. Gå tilbake til trevisningsruten, og bekreft at Image1-tekstkontrollen er lagr til for kontrollen Image_DataCard1.

    Kontroller at bilde-kontrollen er lagt til.

  11. I trevisningsruten velger du Image_DataCard1. På Avansert-fanen i den høyre ruten endrer du Høyde til 500, slik at det er nok plass for et bilde å vises.

    Angi høyde for bildedatakort.

  12. I trevisningsruten velger du Image1. Angi følgende egenskaper:

    • Bilde: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Bredde: 550
    • Høyde: 550

    Obs!

    Bildet som vises, er tomt fordi URL-adressen i Excel-arbeidsboken bare er en plassholder. Du skal håndtere dette problemet og hente en reell URL-adresse når du knytter appen til en web-API i et senere kapittel.

Appen inneholder også en Rediger-skjerm, som gjør det mulig for brukeren å endre informasjonen for en del. En tekniker skal ikke kunne endre detaljene for en del, opprette nye deler eller slette deler fra katalogen.

  1. I trevisningsruten velger du EditScreen1. Velg ellipseknappen, og velg deretter Slett for å fjerne denne skjermen.

    Slett Rediger-skjermbildet.

  2. I trevisningsruten velger du DetailsScreen1. Legg merke at Power Apps Studio viser en feilmelding for dette skjermbildet. Denne feilen oppstår fordi DetailsScreen1 inneholder uttrykk som refererer til EditScreen1-skjermbildet, som ikke lenger finnes.

  3. I overskriften på DetailsScreen1 velger du blyantikonet (IconEdit1). OnSelect-egenskapen for denne kontrollen inneholder uttrykket EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Når Rediger-ikonet er valgt, kjører dette uttrykket og prøver å flytte til EditScreen1-skjermbildet.

    Rediger OnSelect-egenskapen.

  4. I trevisningsruten velger du IconEdit1 og velger deretter Slett. Dette ikonet er ikke lenger nødvendig.

  5. Velg IconDelete1, og velg deretter Slett. Dette ikonet brukes til å slette den gjeldende delen, og er heller ikke obligatorisk.

    Fjern slettings- og redigeringsikonene.

  6. Legg merke til at Deledetaljer-teksten er forsvunnet fra skjermhodet, og i stedet viser Power Apps Studio en feilmelding. Dette har skjedd fordi bredden på etikett-kontrollen som viser teksten, er beregnet. I trevisningsruten velger du LblAppName2. Undersøk Width-egenskapen. Verdien til denne egenskapen er resultatet av uttrykket Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    LblAppName2-kontrollen viser en breddefeil.

  7. Endre uttrykket for egenskapen Width til Parent.Width - Self.X. Feilen skal forsvinne, og teksten i Deledetaljer skal vises på nytt i skjermhodet.

  8. I trevisningsruten velger du BrowseScreen1. Det vises også en feilmelding i dette skjermbildet. Ikonet + på verktøylinjen (IconNewItem1) gjør det mulig for brukeren å legge til en ny del. OnSelect-egenskapen for dette ikonet refererer til skjermbildet EditScreen1.

    Ikon for nytt element som viser en feil.

  9. Velg IconNewItem1, og velg deretter Slett. Som før forsvinner teksten i hodet på skjermen, og det vises en feilmelding og av samme årsak.

  10. I trevisningsruten, under BrowseScreen1, velger du LblAppName1. Endre uttrykket for Width-egenskapen ved å fjerne referansen til IconNewItem1.Width. Det nye uttrykket skal være Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Endre etikettbredden.

  11. Det er fortsatt et problem med overskriften. Selv om teksten Bla gjennom deler vises igjen, vises det også en feil, og ikonene for oppdatering og sortering er på feil plass. I trevisningsruten velger du IconSortUpDown1. Finn X-egenskapen for denne kontrollen. Denne egenskapen bestemmer den vannrette plasseringen av ikonet i hodet. Dette beregnes for øyeblikket basert på bredden på IconNewItem1-kontrollen.

    Sorteringsikonfeil.

  12. Endre uttrykket for egenskapen X til Parent.Width - Self.Width.

  13. I trevisningsruten velger du IconRefresh1. Endre uttrykket for egenskapen X til Parent.Width - IconSortUpDown1.Width - Self.Width. Alle feilene skal forsvinne.

Lagre og test appen

Nå kan du lagre og teste appen.

  1. Velg Fil > Lagre som.

  2. Under Lagre som velger du Skyen, angir navnet VanArsdelApp og velger deretter Lagre.

    Lagre appen.

  3. Velg tilbake-pilen for å gå tilbake til Hjem-skjermen.

    Gå tilbake til Hjem-skjermen.

  4. Velg F5 for å forhåndsvise appen. På siden Bla gjennom deler velger du den høyre vinkelparentesen (>) til høyre for en del. Detaljer-skjermen for delen vises.

    Første kjøring av appen.

  5. Velg den venstre vinkelparentesen (<) i hodet på Detaljer-skjermen for å gå tilbake til Bla gjennom-skjermen.

  6. På skjermen Bla gjennom deler skriver du inn tekst i Søk-boksen. Når du skriver, filtreres elementene til bare å vise elementer med samsvarende tekst i feltene Name, CategoryID eller Overview.

    Søk på Bla gjennom deler-skjermen.

  7. Lukk forhåndsvisningsvinduet, og gå tilbake til Power Apps Studio.

Element 2: Kunnskapsbase i felten

For å få tilgang til kunnskapsbasen ser Maria og Caleb (teknikeren) for seg et enkelt grensesnitt der brukeren skriver inn et søkeord og appen viser alle kunnskapsbaseartikler som omtaler ordet. Maria vet at denne prosessen kommer til å involvere Azure Cognitive Search, men hun verken trenger eller ønsker å forstå hvordan det fungerer. Maria beslutter derfor bare å sørge for det grunnleggende brukergrensesnittet og samarbeide senere med Kiana om å legge til den faktiske funksjonaliteten.

Maria bestemmer seg for å opprette en ny skjerm basert på listemalen som er tilgjengelig i Power Apps Studio.

  1. På verktøylinjen på Hjem-skjermen i Power Apps Studio velger du Ny skjerm og deretter Liste.

    Listemalen.

  2. I skjermoverskriften velger du etiketten som viser teksten [Title]. Endre Text-egenskapen til "Spørring" (inkluder anførselstegnene).

    Endre overskriftsteksten på spørringsskjermen.

  3. I skjermoverskriften velger du plusstegnet (+) og velger deretter Slett. Ikonet + er ment å gjøre det mulig for brukeren å legge til flere elementer i listen. Kunnskapsbasen er bare for spørring, så denne funksjonen er ikke nødvendig.

    Fjern plussikonet (+).

    Merk at hvis du fjerner dette ikonet, fører dette til en feil i hodet på grunn av måten plasseringen og bredden på de andre elementene beregnes på. Du så dette tidligere med skjermbildet for lageradministrasjon, og løsningen er den samme, som beskrevet i fremgangsmåten nedenfor.

  4. I trevisningsruten ruller du ned til Screen1-delen og velger LblAppName3. Endre Width-egenskapen til formelen Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Endre overskriftsbredden på spørringsskjermen.

  5. I trevisningsruten velger du IconSortUpDown2. Endre X-egenskapen til formelen Parent.Width - IconSortUpDown2.Width.

  6. I trevisningsruten velger du IconRefresh2. Endre X-egenskapen til Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Dette skal løse alle feilene på skjermen.

  7. Velg Fil > Lagre.

  8. I boksen Versjonsnotat skriver du inn La til UI for kunnskapsbase, og deretter velger du Lagre.

  9. Gå tilbake til Hjem-skjermen, og velg F5 for å forhåndsvise den nye skjermen. Den skal ut som bildet nedenfor.

    Spørringsskjerm som kjører.

    Vær oppmerksom på at hvis du velger ikonet > ved siden av noen av eksempeloppføringene, fungerer ikke detaljfunksjonaliteten for øyeblikket. Du skal løse dette senere når du integrerer Azure Cognitive Search i appen.

  10. Lukk forhåndsvisningsvinduet, og gå tilbake til Power Apps Studio.

Element 3: Planlegging og notater i felten

Maria arbeider sammen med Malik, som er resepsjonist på kontoret, for å utforme grensesnittet for feltplanleggingen og avtalene som er del av appen. Malik har en Excel-arbeidsbok med noen eksempeldata som Maria kan bruke til å bygge avtaleskjermen. Arbeidsboken inneholder en tabell med følgende kolonner:

  • ID (avtale-ID-en)
  • Kunde-ID (en unik identifikator for kunden)
  • Kundenavn
  • Kundeadresse
  • Problemdetaljer (en tekstbeskrivelse av problemet kunden opplever)
  • Kontaktnummer
  • Status
  • Avtaledato
  • Avtaletidspunkt
  • Notater (en tekstbeskrivelse med eventuelle notater lagt til av teknikeren)
  • Bilde (et bilde av teknikeren, enten i arbeidstilstand etter reparasjon eller som et tilleggsbilde for teknikerens notater)

Avtalearbeidsbok.

Obs!

Som med dataene for administrasjon av feltlageret, presenterer denne arbeidsboken en denormalisert visning av dataene. I det eksisterende avtalesystemet lagres disse dataene i separate tabeller som inneholder avtaledata og kundedata.

Maria lagrer denne filen på en OneDrive-konto med navnet Appointments.xlsx. Maria husker at standardnavnet for tabellen tidligere ble brukt i arbeidsboken, og at tittelen måtte endres på de ulike skjermene som ble generert, så derfor endrer hun navnet på tabellen i arbeidsbok til Avtaler.

Obs!

Denne arbeidsboken er tilgjengelig i mappen Aktiva i Git-repositoriet for denne veiledningen.

Maria ønsker å bygge avtaledelen i appen direkte fra Excel-filen. Maria bestemmer seg for å følge en lignende metode som for funksjonen for administrasjon av feltlagerbeholdning, bortsett fra at teknikeren denne gangen får tillatelse til å opprette og redigere avtaler.

I utgangspunktet beslutter Maria seg for å bygge avtaleskjermene som en egen app. På denne måten kan Maria bruke Power Apps Studio til å generere mye av appen automatisk. I Power Apps Studio kan du for øyeblikket ikke generere flere skjermbilder fra en datatilkobling i en eksisterende app. Etter at Maria har opprettet og testet skjermene, kopierer hun dem til feltbeholdningen og kunnskapsbaseappen.

Obs!

En alternativ metode er å legge til Avtaler-tabellen i Excel-filen som en ekstra datakilde i den eksisterende appen, og deretter håndutforme skjermene for avtaler. Maria valgte å generere de nye skjermene fra arbeidsboken og kopiere skjermene. Maria er mer kjent med konseptene for kopiering og innliming enn bygging av skjermer manuelt, og kommer gradvis til å lære hvordan hun kan lage skjermer fra grunnen av under byggingen av denne appen.

Slik oppretter du avtaleappen

  1. Velg Fil på menylinjen i Power Apps Studio.

    Fil-menyen.

  2. Velg Ny i den venstre ruten. I hovedruten velger du boksen OneDrive for Business - Telefonoppsett.

    Opprett en ny app.

  3. I Tilkoblinger-ruten velger du Appointments.xlsx.

    Ny app fra avtalearbeidsboken.

  4. Velg Avtaler-tabellen i Excel-filen, og velg deretter Koble til.

    Velg avtaletabellen.

  5. Vent mens appen genereres. Når den nye appen vises, inneholder den en Bla gjennom-skjerm, en Detaljer-skjerm og en Rediger-skjerm, når standardtemaet brukes.

    Den genererte avtaleappen.

  6. I trevisningsruten, delen BrowseScreen1 under BrowseGallery1, velger du Image1, og deretter velger du Slett. Bla gjennom-skjermbildet skal bare vise avtaler, ikke bilder tilknyttet.

    Slett bildekontrollen.

    Legg merke til at hvis du fjerner Image1-kontrollen, forårsaker det flere feil på skjermen fordi bredden og plasseringen til Title1-kontrollen begge refererer til Bilde-kontrollen. Du skal løse disse problemene i trinnet nedenfor.

  7. I trevisningsruten, under BrowseGallery1, velger du Title1. Endre verdien i X-egenskapen til 16. Endre formelen i egenskapen Width til Parent.TemplateWidth - 104. Dette skal løse feilene på skjermen.

  8. I trevisningsruten, under BrowseGallery1, velger du Body1. Denne kontrollen viser for øyeblikket kontakttelefondetaljer for kunden. Endre verdien i egenskapen Text til ThisItem.'Kundenavn' (inkluder enkle anførselstegn).

    Endre Body1-kontrollen til kundenavnet.

    Detaljene på Bla gjennom-skjermen viser nå kundenavnet.

  9. I trevisningsruten velger du BrowseGallery1. Bruk formellinjen til å undersøke uttrykket i egenskapen Items. Kontrollen søker etter avtaler ved hjelp av avtaledatoen, -klokkeslettet og kontaktnummeret. Endre denne formelen for å søke etter kundenavnet i stedet for kontaktnummeret:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
    

    Legg merke til at avtalene sorteres etter dato og klokkeslett (de to første feltene vises).

  10. I trevisningsruten sletter du IconNewItem1. Bare lokalt ansatte kan reservere nye avtaler for ingeniører og reparatører. Legg merke til at denne handlingen fører til feil i skjemaet på grunn av bredden på og plasseringen av andre kontroller i hodereferanseikonet du nettopp fjernet.

  11. I trevisningsruten velger du LblAppName1. Endre formelen for Width-egenskapen. til Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. I trevisningsruten velger du IconRefresh1. Endre verdien for egenskapen X til Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. I trevisningsruten velger du iconSortUpDown1. Endre verdien for egenskapen X til Parent.Width - Self.Width.

  14. I trevisningsruten velger du BrowseScreen1, og deretter velger du ellipseknappen (...). På rullegardinmenyen som vises, velger du Gi nytt navn og endrer navnet på skjermbildet til BrowseAppointments.

    Endre navn på Bla gjennom-skjermbildet.

  15. Bruk samme teknikk til å endre navnet på BrowseGallery1-kontrollen til BrowseAppointmentsGallery.

Dette fullfører Bla gjennom-skjermbildet.

Slik oppretter du detaljskjermbildet

Nå kan du se nærmere på Detaljer-skjermbildet.

  1. i trevisningsruten ruller du ned til delen DetailsScreen1. Du kan se at detaljene presenteres i alfabetisk rekkefølge etter feltnavn, og noen nyttige biter med informasjon, for eksempel Notater-feltet, vises ikke i det hele tatt.

    Oppsett for skjermbildet for avtaledetaljer.

  2. I trevisningsruten velger du DetailForm1. På Egenskaper-fanen i den høyre ruten velger du Rediger felter ved siden av Felter. I den midterste ruten velger du hvert av følgende felter, og deretter velger du Slett:

    • Avtaledato
    • Avtaletidspunkt
    • Kunde-ID
    • ID
  3. Velg + Legg til felt, og legg til følgende felter:

    • Merknader
    • Problemdetaljer
    • Status

    Legg til felter i detaljskjermbildet.

  4. Dra hvert felt slik at de vises i følgende rekkefølge, fra topp til bunn:

    • Kundenavn
    • Kundeadresse
    • Kontaktnummer
    • Problemdetaljer
    • Status
    • Merknader
    • Image
  5. I trevisningsruten velger du Notes_DataCard1. Endre Height-egenskapen til 320.

    Endre størrelsen på notatfeltet.

  6. I trevisningsruten sletter du IconDelete1. Ingeniører skal ikke kunne fjerne avtaler fra systemet.

  7. Velg LblAppName2, og endre Width-egenskapen til Parent.Width - Self.X - IconEdit1.Width.

  8. Bruk metoden som ble beskrevet tidligere, og endre navnet på DetailsScreen1 til AppointmentDetails.

Slik redigerer du Rediger-skjermbildet

Det siste skjermbildet du kan se på nå, er Rediger-skjermbildet.

  1. I trevisningsruten velger du EditScreen1.

  2. I trevisningsruten, i EditScreen1-delen, velger du EditForm1. På Egenskaper-fanen i den høyre ruten velger du Rediger felter ved siden av Felter.

  3. Fjern følgende felter:

    • Kundeadresse
    • ID
    • Kunde-ID
    • Avtaledato
    • Avtaletidspunkt
  4. Legg til følgende felter:

    • Problemdetaljer
    • Status
    • Merknader
  5. Dra hvert felt slik at de vises i følgende rekkefølge, fra topp til bunn:

    • Navn på kontaktperson
    • Kundenummer
    • Problemdetaljer
    • Status
    • Merknader
    • Image
  6. Velg Kundenavn-feltet, og utvid det for å vise egenskapene. Endre Kontrolltype til Vis tekst. Denne endringen gjør kontrollen skrivebeskyttet. Det er nyttig å se kundens navn på Rediger-skjermbildet, men en ingeniør skal ikke kunne endre det.

    Gjør kundenavnet skrivebeskyttet.

  7. Velg Kontaktnummer-feltet, og utvid det for å vise egenskapene. Endre Kontrolltype til Vis tekst. Dette feltet skal også være skrivebeskyttet.

  8. Velg Notater-feltet, utvid det, og endre Kontrolltype til Rediger tekst på flere linjer. Denne innstillingen gjør det mulig for teknikeren å legge til detaljerte notater som kan omfatte flere linjer.

  9. Velg Status-feltet, utvid det, og endre Kontrolltype til Tillatte verdier.

  10. I trevisningsruten velger du Status_DataCard5. På Egenskaper-fanen i den høyre ruten velger du Lås opp for å endre egenskaper. Rull ned til egenskapen AllowedValues, og endre teksten til ["Fast", "Bestilte deler", "Uløst"] (inkluder klammeparentesene). Feltingeniøren kan bare sette Status til en av disse definerte verdiene.

    Angi de tillatte statusverdiene.

  11. I trevisningsruten endrer du navnet på EditScreen1 til EditAppointment.

Nå kan du lagre og teste appen.

  1. Velg Fil > Lagre som.

  2. Under Lagre som velger du Skyen, angir navnet VanArsdelAppointments og velger deretter Lagre.

  3. Velg tilbake-pilen på verktøylinjen i Power Apps Studio for å gå tilbake til Hjem-skjermen.

  4. Velg F5 for å forhåndsvise appen. På Avtaler-siden velger du ikonet > ved siden av en avtale. Detaljer-skjermbildet for avtalen skal vises. Velg Rediger i overskriften for å oppdatere avtalen. Kontroller følgende:

    • Feltene for kundenavn og kontaktnummer er skrivebeskyttet.
    • Statusfeltet er begrenset til verdiene i rullegardinlisten.
    • Du kan angi notater som strekker seg over flere linjer.
    • Du kan laste opp en bildefil i bildefeltet.

    Obs!

    En forbedring som du legger til senere, gjør at du kan ta et bilde med telefonen fra appen og legge det til i bildefeltet.

    Avtaleappen kjører.

Kombiner skjermbildene i én app

Maria har bygd to apper, men ønsker å kombinere dem i én app. For å gjøre dette kopierer Maria skjermbildene for avtaleappen til appen for administrasjon av feltbeholdning og kunnskapsbaseappen på følgende måte:

  1. Åpne et nytt nettleservindu, og logg på Power Apps Studio med kontodetaljene.

  2. Velg Apper i ruten til venstre, velg VanArdselApp, og velg deretter Rediger.

    Åpne VanArsdel-appen.

  3. På verktøylinjen velger du Ny skjerm, og deretter velger du Tom. Denne handlingen legger til en ny skjerm i appen, der du skal kopiere kontrollene for Bla gjennom-skjermen for VanArsdelAppointments-appen.

    Legg til en tom skjerm.

  4. Den nye skjermen får navnet Screen2. I trevisningsruten endrer du navnet til BrowseAppointments.

  5. Gjenta det forrige trinnet to ganger til for å legge til to tomme skjermer til (Screen3 og Screen4).

  6. Endre navnet på Screen3 til AppointmentDetails, og endre navnet på Screen4 til EditAppointment.

  7. Velg Data-ikonet på den venstre verktøylinjen i Power Apps Studio. I Data-ruten velger du Legg til data. I rullegardinlisten Velg en datakilde, i Søk-feltet, angir du OneDrive, og deretter velger du OneDrive for Business.

    Velg datakilden.

  8. Velg Excel-filen Appointments.xlsx, velg Avtaler-tabellen, og velg deretter Koble til.

  9. Bytt til nettleservinduet som viser VanArsdelAppointments-appen.

  10. På verktøylinjen velger du Tema (du må kanskje utvide verktøylinjen for å vise flere elementer), og deretter velger du Skog-temaet. Dette er det samme temaet som brukes av VanArsdel-appen.

  11. Velg trevisningsikonet på den venstre verktøylinjen, velg BrowseAppointments-skjermen, og velg deretter Ctrl+A. Denne handlingen velger alle kontrollene på skjermen.

  12. Velg Ctrl+C for å kopiere disse kontrollene til utklippstavlen.

  13. Gå tilbake til nettleservinduet som viser VanArsdelApp-appen.

  14. Velg trevisningsikonet på den venstre verktøylinjen, og velg deretter BrowseAppointments-skjermen.

  15. Velg Ctrl+V for å lime inn kontrollene på skjermen.

    Obs!

    Noen ganger vises skjermhodet litt for lavt nede. Du kan løse dette problemet ved å velge kontrollene IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 og RectQuickActionBar1_1 i ruten Trevisning (hold nede Skift mens du klikker for å velge flere kontroller samtidig), og bruk deretter musen eller piltastene til å flytte dem opp i utformingsvisningsruten.

  16. Gå tilbake til nettleservinduet som viser VanArsdelAppointments-appen, og velg og kopier kontrollene i AppointmentDetails-skjermen til utklippstavlen (Ctrl+A fulgt av Ctrl+C).

  17. Gå tilbake til nettleservinduet som viser VanArsdelApp-appen, velg AppointmentDetails-skjermen, og lim deretter inn kontrollene (Ctrl+V). Juster om nødvendig plasseringen av kontrollene i skjermhodet.

    Obs!

    Det vises en feil i hodet i på AppointmentDetails-skjermen. Denne feilen oppstår fordi skjermen refererer til kontroller på EditAppointment-skjermen, som ikke er kopiert ennå. De neste trinnene skal løse denne feilen.

  18. Gå tilbake til nettleservinduet som viser VanArsdelAppointments-appen, og velg og kopier kontrollene på EditAppointment-skjermen til utklippstavlen.

  19. Gå tilbake til nettleservinduet som viser VanArsdelApp-appen, velg EditAppointment-skjermen, og lim deretter inn kontrollene. Igjen, flytt kontrollene i skjermhodet om nødvendig.

  20. I trevisningsruten velger du AppointmentDetails-skjermen og bekrefter at feilen som tidligere ble vist, nå er forsvunnet.

  21. I trevisningsruten velger du BrowseScreen1-skjermen. Endre navnet på denne skjermen til BrowseParts.

  22. Endre navnet på DetailsScreen1-skjermen til PartDetails.

  23. Endre navnet på Screen1-skjermen til Knowledgebase.

    Obs!

    Det er lurt å gi nytt navn til skjermer for å gjenspeile funksjonen i stedet for å bruke standardnavnene som genereres av Power Apps Studio, spesielt hvis en app inneholder flere skjermer. Dette kan bidra til å unngå forvirring senere hvis appen endres av en annen utvikler.

Legge til en startskjerm i appen

Det siste trinnet er å legge til en startskjerm i appen. Startskjermen gjør at teknikeren kan bevege seg mellom de ulike delene av appen (lagerstyring, kunnskapsbase og avtaler).

  1. På verktøylinjen i VanArsdelApp-appen velger du Ny skjerm, og deretter velger du Tom.

  2. I trevisningsruten endrer du navnet på Screen2 til Hjem.

  3. Gå til verktøylinjen og velg Sett inn. Utvid Medier i listen over kontroller, og velg deretter Bilde. Kontrollen legges til på skjermen.

    Legg til en bilde-kontroll på startskjermen.

  4. Sett X-posisjonen for kontrollen til 16 og Y-posisjonen til 22. Endre bredden til 605 og høyden til 127. Endre Bildeposisjon til Fyll.

    Angi bildestørrelse og -posisjon.

  5. Hold deg på Egenskaper-fanen, gå til Bilde-rullegardinlisten, velg + Legg til en bildefil, og last deretter opp VanArsdelLogo.png-bildet til kontrollen.

    Obs!

    Bildefilen er tilgjengelig i mappen Aktiva i Git-repositoriet for denne veiledningen.

    Legg til en logo i bildet.

  6. Fra listen over kontroller legger du til fire Tekstetikett-kontroller på skjemaet og plasserer dem slik at de er stablet under VanArsdel-logoen.

    Legg til tekstetikettkontroller.

  7. Velg den øvre Tekstetikett-kontrollen. På Egenskaper-fanen i den høyre ruten setter du Text-egenskapen til Neste avtale. Angi Skriftstørrelse til 30, og bruk fargevelgeren til å sette skriftfargen til grønn (for å matche logoen).

    Angi skriftfargen.

  8. Velg den andre Tekstetikett-kontrollen. Endre verdien for Text-egenskapen til First(Appointments).'Kundenavn' (inkluder anførselstegnene). Denne formelen henter kundenavnet fra den første raden i avtaletabellen.

    Vis kundenavnet.

    Obs!

    For øyeblikket fungerer denne formelen bare som en plassholder. Du skal endre etiketten senere for å hente neste avtale for teknikeren i stedet for å vise den første.

  9. Velg den tredje Tekstetikett-kontrollen, og sett Text-egenskapen til First(Appointments).'Avtaledato'.

  10. Sett Text-egenskapen for den fjerde etikettkontrollen til First(Appointments).'Avtaletidspunkt'. Sett egenskapen Font size til 30.

  11. Legg til en Rektangel-kontroll fra listen over kontroller. Angi følgende egenskaper for denne kontrollen:

    • Visningsmodus: Vis
    • X: 0
    • Y: 632
    • Bredde: 635
    • Høyde: 1

    Denne kontrollen fungerer som et visuelt skilletegn midt på skjermen.

  12. Legg til tre Knapp-kontroller på skjermen, ordnet loddrett og med jevne mellomrom under skilletegnet. Sett Text-egenskapen for den øverste knappen til Avtaler, Text-egenskapen for den midterste knappen til Deler og Text-egenskapen for den nederste knappen til Kunnskapsbase.

    Knapper på startskjermen.

  13. Velg Avtaler-knappen. Endre uttrykket i OnSelect-handlingen til formelen Navigate(BrowseAppointments, ScreenTransition.Fade). Denne handlingen bytter visningen til skjermbildet for avtaler når brukeren velger knappen.

    Avtaler-knappen.

  14. Sett OnSelect-handlingen for Deler-knappen til Navigate(BrowseParts, ScreenTransition.Fade).

  15. Sett OnSelect-handlingen for Kunnskapsbase-knappen til Navigate(Knowledgebase, ScreenTransition.Fade).

I tillegg til å navigere fra Hjem-skjermen til de andre skjermene i systemet trenger skjermene Avtaler, Deler og Kunnskapsbase en metode for å gjøre det mulig for brukeren å gå tilbake til Hjem-skjermen. Maria bestemmer seg for å legge til tilbakeknapper i disse skjermene.

  1. I trevisningsruten velger du BrowseParts-skjermen.

  2. Velg RectQuickActionBar1-kontrollen for å gi den fokus.

  3. Velg Sett inn-menyen, og velg Legg til ikon. Flytt ikonet til venstre for RectQuickActionBar1-kontrollen. Vær oppmerksom på at ikonet vil skjule en del Bla gjennom deler-etiketten.

    Legg til et ikon.

  4. trevisningsmenyen endrer du navnet på den nye Ikon-kontrollen til IconReturn1.

  5. Endre formelen for OnSelect-handlingen til uttrykket Back(ScreenTransition.Fade). Tilbake-funksjonen navigerer brukeren til den forrige skjermen han/hun besøkte.

  6. Egenskaper-fanen endrer du Icon-egenskapen til < Venstre.

  7. Velg Bla gjennom deler-etiketten i skjermoverskriften. Endre X-egenskapen til IconReturn1.Width + 20. Bla gjennom deler-etiketten skal ikke lenger være delvis skjult.

    Flytt Bla gjennom deler-etiketten.

  8. Følg prosessen beskrevet i trinn 16 til 22, og legg til et ikon kalt IconReturn2 for RectQuickActionBar3-kontrollen på Kunnskapsbase-skjermen.

  9. På samme måte kan du legge til et ikon kalt IconReturn3 for RectQuickActionBar1_1-kontrollen i BrowseAppointments-skjermen.

  10. I trevisningsruten velger du App-objektet. Endre egenskapen StartScreen til uttrykket Hjem. Dette sikrer at Hjem-skjermen vises når appen starter:

    Angi OnStart-formelen for appen.

    Obs!

    Hvis du ikke angir hvilken skjerm som skal vises når appen starter, brukes skjermen som vises øverst i trevisningsruten. Hvis du vil flytte en skjerm til begynnelsen av listen, høyreklikker du skjermen i trevisningsruten og velger Flytt opp til den er øverst.

Til slutt kan du teste appen.

  1. Velg Fil > Lagre. I Versjonsnotater-boksen skriver du Komplett versjon med Hjem-skjerm og velger deretter Lagre.

  2. Velg tilbakepilen for å gå tilbake til Hjem-skjermen, og velg deretter F5 for å kjøre appen.

  3. Kontroller at Hjem-skjermen for appen vises.

  4. Velg Avtaler. Avtaleskjermen skal vises.

  5. Velg tilbake-pilen for å gå tilbake til Hjem-skjermen.

  6. Velg Deler. Nettleseren for deler skal vises.

  7. Velg tilbake-pilen for å gå tilbake til Hjem-skjermen.

  8. Velg Kunnskapsbase. Skjermen for spørring i kunnskapsbasen skal vises.

  9. Velg tilbake-pilen for å gå tilbake til Hjem-skjermen.

  10. Lukk forhåndsvisningsvinduet, og gå tilbake til Power Apps Studio.

Prototypeappen er nå fullført.