Oversikt over lerretskomponent

Obs!

Komponenter er gjenbrukbare byggeblokker for lerretsapper, slik at appopprettere kan opprette egendefinerte kontroller som kan brukes i en app, eller på tvers av flere apper, ved hjelp av et komponentbibliotek. Komponenter kan bruke avanserte funksjoner, for eksempel egendefinerte egenskaper, og aktivere komplekse funksjoner. Denne artikkelen introduserer komponentkonsepter og noen eksempler.

Komponenter er nyttige for å bygge store apper som har lignende kontrollmønstre. Hvis du oppdaterer en komponentdefinisjon inne i appen, vil alle forekomstene i appen reflektere endringene. Komponenter reduserer også duplikater av arbeid ved å fjerne behovet for å kopiere/lime inn kontroller og forbedre ytelsen. Komponenter bidrar også til å skape samarbeidsutvikling og standardiserer utseende og funksjonalitet i en organisasjon når du bruker et komponentbibliotek.

Se på denne videoen for å lære hvordan du bruker komponenter i lerretsapper:

Komponenter i lerretsapper

Du kan opprette en komponent inne fra en app som forklart i denne artikkelen, eller ved å opprette en ny komponent i et komponentbibliotek. Et komponentbibliotek bør brukes for krav om å bruke komponenter på tvers av flere appskjermer. Du kan også kopiere de eksisterende komponentene til et eksisterende eller et nytt komponentbibliotek.

Hvis du vil opprette en komponent i en app, går du til Trevisning, velger Komponenter-kategorien, og deretter velger du Ny komponent:

Opprett en ny egendefinert komponent ved hjelp av trevisning.

Hvis du velger Ny komponent, åpnes et tomt lerret. Du kan legge til kontroller som en del av komponentdefinisjonen på lerretet. Hvis du redigerer en komponent i lerretet, oppdateres forekomster av samme komponent i andre appskjermer. Apper som bruker en allerede opprettet komponent på nytt, kan også motta komponentoppdateringer når du har publisert komponentendringer.

Du kan velge en komponent fra listen over eksisterende komponenter i den venstre ruten etter at du har valgt en skjerm. Når du velger en komponent, setter du inn en forekomst av denne komponenten på skjermen, på samme måte som du setter inn en kontroll.

Komponenter som er tilgjengelige inne fra appen, vises under Egendefinert-kategorien i en liste over komponenter i trevisningen. Komponenter som er importert fra komponentbiblioteker, er oppført under kategorien Bibliotekkomponenter:

Sett inn komponenter i appen.

Obs!

Komponenter som omtales i denne artikkelen, er forskjellig fra Power Apps component framework som gjør det mulig for utviklere å opprette kodekomponenter for modelldrevne apper og lerretsapper. Hvis du vil ha mer informasjon, kan du gå til Oversikt over Power Apps component framework.

Egenefinerte egenskaper

En komponent kan motta inndataverdier og sende data hvis du oppretter én eller flere egendefinerte egenskaper. Scenariene er avansert og krever at du forstår formler og bindingskontrakter.

Obs!

En eksperimentell funksjon for egenskaper for utvidet komponent gir enda flere alternativer for egenskaper, inkludert funksjoner og virkemåtefunksjoner. Hvis du vil ha mer informasjon, kan du se Egenskaper for lerretskomponenter (eksperimentell)

Input-egenskapen er hvordan en komponent mottar data som skal brukes i komponenten. Input-egenskaper vises i Egenskaper-kategorien i ruten til høyre, hvis det er valgt en forekomst av komponenten. Du kan konfigurere input-egenskaper med uttrykk eller formler, på samme måte som du konfigurerer standardegenskaper i andre kontroller. Andre kontroller har input-egenskaper, for eksempel Default-egenskapen for en Tekstinndata-kontroll.

Output-egenskapen brukes til å sende data- eller komponenttilstand. Selected-egenskapen for en Galleri-kontroll er for eksempel en output-egenskap. Når du oppretter en output-egenskap, kan du avgjøre hvilke andre kontroller som kan referere til komponenttilstanden.

Fremgangsmåten nedenfor forklarer ytterligere disse begrepene.

Opprett en eksempelkomponent

I dette eksemplet skal du opprette en menykomponent som ligner på grafikken nedenfor. Du kan også endre teksten senere for å bruke den på flere skjermer, apper eller begge deler:

Det endelige galleriet.

Obs!

