Opprett SharePoint-integrert lerretsapper fra bunnen av for å vise, redigere, legge til og slette elementer i en liste som opprettes med Microsoft Lister

  • Artikkel

I denne scenarioartikkelen får du vite hvordan du oppretter en app med SharePoint-skjemafunksjonalitet fra grunnen av. Appen demonstrerer hvordan du viser, redigerer, legger til og sletter listeelementer ved å bruke en lerretsapp uten å gå til et SharePoint-område.

Obs!

Hvis du vil ha mer informasjon om forskjellige scenarioer i arbeid med SharePoint-skjemaer og flere eksempler, kan du gå til Oversikt over SharePoint-scenarioer.

Forutsetninger

  • Du må ha tilgang til et SharePoint-område for å opprette en liste og listeelementer.
  • Du må vite hvordan du lager og oppretter lister.

Scenariodetaljer

Formålet med dette scenarioet er å vise hvordan du oppretter en lerretsapp fra grunnen av slik at det fungerer med en liste. På slutten av dette eksemplet skal du kunne utføre følgende oppgaver i lerretsappen uten behov for tilgang til listen eller elementet i den:

  • Vis alle elementer fra listen.
  • Søke etter elementer i en liste basert på tekstverdi i en bestemt kolonne
  • Velg et listeelement.
  • Rediger et listeelement.
  • Opprett et nytt listeelement.
  • Slett et listeelement.

Scenarioet er en grunnleggende illustrasjon av funksjonene til lerretsappen når den integreres med SharePoint. Hvis du vil gi oppsettet forbedret utforming eller flere skjermer, kan du gå til følgende artikler:

Viktig

Eksemplet i dette scenarioet oppretter en eksempelapp for å vise, redigere, legge til og slette listeelementer. Du kan endre fremgangsmåten for å tilpasse appen basert på valgene eller forretningsmålet. Når du tilpasser appen med egendefinerte navn for kontroller, må du passe på å bruke de riktige kontrollnavnene i formelen når du følger fremgangsmåten i dette eksemplet.

Eksempel

Dette scenarioet viser deg hvordan du oppretter en app og kobler den til en liste for å vise, redigere, legge til og slette listeelementer.

Trinn 1 – Opprett en liste ved hjelp av Microsoft Lister

Opprett en liste med kolonner og listeelementer. I dette scenarioet har vi brukt en liste med følgende kolonner og listeelementer:

Listestruktur.

Obs!

Begge kolonnene er Én linje med tekst.

Trinn 2 – Opprette en tom lerretsapp

Opprett en tom lerretsapp.

Trinn 3 – Koble appen til SharePoint

  1. Velg Datakilder i den venstre ruten.

    Velg datakilder.

  2. Velg datakilden SharePoint. Du kan også søke etter navnet i søkeboksen.

    Velg SharePoint-datakilden.

  3. Velg Legg til en tilkobling.

    Legg til SharePoint-tilkobling.

  4. Velg en tilkoblingstype. Du kan koble til SharePoint Online eller et lokalt SharePoint-område med en datagateway når den er konfigurert. Dette scenarioet kobler til et SharePoint Online-område.

    Opprett SharePoint-tilkobling.

  5. Velg SharePoint-området som har listen du opprettet tidligere.

    Velg SharePoint-område.

  6. Velg listen du har opprettet. Dette scenarioet bruker en liste kalt Figurer.

    Velg liste.

  7. Velg Koble til. Datakilden legges til i appen.

    Tillagt datakilde.

Trinn 4 – Legge til datatabell for å vise listeelementer

  1. Velg + (sett inn) i den venstre ruten.

    Velg sett inn.

  2. Utvid Oppsett.

  3. Velg Datatabell.

    Velg datatabell.

  4. Velg datakilden som SharePoint-tilkoblingen.

    Velg datatabellkilde.

  5. Flytt datatabellen til nedre, høyre hjørne på skjermen for å gi plass til flere komponenter.

    Flytt datatabell.

