Oprette en komponent til lærredapps

Komponenter er genanvendelige byggeblokke til lærredapps, så appudviklere kan oprette brugerdefinerede kontrolelementer, der skal bruges i en app eller på tværs af apps ved hjælp af et komponentbibliotek. Komponenter kan bruge avancerede funktioner, f.eks. brugerdefinerede egenskaber, og aktivere komplekse funktioner. I denne artikel beskrives begreber og eksempler i forbindelse med komponenter.

Komponenter er nyttige, når du skal oprette større apps, der har lignende styringsmønstre. Hvis du opdaterer en komponentdefinition i appen, afspejles ændringerne i alle forekomster i appen. Komponenter reducerer også duplikeringen af tiltag ved at fjerne behovet for at kopiere og indsætte kontrolelementer og forbedre ydeevnen. Komponenter fremmer også samarbejdet omkring udvikling og standardiserer udseende og brug i en organisation, når du bruger et komponent bibliotek.

Se denne video for at få mere at vide om, hvordan du bruger komponenter i lærredsapps:

Komponenter i lærredsapps

Du kan oprette en komponent fra en app som beskrevet i denne artikel eller ved at oprette en ny komponent i et komponent bibliotek. Et komponentbibliotek skal bruges til krav til brugen af komponenter på tværs af flere appskærmbilleder. Du kan også kopiere de eksisterende komponenter til et eksisterende eller nyt komponentbibliotek.

Hvis du vil oprette en komponent i en app, skal du gå til Trævisning, vælge fanen Komponenter og derefter vælge Ny komponent:

Hvis du vælger Ny komponent, åbnes et tomt lærred. Du kan tilføje kontrolelementer som en del af komponentdefinitionen på lærredet. Hvis du redigerer en komponent på lærredet, skal du opdatere forekomster af samme komponent på andre appskærmbilleder. Apps, der genbruger en allerede oprettet komponent, kan også modtage komponentopdateringer, efter du har udgivet komponentændringer.

Du kan vælge en komponent på listen over eksisterende komponenter i venstre rude, når du har valgt en skærm. Når du vælger en komponent, indsættes en forekomst af den pågældende komponent på skærmen på samme måde, som når du indsætter et kontrolelement.

Komponenter, der er tilgængelige i appen, vises under kategorien Brugerdefineret på en liste over komponenter i trævisningen. Komponenter, der er importeret fra komponentbiblioteker, er angivet under kategorien Bibliotekskomponenter:

Brugerdefinerede egenskaber

En komponent kan modtage inputværdier og sende data, hvis du opretter en eller flere brugerdefinerede egenskaber. Disse scenarier er avancerede og kræver, at du forstår formler og bindende kontrakter.

Input-egenskab er, hvordan en komponent modtager data, der skal bruges i komponenten. Input egenskaber vises under fanen Egenskaber i ruden til højre, hvis en forekomst af komponenten er valgt. Du kan konfigurere inputegenskaber med udtryk eller formler på samme måde, som du konfigurerer standardegenskaber i andre kontrolelementer. Andre kontrolelementer har inputegenskaber, f.eks. egenskaben Default for et kontrolelement af typen Tekstinput.

Output-egenskab bruges til at sende data eller komponenttilstande. Egenskaben Selected i et kontrolelement af typen Galleri er f.eks. en outputegenskab. Når du opretter en output-egenskab, kan du bestemme, hvilke andre kontrolelementer der kan referere til komponentens tilstand.

I det følgende gennemgås disse begreber yderligere.

Oprette et eksempel på en komponent

I dette eksempel skal du oprette en menukomponent, der ligner følgende grafik. Du kan også ændre teksten senere for at bruge den i flere skærmbilleder, apps eller begge:

Oprette en ny komponent

1. Log på Power Apps.

2. Vælg Apps, og vælg Lærredapp fra bunden.

3. Angiv et appnavn, vælg et layout, og vælg derefter Opret.

4. Hvis du vil oprette en ny komponent, skal du gå til Trævisning, vælge Komponenter og derefter vælge Ny komponent:

   

5. Vælg den nye komponent i venstre rude, vælg ellipse (...), og vælg derefter Omdøb. Skriv eller indsæt navnet som MenuComponent.

6. I ruden til højre skal du angive komponentens bredde som 150 og dens højde som 250 og derefter vælge Ny brugerdefineret egenskab. Du kan også angive højden og bredden til enhver anden værdi efter behov.

   

7. Skriv eller indsæt tekst som Elementer i felterne Visningsnavn, Egenskabsnavn og Beskrivelse.

   

   Undlad at medtage mellemrum i egenskabsnavnet, da du skal henvise til komponenten med dette navn, når du skriver en formel. F.eks. ComponentName.PropertyName.

   Visningsnavnet vises på fanen Egenskaber i ruden til højre, hvis du vælger komponenten. En beskrivende visningsnavn hjælper dig og andre virksomheder med at forstå formålet med denne egenskab. Beskrivelse vises på et værktøjstip, hvis du holder markøren over visningsnavnet for denne egenskab under fanen Egenskaber.

