Øvelse – Legge til en datakilde i lerretsappen og utforme funksjonelle sider

  • 8 minutter

I Power Apps kan du koble dataene til et allerede eksisterende program eller til et program som du bygger fra grunnen av. Appen kan koble til SharePoint, Microsoft Dataverse, Salesforce, OneDrive eller en annen datakilde.

Vi skal bruke SharePoint som vår primære datakilde for dette programmet. Du kan koble til SharePoint-nettstedet for automatisk å generere en app fra en egendefinert liste, opprette en tilkobling før du legger til data i en eksisterende app eller bygger en app fra grunnen av.

Opprette et SharePoint-område

  1. Logg på SharePoint-portalen med Microsoft-organisasjonens legitimasjon.

  2. Velg + Opprett område på startsiden for SharePoint for å opprette SharePoint-området.

    skjermbilde som viser hvordan du oppretter området på startsiden for SharePoint.

  3. På startsiden for SharePoint finner du følgende informasjon:

    • Velg områdetype. valget er kommunikasjonsområde eller gruppeområde. Velg kommunikasjonsområde.

    • Skriv inn et passende navn for området. for eksempel Enkelt salg.

    • Legg til områdebeskrivelsen om nødvendig (valgfritt).

    • Velg språk du ønsker fra rullegardinlisten.

  4. Velg Fullfør for å opprette et SharePoint- nettsted for innlasting av dataene.

    Skjermbilde av oppdatering av områdedetaljer.

Et moderne SharePoint-område opprettes og er klart for bruk i løpet av sekunder. Nå kan du opprette en liste, et dokumentbibliotek, en side og så videre på det nylig opprettede området.

Notat

Hvis du valgte gruppeområde, opprettes det også en Microsoft 365-gruppe.

Opprett SharePoint-liste

En SharePoint-liste samler inn data med en struktur, på samme måte som en tabell, et regneark eller en enkel database. Den kan inneholde mange forskjellige typer informasjon, for eksempel tall, tekst, vedlegg og til og med bilder.

For vårt Easy Sales-program oppretter vi en liste som inneholder detaljer om alle produktkategoriene: Sofaer, stoler, tabellerog tepper.

  1. Velg rullegardinlisten Enkelt salgpå det nylig opprettede SharePoint-området under navnet Enkelt salg , og velg deretter Liste for å opprette SharePoint-listen.

    Skjermbilde av valglisten.

  2. I vinduet Opprett en liste velger du Tom liste for å opprette en SharePoint- liste fra grunnen av.

    Skjermbilde av å velge Tom liste.

  3. Konfigurer Opprett-ruten på følgende måte:

    • Skriv inn et passende navn for listen. for eksempel Enkelt salg.

    • Fyll ut beskrivelsen hvis nødvendig (valgfritt).

    • La avmerkingsboksen Vis i områdenavigasjon være merket av.

    • Velg Opprett.

      skjermbilde av Opprett-ruten.

Legge til data i SharePoint-listen