Vi anbefaler at du bruker et komponentbibliotek når du oppretter komponenter for gjenbruk. Oppdatering av komponenter i en app gjør bare komponentoppdateringene tilgjengelige i appen. Når du bruker et komponentbibliotek, blir du bedt om å oppdatere komponenter hvis komponentene i et bibliotek blir oppdatert og publisert.

Opprett en ny komponent

  1. Opprette en tom lerretsapp.

  2. Hvis du vil opprette en ny komponent, går du til Trevisning, velger Komponenter, og deretter velger du Ny komponent.

    Opprett en ny egendefinert komponent ved hjelp av trevisning.

  3. Velg den nye komponenten i den venstre ruten, velg ellipsen (...), og velg deretter Gi nytt navn. Skriv eller lim inn navnet som MenuComponent.

  4. I ruten til høyre angir du komponentens bredde som 150 og høyden som 250, og deretter velger du Ny egendefinert egenskap. Du kan også angi høyde og bredde på andre verdier etter behov.

    Ny egenskap.

  5. I boksene Visningsnavn, Egenskapsnavn og Beskrivelse skriver du inn eller limer inn tekst som Elementer.

    Visningsnavn-, egenskapsnavn-, beskrivelse-bokser.

    Ikke inkluder mellomrom i egenskapsnavn fordi du refererer til komponenten med dette navnet når du skriver en formel. Eksempel: ComponentName.PropertyName.

    Visningsnavnet vises i Egenskaper-fanen i høyre rute hvis du velger komponenten. Et beskrivende visningsnavn hjelper deg og andre utviklere til å forstå formålet med denne egenskapen. Beskrivelsen vises i et verktøytips hvis du holder pekeren over visningsnavnet for denne egenskapen i Egenskaper-kategorien.

  6. I Datatype-listen velger du Tabell og deretter Opprett.

    Datatype for egenskapen.

    Items-egenskapen er satt til en standardverdi basert på datatypen du har angitt. Du kan angi en verdi som passer til dine behov. Hvis du angav en datatype for en Tabell eller Oppføring, kan det hende du vil endre verdien for Items-egenskapen slik at den samsvarer med dataskjemaet du vil angi i komponenten. I dette tilfellet skal du endre den til en liste med strenger.

    Du kan angi egenskapensverdien på formellinjen hvis du velger navnet på egenskapen i Egenskaper-kategorien i ruten til høyre.

    Egendefinert input-egenskap i Egenskaper-fanen.

    Som den neste grafikken viser, kan du også redigere verdien for egenskapen i Avansert-kategorien i ruten til høyre.

  7. Angi komponentens Items-egenskap til denne formelen:

    Table({Item:"SampleText"})
    

    Formel.

  8. Sett inn en tom, loddrett Galleri-kontroll i komponenten, og velg Oppsett i egenskapsruten som Tittel.

  9. Kontroller at egenskapslisten viser Items-egenskapen (som den gjør som standard). Og sett deretter verdien for denne egenskapen til dette uttrykket:

    MenuComponent.Items
    

    På denne måten leser og avhenger Items-egenskapen for Galleri-kontrollen av Items-inndategenskapen for komponenten.

  10. (Valgfritt) – angi Galleri-kontrollens BorderThickness-egenskap til 1 og dens TemplateSize-egenskap til 50. Du kan også oppdatere verdier for kantlinjetykkelse og malstørrelse til andre verdier etter behov.

Legg til en komponent i et skjermbilde

Deretter legger du til komponenten i et skjermbilde og angir en tabell med strenger som komponenten skal vise.

  1. Velg listen over skjermbilder i den venstre ruten, og velg deretter standardskjermbildet.

    Standardskjerm.

  2. I kategorien Sett inn åpner du Komponenter-menyen, og deretter velger du MenuComponent.

    Sett inn komponent.

    Den nye komponenten kalles MenuComponent_1 som standard.

  3. Angi Items-egenskapen for MenuComponent_1 til denne formelen:

    Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
    

    Denne forekomsten ligner på denne grafikken, men du kan tilpasse teksten og andre egenskaper for hver forekomst.

    Det endelige galleriet.

Opprette og bruke output-egenskap