8. På listen Datatype skal du vælge Tabel og derefter vælge Opret.

   

   Egenskaben Items angives til en standardværdi på baggrund af den datatype, du har angivet. Du kan angive den til en værdi, der opfylder dine behov. Hvis du har angivet en datatype af typen Tabel eller Post, kan det være en god ide at ændre værdien for egenskaben Items, så den stemmer overens med det dataskema, som du vil angive for komponenten. I dette tilfælde skal du ændre den til en liste over strenge.

   Du kan angive egenskabens værdi på formellinjen, hvis du vælger egenskabens navn under fanen Egenskaber i ruden til højre.

   

   Når det næste grafikelement vises, kan du også redigere egenskabens værdi under fanen Avanceret i ruden til højre.

9. Indstil egenskaben Items for komponenten til denne formel:

   Table({Item:"SampleText"})
   

   

10. Indsæt et tomt lodret kontrolelement af typen Galleri i komponenten, og vælg Layout på egenskabsruden som Titel.

11. Sørg for, at egenskabslisten viser egenskaben Items (som standard). Og angiv derefter værdien for egenskaben til dette udtryk:

    MenuComponent.Items
    

    På denne måde læser egenskaben Items for kontrolelementet Galleri og er afhængig af inputegenskaben Items for komponenten.

12. Du kan også angive egenskaben BorderThickness for kontrolelementet Galleri til 1 og dets egenskab TemplateSize til 50. Du kan også opdatere værdierne for kanttykkelse og skabelonstørrelse til andre værdier efter behov.

Føje en komponent til et skærmbillede

Derefter skal du føje komponenten til et skærmbillede og angive en tabel med strenge for den komponent, der skal vises.

1. Markér listen over skærme i venstre rude, og vælg derefter standardskærmen.

   

2. Åbn menuen Komponenter under fanen Indsæt, og vælg derefter MenuComponent.

   

   Den nye komponent hedder MenuComponent_1 som standard.

3. Indstil egenskaben Items for MenuComponent_1 til denne formel:

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

   Denne forekomst minder om denne grafik, men du kan tilpasse teksten og andre egenskaber for de enkelte forekomster.

   

Oprette og bruge outegenskab

Indtil nu har du oprettet en komponent og føjet den til en app. Derefter skal du oprette en outputegenskab, der afspejler det element, brugeren vælger i menuen.

1. Åbn listen over komponenter, og vælg derefter MenuComponent.

2. Vælg fanen Egenskaber i højre rude, og vælg derefter Ny brugerdefineret egenskab.

3. Skriv eller indsæt Selected i felterne Visningsnavn, Egenskabsnavn og Beskrivelse.

4. Vælg Output under Egenskabstype, og vælg derefter Opret.

   

5. Angiv værdien for egenskaben Selected på fanen Avanceret til dette udtryk for at tilpasse nummeret i gallerinavnet, hvis det er nødvendigt:

   Gallery1.Selected.Item
   

   

6. På standardskærmen i appen skal du tilføje en etiket og angive egenskaben Text til dette udtryk for at tilpasse nummeret i komponentnavnet, hvis det er nødvendigt:

   MenuComponent_1.Selected
   

   MenuComponent_1 er standardnavnet på en forekomst, ikke navnet på komponentdefinitionen. Du kan omdøbe enhver forekomst.

7. Mens du holder Alt-tasten nede, skal du markere hvert element i menuen.

   Kontrolelementet Etiket afspejler det menupunkt, du senest har valgt.

Område

Input- og outputegenskaber definerer klart grænsefladen mellem en komponent og værtsappen. Komponenten er som standard indkapslet, så det er nemmere at genbruge komponenten på tværs af apps og kræver, at egenskaberne bruges til at sende oplysningerne ind og ud af komponenten. Områdebegrænsninger er en enkel og sammenhængende datakontrakt for en komponent, og de er med til at muliggøre opdatering af komponentdefinitioner, især på tværs af apps med komponentbiblioteker.

Men der er tidspunkter, hvor en komponent måske vil dele en datakilde eller en variabel med sin vært. Især når komponenten kun er beregnet til brug i én bestemt app. I disse tilfælde kan du få direkte adgang til oplysninger på appniveau ved at slå parameteren for adgangsappens omfang til i egenskabsruden for komponenten:

Når appens omfang er slået til, kan du få adgang til følgende fra en komponent:

• Globale variabler
• Samlinger
• Kontrolelementer og komponenter på skærmbilleder, f.eks. et TextInput-objekt
• Datakilder i tabelform, f.eks. Dataverse-tabeller

Når denne indstilling er slået fra, er ingen af ovenstående tilgængelige for komponenten. Set- og Collect-funktioner er stadig tilgængelige, men de resulterende variabler og samlinger er tilpasset komponentforekomsten og deles ikke med appen.