Når listen er opprettet, er det på tide å legge til dataene. Her betyr «data» detaljene for et bestemt produkt. Produktdetaljene inkluderer følgende informasjon: Navn, Bilde, Pris, Dimensjoner, Vekt, Farge, Primærmateriale, Område, Høyde og 3D-modell/bilde av produktet som skal vises i blandet virkelighet.

  1. Velg + Legg til kolonne for å legge til en kolonne av en bestemt type, i listen Enkelt salg. Listen nedenfor viser kolonnene som må opprettes, med navnene og typene i dette formatet: navnet på kolonnen – kolonnetype.

    • Name: Enkel linje med tekst
    • ImageLink-: Enkel linje med tekst
    • Pris: Enkel linje med tekst
    • dimensjoner: Enkel linje med tekst
    • Tykkelse: Enkel linje med tekst
    • Farge: Enkel linje med tekst
    • PrimaryMaterial: Enkel linje med tekst
    • høyde: Tall
    • Dybde: Tall
    • bredde: Tall
    • Pris/cm2: Tall
    • ProductCategory: Enkel linje med tekst
    • FileType: Enkel linje med tekst

    Velg kolonnetypen fra rullegardinlisten. Velg for eksempel enkelt linje med tekst.

    Skjermbilde av å velge enkel linje med tekst.

    Skriv inn detaljene for kolonnen i Opprett kolonnen-fanen, og velg Lagre.

    skjermbilde av oppretting av en kolonne.

    Gjenta samme fremgangsmåte for resten av kolonnene i den foregående listen.

    Notat

    Når du har opprettet en SharePoint-liste, opprettes en standard Tittel-kolonne som du kan gi nytt navn til som navn.

  2. Når vi har lagt til kolonnene, må vi legge til de faktiske dataene under disse kolonnene. Begynn å legge til data i kolonner ved å laste ned den egendefinerte mappen som inneholder alle produktdetaljene for alle fire listene. Hvis du vil ha tilgang til dataene, velger du koblingen nedenfor, velger Flere filhandlinger-knappen (...) øverst til høyre på siden, og velger Last ned.

    egendefinert mappe i Power Apps

  3. Velg + Ny for å legge til et element, og fyll deretter ut de nødvendige detaljene som angitt i den nedlastede Excel-filen. Velg Lagre for å lagre de angitte detaljene.

    Skjermbilde av å velge Ny eller Rediger i rutenettvisning for å legge til nytt element.

    Notat

    Rutenettvisning lar deg legge til informasjon fritt i forskjellige rader eller kolonner.

  4. Begynn å legge til dataene i de respektive kolonnene, som vist i figuren:

    Skjermbilde av SharePoint-listen med mer informasjon

    Notat

    Hvis du vil inkludere bilder av dine egne, kan du legge til bildekoblingene til offentlige bilder som er tilgjengelige på Internett under ImageLink-kolonnen. Du kan få bildekoblingene ved å høyreklikke og velge alternativet Kopier bildeadresse.

    Notat

    Du trenger ikke høyde-, dybde- og breddeverdiene for kategorilisten carpet. Denne produktkategorien vil ta opp arealverdien målt under Mål i MR økt og gi ut prisen på teppet etter beregnet areal. Vi har imidlertid lagt til kolonnen Pris/cm2 for å hjelpe beregningsprosessen.

Opprett tilkobling

Nå som alle dataene som kreves for programmet, lagres i SharePoint-listen, oppretter vi en tilkobling i Power Apps. Når tilkoblingen er opprettet, kan du enkelt få tilgang til SharePoint-dataene gjennom programmet.

  1. Hvis du vil begynne å opprette en tilkobling, logger du på Power Apps- og velger Tilkoblinger i venstre navigasjonsfelt. Velg deretter + Ny tilkobling nær øvre venstre hjørne.

  2. Velg SharePoint-. Vi velger SharePoint- fordi vi har lagret de nødvendige dataene i SharePoint- lister.

    Skjermbilde av å velge SharePoint.

  3. Hvis du vil koble til SharePoint Online, velger du Koble til direkte (skytjenester), og deretter velger du Opprett, og deretter oppgir du legitimasjon hvis du blir bedt om det.

    Skjermbilde av å velge Opprett.

  4. Tilkoblingen opprettes, og du kan bygge en app fra grunnen av.

    Notat

    Selv om tilkoblingen er opprettet, kan du fortsatt legge til, redigere og slette data som er lagret i SharePoint-listen. Alle endringene gjenspeiles i programmet gjennom tilkoblingen.

La oss begynne å bygge Easy Sales-programmet basert på SharePoint-dataene, og deretter legge til data fra andre kilder, hvis det er ønsket. Ved å følge denne fremgangsmåten kan du utforme noen av hovedsidene i programmet. Du lærer for eksempel å utforme en side for velkomstbilde, produktside og produktliste. Vi får også tilgang til data som er lagret i SharePoint-listen gjennom Power Apps-gallerikontrollen.

Åpne en tom app

  1. Gå til hjemmesiden Power Apps, og velg deretter Opprett på menyen til venstre. Velg Tom app, og velg deretter Opprett under Tom lerretsapp.

    Skjermbilde av å velge lerretsapp fra tom.

  2. Angi et navn for appen. for eksempel Easy-Sales. Velg Telefon, og velg deretter Opprett.

    Skjermbilde av å angi appnavn og velge Opprett.

    Power Apps Studio oppretter en tom app for telefoner.

    Notat

    Selv om du kan utforme en app fra grunnen av for ulike enheter, fokuserer dette emnet på å utforme en app for telefoner.

  3. Hvis dialogboksen Velkommen til Power Apps Studio åpnes, velger du Hopp over.

    Skjermbilde av å velge hopp over alternativet.

Koble til data