Så langt har du opprettet en komponent og lagt den til i en app. Deretter oppretter du en output-egenskap som gjenspeiler elementet brukeren velger i menyen.

  1. Åpne listen over komponenter, og velg deretter MenuComponent.

  2. I ruten til høyre velger du Egenskaper-kategorien og deretter velger du Ny egendefinert egenskap.

  3. I boksene Visningsnavn, Egenskapsnavn og Beskrivelse skriver du inn eller limer inn tekst som Valgt.

  4. Under Egenskapstype velger du Utdata, og deretter velger du Opprett.

    Egenskapstype som utdata.

  5. I Avansert-kategorien angir du verdien for Selected-egenskapen til dette uttrykket, og justerer tallet i gallerinavnet om nødvendig:

    Gallery1.Selected.Item
    

    Avansert rute.

  6. På standardskjermen i appen legger du til en etikett og angir Text-egenskapen til dette uttrykket ved å justere tallet i komponentnavnet hvis nødvendig:

    MenuComponent_1.Selected
    

    MenuComponent_1 er standardnavnet for en forekomst, ikke navnet på komponentdefinisjonen. Du kan endre navn på en forekomst.

  7. Velg hvert element på menyen mens du holder nede Alt-tasten.

    Etikett-kontrollen gjenspeiler menyelementet du valgte sist.

Scope

Inndata- og utdataegenskaper definerer tydelig grensesnittet mellom en komponent og vertsappen. Komponenten er som standard innkapslet, slik at det er enklere å bruke komponenten på nytt på tvers av apper, som krever at egenskapene brukes til å sende informasjonen inn og ut av komponenten. Omfangsrestriksjoner holder datakontrakten for en komponent enkel og sammenhengende, og den hjelper med å aktivere oppdateringer av komponentdefinisjoner, spesielt på tvers av apper med komponentbiblioteker.

Noen ganger kan det imidlertid hende at en komponent vil dele en datakilde eller en variabel med verten. Spesielt når komponenten bare er beregnet for bruk i én bestemt app. I disse tilfellene kan du få direkte tilgang til informasjon om appnivå ved å slå på bryteren Appomfang for tilgang i egenskapsruten for komponenten:

Få tilgang til appområdebryter i egenskapsruten for komponenter

Når Appomfang for tilgang er aktivert, er følgende tilgjengelige fra en komponent:

  • Globale variabler
  • Samlinger
  • Kontroller og komponenter på skjermer, for eksempel en TextInput-kontroll
  • Datakilder i tabellform, for eksempel Dataverse-tabeller

Når denne innstillingen er deaktivert, er ingen av alternativene ovenfor tilgjengelige for komponenten. Funksjonene Set og Collect er fremdeles tilgjengelige, men de resulterende variablene og samlingene er begrenset til komponentforekomsten og deles ikke med appen.

Datakilder som ikke er tabellformat, for eksempel Azure Blob Storage eller en tilpasset tilkobling, er tilgjengelige enten denne innstillingen er aktivert eller deaktivert. Tenk på disse datakildene mer som å referere til en miljøressurs i stedet for en appressurs. Når en komponent hentes inn i en app fra et komponentbibliotek, blir disse datakildene fra miljøet også hentet inn.

Komponenter i et komponentbibliotek kan aldri ha tilgang til appomfang fordi det ikke er noe enkelt appområde å referere til. Denne innstillingen er derfor ikke tilgjengelig i denne konteksten, og den er i praksis deaktivert. Når den er importert til en app, og hvis tilpassing ble tillatt av komponentprodusenten, kan bryteren aktiveres, og komponenten kan endres for å bruke appomfanget.

Obs!

  • Du kan sette inn forekomster av komponenter i et skjermbilde i et komponentbibliotek, og forhåndsvise dette skjermbildet for testformål.
  • Komponentbibliotek vises ikke når du bruker Power Apps Mobile.

Importer og eksporter komponenter (avviklet)

Obs!

Denne funksjonen er fjernet. Komponentbiblioteker er den anbefalte måten å bruke komponentene på nytt på tvers av appene. Når du bruker et komponentbibliotek, beholder en app avhengigheter for komponentene som brukes. Apputvikleren blir varslet når oppdateringer til avhengige komponenter blir tilgjengelige. Derfor bør alle nye gjenbrukbare komponenter opprettes i komponent bibliotekene i stedet.

Muligheten til å importere og eksportere komponenter er som standard deaktivert fordi denne funksjonen er fjernet. Anbefalt metode for å arbeide med komponenter er å bruke komponentbiblioteker, men du kan fremdeles aktivere denne funksjonen per app som et unntak til funksjonen er fjernet. Dette gjør du ved å redigere appen i Power Apps Studio og deretter gå til Innstillinger > Kommende funksjoner > Avviklet > Angi Eksporter og importer komponenter til På.