Trinn 5 – Legge til funksjonen for å søke etter og velge element

  1. Sett inn en Tekstinndata-kontroll på lerretet, og flytt den nedenfor rullegardinlisten.

    Sett inn kontroll for tekstinndata.

  2. Oppdater egenskapen Default for søkefeltet til verdien Søk etter figur.

    Default-egenskapen for tekstinndata.

  3. Sett inn en Liste-kontroll på lerretet, og flytt den nedenfor kontrollen for tekstinndata du la til i forrige trinn.

    Sett inn listekontroll.

  4. På høyre side på Studio-skjermen setter du egenskapen Elementer for listekontrollen til Former-listen for dette eksemplet.

    Listeelementer.

  5. Sett egenskapen Value for listekontrollen til Figur i stedet for Farge for dette eksemplet.

    Listeverdi.

  6. Oppdater egenskapen Items for listen du la til i det forrige trinnet, til følgende formel:

    Filter([@Shapes], StartsWith(Shape, TextInput1.Text))

    Egenskapen Search box items.

    Formelen inneholder følgende funksjoner:

    • Filter() – Brukes i denne formelen til å filtrere elementer i listen basert på de definerte parameterne. [@Shapes] i denne funksjonen angir hvilken datakilde som skal filtreres.
    • StartsWith() – Brukes i denne formelen til å filtrere listeelementene basert på Figur-kolonnen som begynner med tegnene du skrev inn i TextInput1-kontrollen du la til tidligere.

Trinn 6 – Legge til funksjonen for å redigere element

  1. Sett inn Redigeringsskjema-kontrollen.

    Legg til redigeringsskjema.

  2. Sett egenskapen Data source for redigeringsskjemakontrollen til Figurer på høyre side på Studio-skjermen.

    Datakilde for redigeringsskjema.

  3. Velg Rediger felter for redigeringsskjemakontrollen, og fjern eventuelle andre felt, for eksempel Vedlegg.

    Fjern Vedlegg-feltet.

  4. Kontroller at feltene Figur og Farge finnes. Hvis ikke legger du dem til ved hjelp av Legg til felt.

    Legge til feltene Figur og Farge.

  5. Omorganiser skjermoppsettet for å sikre at Redigeringsskjema-kontrollen vises og ikke overlapper med andre kontroller.

    Omorganisert skjerm.

  6. Sett egenskapen OnSelect for listekontrollen til følgende funksjon:

    Set(TextSelected,1)

    OnSelect for liste.

    Set()-funksjonen setter en ny variabel kalt TextSelected til verdien 1 når en verdi i listen velges. Variabelen TextSelected brukes i dette scenarioet som et flagg til å styre handlingene og virkemåten til funksjonene for tilføying, redigering og sletting, som du kan se i avsnittene nedenfor.

  7. Sett egenskapen Item for redigeringsskjemakontrollen til følgende formel:

    If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)

    Egenskapen Element for redigeringsskjema.

    If()-funksjonen kontrollerer først om verdien til variabelen TextSelected er 1 eller ikke. Hvis den er det, viser redigeringsskjemaet det valgte elementet fra listen. Hvis den ikke er det, viser redigeringsskjemaet det valgte elementet fra datatabellen.

  8. Sett inn en knapp.

    Sette inn en knapp.

  9. På høyre side på Studio-skjermen setter du egenskapen Text for knappen du la til i forrige trinn, til Lagre.

    Lagre-knappen.

  10. Sett egenskapen OnSelect for Lagre-knappen til følgende formel:

    SubmitForm(Form1);
Set(TextSelected,0)

    Egenskapen OnSelect for Lagre-knappen.

    Formelen inneholder følgende funksjoner:

    • SubmitForm() – Brukes i denne formelen til å sende redigeringsskjemaet og lagre verdiene i listen.
    • Set() – Tilbakestiller variabelen TextSelected til 0, slik at det kan velges et nytt element fra listen.

  11. Sett inn Tekstetikett-kontrollen.

    Tekstetikett.

  12. Oppdater egenskapen Text for Tekstetikett-kontrollen du la til i forrige trinn, til Velg fra tabellen eller søk hvis du vil redigere verdien(e) for et element.

    Etikettekst oppdatert.

  13. Omorganiser kontrollene på skjermen for å ordne redigeringskontrollene i rekkefølge.

    Omorganisere redigeringskontroller.