Hvis du vil inkludere data i Power App, må du koble til dataene via koblingene i programmet. Siden vi har lagret alle dataene i en SharePoint-liste, velger vi SharePoint- som en av koblingene.

  1. Velg alternativet Data til venstre i Power Apps Studiotil venstre.

  2. Når du har åpnet Data-ruten, velger du knappen Legg til data for å koble til dataene.

  3. Utvid Koblinger-delen i vinduet Velg en datakilde, og velg alternativet SharePoint.

    Skjermbilde av å velge alternativet Legg til data og SharePoint.

  4. I forrige øvelse har vi allerede opprettet en tilkobling. Velg den opprettede tilkoblingen for å legge til dataene i programmet. Velg SharePoint-området som ble opprettet under navnet Easy Sales.

    Skjermbilde av å velge Enkelt salg.

  5. Når du har valgt Enkelt salg SharePoint-område, vises alle listene som er opprettet på dette området. Deretter velger du SharePoint-listen som er opprettet om programmet, og klikker Koble til.

    Skjermbilde av å velge listen.

  6. Alle nødvendige data er koblet til og klar til bruk i programmet. Nå kan du begynne å bygge programmet.

Opprette velkomstbildet

  1. Velg alternativet trevisning til venstre for Power Apps Studio. Du bør allerede ha en tom skjerm i Power Apps Studio. Hvis ikke, velger du pil ned ved siden av Ny skjerm som åpner skjermtypelisten, på Hjem-fanen. Velg deretter Tom for å opprette en tom skjerm.

    Skjermbilde av oppretting av ny skjerm.

  2. Gi skjermen nytt navn til velkomstbilde ved å velge ikonet med tre prikker (...) ved siden av skjermnavnet og velge alternativet Gi nytt navn.

    Skjermbilde av å gi nytt navn til skjermen.

  3. Velg den nyopprettede skjermen for å endre egenskapene i Egenskaper-fanen til høyre på skjermen.

  4. Velg rullegardinlisten ved siden av Bakgrunnsbilde-egenskapen for å legge til et bilde på skjermen. Velg + Legg til en bildefil for å velge den nedlastede logofilen.

    Skjermbilde av å legge til den enkle salgslogoen.

  5. Angi bildeplasseringen til Tilpass slik at hele bildet får plass i den angitte størrelsen. Alternativet Tilpass skalerer bildet proporsjonalt og beskjærer ikke bildet.

    Skjermbilde av å legge til Enkel salg-logo i velkomstbildet.

  6. Utvid rullegardinlisten Inndata på fanen Sett inn, og velg Tidtaker. Deretter drar du knappen på skjermen og plasserer den der du vil.

    Skjermbilde av å legge til tidtakeren.

  7. Hvis du vil redigere noen av tidtakeregenskapene, kan du enten bruke rullegardinlisten egenskap øverst til venstre eller bruke Egenskaper-ruten. Angi følgende egenskaper:

    • Autostart: sann

    • varighet: 2000

    • Synlig: usann

      Skjermbilde av oppdatering av egenskapene til tidtakeren.

      Notat

      Som standard måles varigheten i millisekunder. Siden 1 sekund = 1000 millisekunder, angir vi 2000 som verdien for varigheten.

  8. Vi vil at velkomstbildet skal være synlig i bare to sekunder og deretter gå over til hjemmesiden. Opprett en Tom-skjerm som vi gjorde i forrige trinn, og gi den nytt navn som hjemmeside. Senere velger du tidtakerknappen som er lagt til på skjermen Splash, og konfigurerer OnTimerEnd-egenskapen. Erstatt usann med følgende innhold:

    Navigate('Home Page',ScreenTransition.Fade)

    Skjermbilde av konfigurasjon av OnTimerEnd-egenskapen.

  9. Lagre programmet ved å gå til Fil>Lagre. Deretter velger du alternativet skyen, og velger Lagre.