Aktiver eksport og import av komponenter.

Når du har aktivert denne funksjonen, kan du bruke følgende funksjoner til å importere og eksportere komponenter:

Importere komponenter fra en annen app

Hvis du vil importere én eller flere komponenter fra én app til en annen, velger du Importer komponenterSett inn-menyen, og deretter bruker du Egendefinert-rullegardinmenyen. Du kan også bruke Komponenter i trevisningen i den venstre ruten.

En dialogboks viser alle apper som inneholder komponenter du har tillatelse til å redigere. Velg en app, og velg deretter Importer for å importere den siste publiserte versjonen av alle komponentene i appen. Etter at du har importert minst én komponent, kan du redigere kopien og slette apper du ikke trenger.

Dialogboksen Importer komponenter.

Du kan lagre en app med eksisterende komponenter i en fil lokalt, og deretter bruke filen på nytt ved å importere den. Du kan bruke filen til å importere komponenter til en annen app.

Hvis appen inneholder en endret versjon av samme komponent, blir du bedt om å bestemme deg for om du vil erstatte den endrede versjonen eller avbryte importen.

Når du har opprettet komponenter i en app, kan andre apper bruke komponentene fra denne appen ved å importere dem.

Obs!

Hvis en komponent du importerte fra en annen app, endres i den opprinnelige appen, må du importere komponenten på nytt manuelt i den forbrukende appen for å motta de siste komponentendringene. Bruk i stedet komponentbiblioteker for å arbeide mer effektivt med komponentoppdateringer.

Eksportere komponenter fra appen

Du kan eksportere komponenter til en fil og laste dem ned for import til en annen app.

Velg alternativet Eksporter komponenter i Komponenter-delen i trevisningen i den venstre ruten:

Trevisning for eksport av komponenter.

Du kan også bruke Sett inn-menyen, og deretter velge Egendefinert-rullegardinmenyen i stedet.

Innsettingsmenyen Eksporter komponenter.

Hvis du velger Eksport komponenter, lastes komponentene ned til en fil:

Last ned komponent.

Den nedlastede komponentfilen bruker filtypen .msapp.

Importere komponenter fra fil for eksporterte komponenter

Hvis du vil importere komponenter fra en eksportert komponentfil, velger du Importer komponenter fra Sett inn-menyen, og deretter bruker du rullegardinmenyen Egendefinert eller bruker Komponenter i trevisningen i den venstre ruten. Fra dialogboksen for komponenter velger du Last opp fil i stedet for å velge andre komponenter eller apper:

Importer komponentfil.

Fra dialogboksen Åpne blar du til plasseringen til komponentfilen og velger Åpne for å importere komponenter inne i appen.

Importere komponenter fra en eksportert app

Du kan lagre en app lokalt ved å bruke alternativet Fil > Lagre som:

Lagre app.

Når du har lagret appen, kan du bruke komponentene i denne appen på nytt ved å bruke samme metode for import av komponenter fra en fil. Følg fremgangsmåten i forrige del om import av komponenter fra filen for eksporterte komponenter.

Kjente begrensninger

  • En egendefinert input-egenskap kan ikke konfigureres til en egendefinert output-egenskapsverdi på tvers av samme eller forskjellige forekomster når du har to eller flere forekomster av samme komponent i en app. Denne handlingen vil føre til en advarsel om sirkelreferanse. Du kan omgå denne begrensningen ved å opprette en kopi av komponenten i appen.
  • Det er ikke støtte Power Automate for å legge til og kjøre flyter i komponentbiblioteker.
  • Du kan ikke lagre datakilder eller kontroller som inneholder data fra disse datakildene (for eksempel skjemaer, flytende rutenett eller datatabeller) med komponenter.
  • Du kan ikke sette inn en komponent i et galleri eller et skjema (inkludert SharePoint-skjema).
  • Komponenter støtter ikke UpdateContext-funksjonen, men du kan opprette og oppdatere variabler i en komponent ved hjelp av Set-funksjonen. Omfanget av disse variablene er begrenset til komponenten, men du kan få tilgang til dem fra utenfor komponenten via egendefinerte output-egenskaper.

Neste trinn

Lær hvordan du bruker et komponentbibliotek til å opprette et repositorium av gjenbrukbare komponenter.

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