Datakilder i ikke-tabelform, f.eks. Azure Blob Storage eller en brugerdefineret tilslutning, er tilgængelige, uanset om denne indstilling er slået til eller fra. Tænk på disse datakilder mere som at referere til en miljøressource i stedet for en appressource. Når en komponent kommer ind i en app fra et komponentbibliotek, bliver disse datakilder fra miljøet også hentet ind.

Komponenter i et komponentbibliotek kan aldrig have adgang til appens omfang, da der ikke er et omfang af en enkelt app at referere til. Denne indstilling er derfor ikke tilgængelig i denne kontekst og er deaktiveret effektivt. Når kontakten er importeret i en app, og hvis tilpasningen var tilladt af komponentudvikleren, kan kontakten aktiveres, og komponenten kan ændres, så den bruger appens omfang.

Importere og eksportere komponenter

Muligheden for at importere og eksportere komponenter er som standard deaktiveret, da denne funktion er udgået. Den anbefalede metode til at arbejde med komponenter er at bruge komponentbiblioteker, men du kan stadig aktivere denne funktion pr. app som en undtagelse, indtil funktionen er fjernet. Det kan du gøre ved at redigere din app i Power Apps Studio og derefter gå til Fil > Indstillinger > Kommende funktioner > Udgået > Angiv eksport- og importkomponenter til Til.

Når du har aktiveret denne funktion, kan du bruge følgende funktioner til at importere og eksportere komponenter.

Importere komponenter fra en anden app

Hvis du vil importere en eller flere komponenter fra en app til en anden, skal du vælge Importér komponenter i menuen Indsæt og derefter bruge rullemenuen Brugerdefineret. Du kan også bruge Komponenter i trævisningen i venstre rude.

I en dialogboks vises alle de apps, der indeholder de komponenter, som du har tilladelse til at redigere. Vælg en app, og vælg derefter Importér for at importere den senest udgivne version af alle komponenter i den pågældende app. Når du har importeret mindst én komponent, kan du redigere kopien og slette de funktioner, du ikke har brug for.

Du kan gemme en app med eksisterende komponenter til en fil lokalt og derefter genbruge filen ved at importere den. Du kan bruge filen til at importere komponenter til en anden app.

Hvis appen indeholder en ændret version af den samme komponent, bliver du bedt om at beslutte, om du vil erstatte den ændrede version eller annullere importen.

Når du har oprettet komponenter i en app, kan andre apps bruge komponenterne fra denne app ved at importere dem.

Eksportere komponenter fra din app

Du kan eksportere komponenter til en fil og overføre dem til import til en anden app.

Vælg indstillingen Eksportér komponenter i sektionen Komponenter i trævisningen i venstre rude:

Du kan også bruge menuen Indsæt og derefter vælge rullemenuen Brugerdefineret i stedet.

Hvis du vælger Eksportér komponenter, overføres komponenterne til en fil:

Den hentede komponentfil bruger filtype navnet .msapp.

Importere komponenter fra eksporterede komponentfiler

Hvis du vil importere komponenter fra en eksporteret komponentfil, skal du vælge Importér komponenter i menuen Indsæt og derefter bruge den rullemenuen Brugerdefineret eller bruge Komponenter i trævisningen i venstre rude. Vælg Overfør fil i stedet for at vælge andre komponenter eller apps i dialogboksen for komponenter:

Find placeringen af komponentfilen i dialogboksen Åbn, og vælg Åbn for at importere komponenter i appen.

Importere komponenter fra en eksporteret app

Du kan gemme en app lokalt ved hjælp af indstillingen Filer > Gem som :

Når du har gemt appen, kan du genbruge komponenterne i denne app med samme metode, som du bruger til at importere komponenter fra en fil. Benyt fremgangsmåden i forrige afsnit om import af komponenter fra den eksporteret komponentfil.

Kendte begrænsninger

• Du kan ikke gemme datakilder, formularer og datatabeller sammen med komponenter.
• Samlinger i komponenter understøttes ikke.
• Du kan ikke indsætte en komponent i et galleri eller en formular (herunder SharePoint-formular).
• En masterforekomst af en komponent er en lokal master og er omfattet af appen. Hvis du ændrer en masterforekomst, vil kun kopier af komponenten i appen afspejle ændringerne. Kopier i andre apps forbliver de samme, medmindre du importerer komponentbiblioteket igen. Alle masterforekomster i disse apps registreres og opdateres automatisk.
• Du kan ikke pakke mediefiler, når du importerer en komponent.
• Komponenter understøtter ikke funktionen UpdateContext, men du kan oprette og opdatere variabler i en komponent ved hjælp af funktionen Set. Omfanget af disse variabler er begrænset til komponenten, men du kan få adgang til dem uden for komponenten via brugerdefinerede outputegenskaber.

Næste trin

Få mere at vide om, hvordan du bruger et komponentbibliotek til at oprette et lager med genanvendelige komponenter.