Opprette hjemmesiden

  1. Velg hjemmesiden opprettet tidligere. Hvis du vil sette inn fire knapper, går du til Sett inn-fanen og velger alternativet knapp for å legge til knapper på skjermen. Juster størrelsen og plasseringen til disse knappene etter behov. Gi dem nytt navn som henholdsvis Sofas_button, Chairs_button, Tables_buttonog Carpets_button.

    Skjermbilde av å legge til knapper.

  2. Endre visningsteksten for knappene for å angi produktkategorier som sofaer, stoler, tabeller og tepper.

    Skjermbilde av redigering av visningstekst.

  3. Vi bruker disse knappene til å navigere til listen over produkter under ulike kategorier. Hvis du vil gjøre dette, må vi filtrere ut produktene fra SharePoint-listen basert på produktkategori. Opprett to nye Tomme-skjermbilder, og gi dem nytt navn produkter og tepper.

    Skjermbilde av å legge til nye skjermer.

  4. Velg den nyopprettede Sofas_button-knappen, og konfigurer OnSelect-egenskapen. Når du har valgt knappen, må den ta oss til produktlistesiden som ble opprettet i forrige trinn. Erstatt usann med følgende kode:

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    Skjermbilde av navigering på sofasiden

    Notat

    -ID-en er en kontekstvariabel med en tilordnet verdi. Denne verdien sendes videre til målsiden som er nevnt i Navigate-funksjonen. Verdien som er tilordnet variabelen, filtrerer ut produktene basert på produktkategori.

  5. Gjenta samme fremgangsmåte for de tre andre knappene. Kontroller igjen at du angir riktige skjermnavn i Navigate-funksjonen. Hvis du for eksempel vil konfigurere egenskapen OnSelect for Chairs, Tablesog Carpets buttons, bruker du Naviger-funksjonen som følger:

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    Tips

    Hvis du vil lagre fremdriften, velger du fanen Fil øverst og velger alternativet Lagre. Du kan også bruke CTRL+S til å lagre fremdriften.

    Notat

    Standardsyntaksen for funksjonen Navigate er: Navigate(Screen [, Transition [, UpdateContextRecord]])

    • skjerm: Obligatorisk. Skjermen som skal vises.
    • overgang: Valgfritt. Den visuelle overgangen som skal brukes mellom gjeldende skjerm og neste skjerm. Standardverdien er Ingen.
    • UpdateContextRecord: Valgfritt. En post som inneholder navnet på minst én kolonne og en verdi for hver kolonne. Denne posten oppdaterer kontekstvariablene for den nye skjermen som om den sendes til UpdateContext-funksjonen.

    Tips

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

Nå som vi har lagt til produktkategoriene, viser vi listen over produkter under hver kategori. I Power Apps bruker vi gallerikontroll for å se en post med data.

  1. Velg galleriloddrett på >-fanen på Produkter-skjermen for å legge til Galleri-kontrollen på skjermen.

    Skjermbilde av legg til galleri

  2. Gi den nytt navn til Gallery_products. Konfigurer egenskapen Elementer på fanen Egenskaper i ruten til venstre:

    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")))

    Skjermbilde av

    Vi filtrerer produkter lagret i SharePoint-listen basert på produktkategori. Kontekstvariablene brukes til filtreringsprosessen.

  3. Konfigurer egenskapen Gallery>Fields i Properties-ruten ved å velge Rediger:

    • Tilordne pris til overskriften undertittel1.

    • Tilordne tittel til overskriften Tittel1.

      Skjermbilde av konfigurasjon av felt på produktsiden

    Når du tilordner de foregående feltene, ser du at data gjenspeiles i galleri.

  4. Juster størrelsen på Gallery_products etter behov. Hvis du vil legge til ImageLink- i Image1-overskriften, velger du Bilde- i galleriet og konfigurerer Bilde-egenskapen på Egenskap--fanen ved å legge til denne kodelinjen:

    ThisItem.ImageLink

    Skjermbilde av konfigurering av bildeegenskap på produktsiden

  5. La oss nå sette inn en etikett øverst på skjermen ved å velge alternativet Etikett. Deretter tilpasser du plasseringen, fargen og tekstvisningen som vist i figuren:

    Skjermbilde av å legge til etikett på produktsiden

  6. Legg til et Tilbake-ikonet over etikett for å hjelpe brukeren med å navigere til hjemmeside når det er nødvendig. Hvis du vil legge til Tilbake-ikonet, utvider du rullegardinlisten Ikoner og velger Tilbake-ikonet.

    Skjermbilde av å legge til tilbake-ikonet på hjemmesiden

  7. Plasser Tilbake-ikonet riktig, og endre visningsfargen, om nødvendig. Konfigurer egenskapen OnSelect ved å legge til følgende:

    Navigate('Home Page',ScreenTransition.Cover)

    Skjermbilde av konfigurasjon av OnSelect-egenskapen

  8. Følg samme fremgangsmåte for siden Tepper. Konfigurer Elementer-egenskapen for galleriet som er lagt til på Carpets-siden på følgende måte:

    Filter('Easy Sales',ProductCategory = "Carpet")

    Skjermbilde av å følge samme fremgangsmåte for

    Tips

    Hvis du vil lagre fremdriften, velger du fanen Fil øverst og velger alternativet Lagre. Du kan også bruke CTRL+S til å lagre fremdriften.

Når du har implementert de foregående trinnene, kan du se hvordan programmet ditt må se ut. Programmet inkluderer en utmerket velkomstbilde, en hjemmesideog en produktbeholdning for å bla gjennom produkter.

programdemo når du har koblet til en datakilde.