Trinn 7 – Legge til funksjonen for å legge til element

  1. Sett inn en knapp.

  2. Omorganiser kontrollene på skjermen for å sikre at knappen vises.

  3. Oppdater egenskapen Text for knappen du la til i forrige trinn, til Legg til.

  4. Sett egenskapen OnSelect for Legg til-knappen til følgende funksjon:

    NewForm(Form1)

    Egenskapen OnSelect for Legg til-knappen.

    NewForm()-funksjonen fjerner redigeringsskjemakontrollen som er lagt til i skjemaet kalt Skjema1, slik at du kan legge til et nytt listeelement.

Trinn 8 – Legge til funksjonen for å slette element

  1. Sett inn en knapp.

  2. Flytt knappen du la til i forrige trinn, nedenfor Lagre-knappen.

  3. Oppdater egenskapen Text for knappen du la til i forrige trinn, til Slett.

  4. Sett egenskapen OnSelect for Slett-knappen til følgende formel:

    Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
Set(TextSelected,0)

    Egenskapen OnSelect for Slett-knappen.

    Formelen inneholder følgende funksjoner:

    • Remove() – Brukes i denne formelen til å slette det valgte listeelementet.
    • If() – Kontrollerer først om verdien til variabelen TextSelected er 1 eller ikke. Hvis den er det, sletter Slett-knappen det valgte elementet fra listen. Hvis den ikke er det, sletter Slett-knappen det valgte elementet fra datatabellkontrollen.
    • Set() – Tilbakestiller variabelen TextSelected til 0, slik at det kan velges et nytt element fra listen.

Nå som alle appkomponentene er konfigurert, må du kontrollere at skjermen ser ut som i følgende eksempel:

Appen etter at alle komponenter er lagt til.

Trinn 9 – Lagre appen

Nå som funksjoner for å vise, redigere, legge til og slette er lagt til i appen, lagrer du appen.

  1. Velg Fil-menyen.

  2. Velg Lagre.

  3. Når du lagrer for første gang, kommer du til Lagre som når du velger alternativet Lagre. Velg Lagre for å lagre appen i skyen.

    Lagre appen.

  4. Lukk Power Apps Studio.

Trinn 10 – Teste appen

  1. Gå til Power Apps.

  2. Velg Apper.

  3. Velg appen du har laget.

    Spill av appen.

  4. Test appkomponentene.

    Spille av appanimasjonen.

    Tips

    Du kan raskt forhåndsvise virkemåten til en komponent ved å bruke ALT-tasten og et venstreklikk på en mus når du redigerer appen i Power Apps Studio.

    I stedet for å velge Forhåndsvis appen øverst til høyre eller trykke på F5 på tastaturet som kjører appen i forhåndsvisning, holder du for eksempel nede ALT-tasten på tastaturet og velger deretter en rad fra datatabellen for å endre redigeringsskjemakontrollen til den valgte raden, som om appen kjører i forhåndsvisning.

    ALT+venstreklikk på rullegardinmenyen for å forhåndsvise.

    Hold i tillegg ned ALT-tasten på tastaturet, og dermed kan du fortsette å kjøre forhåndsvisningen i Power Apps Studio. Du kan for eksempel velge flere komponenter for forskjellige handlinger eller kontroller.

Neste trinn

Hvis du redigerer appen, må du publisere endringene, slik at andre kan se dem.

Når appen er klar til bruk, kan du dele appen.

Se også

Obs!

Kan du fortelle oss om språkinnstillingene for dokumentasjonen? Ta en kort undersøkelse. (vær oppmerksom på at denne undersøkelsen er på engelsk)

Undersøkelsen tar rundt sju minutter. Det blir ikke samlet inn noen personopplysninger (personvernerklæring).