Skapa komponent för arbetsyteappar

Komponenter är återanvändbara byggstenar för arbetsyteappar som låter app-utvecklare skapa anpassade kontroller för användning inuti en app eller i samtliga appar som använder komponentbiblioteket. Komponenter kan använda avancerade funktioner, t.ex. anpassade egenskaper och aktivera komplexa funktioner. I den här artikeln introduceras komponentkoncept och några exempel.

Komponenter är användbara när större appar med liknande kontrollmönster skapas. Om du uppdaterar en komponentdefinition i appen återspeglar alla instanser i appen dina ändringar. Komponenter minskar också behovet av att kopiera och klistra in kontroller och förbättra prestanda. Komponenter hjälper också till att skapa samarbetsutveckling och standardiserar känsla och utseende i en organisation när du använder ett komponentbibliotek.

Titta på det här videoklippet och lär dig hur du använder komponenter i arbetsyteappar:

Komponenter i arbetsyteappar

Du kan skapa en komponent från en app som förklaras i den här artikeln, eller genom att skapa en ny komponent i ett komponentbibliotek. Ett komponentbibliotek bör användas för krav på användning av komponenter i flera appskärmar. Du kan även kopiera befintliga komponenter till ett befintligt eller nytt komponentbibliotek.

Om du vill skapa en komponent inom en app går du till trädvyn, väljer fliken komponenter och väljer sedan ny komponent:

Om du väljer ny komponent öppnas en tom arbetsyta. Du kan lägga till kontroller som en del av komponentdefinitionen på arbetsytan. Om du redigerar en komponent på arbetsytan uppdateras förekomster av samma komponent i andra appskärmar. Appar som återanvänder en redan skapad komponent kan också ta emot komponentuppdateringar när du har publicerat komponentändringar.

Du kan välja en komponent i listan över befintliga komponenter i den vänstra rutan efter att du har valt en skärm. När du väljer en komponent infogar du en instans av komponenten på skärmen, precis som du infogar en kontroll.

Vilka komponenter som är tillgängliga i appen visas under kategorin anpassad i en lista över komponenter i trädvyn. Komponenter som importeras från komponent bibliotek visas under kategorin bibliotekskomponenter:

Anpassade egenskaper

En komponent kan ta emot indatavärden och generera data om du skapar en eller flera anpassade egenskaper. De här scenarierna är avancerade och kräver att du förstår formler och bindande kontrakt.

Indataegenskap är hur en komponent hämtar data som ska användas i komponenten. Egenskaperna för indata visas på Egenskaper i rutan till höger om en instans av komponenten som har valts. Du kan konfigurera inmatningsegenskaper med uttryck eller formler, precis som när du konfigurerar standardegenskaper i andra kontroller. Andra kontroller har inmatnings egenskaper, t.ex. egenskapen standard för kontrollen textinmatning.

Utdataegenskap används för att avge data eller komponenttillstånd. Till exempel egenskapen Vald på kontrollen Galleri är t.ex. en utmatningsegenskap. När du skapar en utmatningsegenskap kan du bestämma vad andra kontroller ska kunna referera till komponenttillståndet.

De här begreppen beskrivs i följande steg-för-steg-anvisningar.

Skapa en exempelkomponent

I det här exemplet skapar du en menykomponent som liknar följande bild. Och du kan ändra texten senare om du vill använda den på flera skärmar, appar eller både och:

Skapa en ny komponent

1. Logga in på Power Apps.

2. Välj appar och välj Arbetyteapp från tom.

3. Ange ett appnamn, välj en layout och välj sedan skapa.

4. I Trädvy, välj Komponenter och välj sedan Ny komponent för att skapa en ny komponent.

   

5. Välj den nya komponenten i den vänstra rutan, välj ellipsen ( ...) och välj sedan Byt namn. Skriv eller klistra in namnet som MenuComponent.

6. I rutan till höger anger du komponentens bredd som 150 och dess höjd som 250 och väljer sedan ny anpassad egenskap. Du kan också ange höjd och bredd till andra värden efter behov.

   

7. I rutorna Visningsnamn, Egenskapsnamn och Beskrivning, skriv eller klistra in text as objekt.

   

   Använd inte blanksteg i egenskapsnamn eftersom du refererar till komponenten med det här namnet när du skriver en formel. Till exempel ComponentName. PropertyName.

   Visningsnamn visas på fliken egenskaper i det högra fönstret om du markerar komponenten. En beskrivande visningsnamn hjälper dig och andra tillverkare att förstå syftet med den här egenskapen. Beskrivningen visas i ett verktygstips om du hovrar över visningsnamn av den här egenskapen på fliken egenskaper.

8. I listan Datatyp markerar du Tabell och väljer Skapa.

   

   Egenskapen objekt anges till ett standardvärde baserat på den datatyp du angav. Du kan ange värdet som passar dina behov. Om du angav en datatyp för en tabell eller post kan du behöva ändra värdet för egenskapen objekt så att det överensstämmer med det dataschema som du vill mata in i komponenten. I det här fallet ändrar du till en lista med strängar.

   Du kan ange egenskapens värde i formelfältet om du markerar namnet på egenskapen på fliken Egenskaper i rutan till höger.

   

   När nästa bild visar kan du också redigera egenskapens värde på fliken Avancerat i den högra rutan.

9. Ställ in komponentens objekt till den här formeln:

   Table({Item:"SampleText"})
   

   

10. I komponenten sätter du in en tom vertikal Galleri-kontroll och välj Layout i egenskapsrutan som rubrik.

11. Kontrollera att egenskapslistan visar egenskapen objekt (som standard). Och ange sedan värdet för den egenskapen till följande uttryck:

    MenuComponent.Items
    

    På så sätt kan egenskapen objekt i Galleri-kontrollen läsa och vara beroende av ingående egenskapen objekt för komponenten.

12. Valfritt – ange Galleri-kontrollens egenskap BorderThickness till 1 och dess egenskap TemplateSize till 50. Du kan även uppdatera värden för kantens tjocklek och mallen på alla andra värden efter behov.

Lägg till en komponent till en skärm

Härnäst ska du lägga till komponenten på en skärm och ange en tabell med strängar som ska visas för komponenten.

1. I listan till vänster väljer du listan med skärmar och väljer sedan standardskärmen.

   

2. På fliken Infoga, öppna menyn komponenter och välj sedan MenuComponent.

   

   Den nya komponenten kallas MenuComponent_1 som standard.

3. Ställ in egenskapen objekt för MenuComponent_1 till den här formeln:

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

   Den här instansen påminner om den här grafiken, men du kan anpassa texten och andra egenskaper för varje instans.

   

Skapa och använda utmatningsegenskap

Hittills har du skapat en komponent och lagt till den i en app. Härnäst ska du skapa en utmatningsegenskap som återspeglar objektet som användaren väljer i menyn.

1. Öppna listan över komponenter och välj sedan MenuComponent.

2. I rutan till höger väljer du fliken Egenskaper och väljer sedan Ny anpassad egenskap.

3. I rutorna Visningsnamn, Egenskapsnamn och Beskrivning, skriv eller klistra in Vald.

4. Under Egenskapstyp, välj Utdata och välj sedan Skapa.

   

5. På fliken Avancerat anger du värdet för egenskapen Vald för uttrycket och justerar siffrorna i galleriets namn vid behov:

   Gallery1.Selected.Item
   

   

6. I standardfönstret för appen lägger du till en etikett och anger dess text-egenskap i det här uttrycket och justerar sedan siffran i komponentnamnet vid behov:

   MenuComponent_1.Selected
   

   MenuComponent_1 är standardnamnet på en instans, inte namnet på komponentdefinitionen. Du kan byta namn på en instans.

7. Håll ned Alt-tangenten och markera varje objekt på menyn.

   Etikett-kontrollen återspeglar det menyalternativ du valde senast.

Definitionsområde

Indata- och utdataegenskaper definierar tydligt gränssnittet mellan en komponent och dess värdapp. Som standard är komponenten inkapslad så att det blir enklare att återanvända komponenten i appar, vilket kräver att egenskaperna används för att skicka informationen in och ut ur komponenten. Omfattningen av begränsningarna gör att en komponent blir enkel och sammanhängande. Du kan aktivera uppdateringar av komponentdefinitioner, — framför allt i olika appar med komponentbibliotek.

Det kan dock finnas tillfällen då en komponent vill dela en datakälla eller en variabel med dess värd. Särskilt när komponenten endast är avsedd att användas i en viss app. I så fall kan du direkt komma åt information på programnivå genom att aktivera knappen Åtkomstappomfattning i komponentens egenskapsfönster:

När Åtkomstappomfattning är aktiverat kan följande nås inifrån en komponent:

• Globala variabler
• Samlingar
• Kontroller och komponenter på skärmar, till exempel en TextInput-kontroll
• Datakällor i tabellformat, till exempel Dataverse tabeller

När den här inställningen är inaktiverad är inte komponenten tillgänglig utöver detta. Funktionerna Set och Collect är fortfarande tillgängliga men de resulterande variablerna och samlingarna omfattas av komponentinstansen och delas inte med appen.

Icke-tabelldatakällor, som Azure Blob Storage eller en anpassad anslutning, är tillgängliga oavsett om den här inställningen är aktiverad eller av. Tänk på dessa datakällor mer som att referera till en miljöresurs i stället för en appresurs. När en komponent förs in i en app från ett komponentbibliotek förs även dessa datakällor från miljön in.

Komponenter i ett komponentbibliotek kan aldrig ha åtkomst till appomfånget eftersom det inte finns någon enskild appomfattning att hänvisa till. Den här inställningen är därför inte tillgänglig i det här sammanhanget och är i praktiken inaktiverad. När du har importerat till en app och om anpassningen tilläts av komponenttillverkaren kan switchen aktiveras och komponenten kan ändras så att appomfånget används.

Importera och exportera komponenter

Möjligheten att importera och exportera komponenter är inaktiverat som standard eftersom den här funktionen har upphört. Medan rekommenderad metod för att arbeta med komponenter är att använda komponentbibliotek, kan du fortfarande aktivera den här funktionen per app som ett undantag tills funktionen tas bort. För att göra detta, redigera din app i Power Apps Studio och gå sedan till Arkiv > Inställningar > Kommande funktioner > Indraget > ange Exportera och importera komponenter som På.

När du har aktiverat den här funktionen kan du använda följande funktioner för att importera och exportera komponenter.

Importera komponenter från en annan app

Om du vill importera en eller flera komponenter från en app till en annan väljer du Importera komponenter från menyn Infoga och använder sedan listrutan Anpassa. Eller använd komponenter i trädvyn till vänster.

I en dialogruta visas alla appar som innehåller komponenter som du har behörighet att redigera. Välj en app och välj sedan Importera om du vill importera den senast publicerade versionen av alla komponenter i den appen. När du har importerat minst en komponent kan du redigera din kopia och ta bort de du inte behöver.

Du kan spara en app med befintliga komponenter i en fillokalt och sedan återanvända filen genom att importera den. Du kan använda filen om du vill importera komponenter till en annan app.

Om appen innehåller en modifierad version av samma komponent uppmanas du att välja om du vill ersätta den ändrade versionen eller avbryta importen.

När du har skapat komponenterna i en app kan andra appar använda komponenterna från den här appen genom att importera dem.

Exportera komponenter från appen

Du kan exportera komponenter till en fil och hämta dem för import till en annan app.

Välj alternativet Exportera komponenter från avsnittet Komponenter i trädvyn till vänster:

Du kan även använda infoga menyn och sedan välja den anpassade listmenyn i stället.

Om du väljer Exportera komponenter hämtas komponenterna till en fil:

Den hämtade komponent filen använder filnamnstillägget .msapp.

Importera komponenter från filen med exporterade komponenter

För att importera komponenter från en exporterad komponentfil, välj Importera komponenter från antingen Infoga- menyn och använd sedan rullgardinsmenyn Anpassad eller använd komponenter i trädvyn till vänster. I dialogrutan komponenter, välj överför fil i stället för att välja andra komponenter eller appar:

Från dialogrutan Öppen bläddra till platsen för komponentfilen och välj Öppna om du vill importera komponenter inom appen.

Importera komponenter från exporterad app

Du kan spara en app lokalt med hjälp av alternativet Fil > Spara som:

När du har sparat appen kan du återanvända komponenterna i appen med hjälp av samma metod för import av komponenter från en fil. Följ instruktionerna i det föregående avsnittet om import av komponenter från filen med exporterade komponenter.

Kända begränsningar

• Du kan inte spara datakällor, formulär och datatabeller med komponenter.
• Samlingar i komponenter stöds inte.
• Det går inte att infoga en komponent i ett galleri eller formulär (inklusive SharePoint-formulär).
• En huvudinstans av en komponent är en lokal huvud och omfattningen av appen. Om du ändrar en huvudinstans avspeglar ändringen endast kopior av komponenten inom appen. Kopior i andra appar förblir desamma såvida du inte importerar komponentbiblioteket igen. Alla huvudinstanser i apparna identifieras och uppdateras automatiskt.
• Du kan inte paketera mediefiler när du importerar en komponent.
• Komponenter stöder inte funktionen UpdateContext men du kan skapa och uppdatera variabler i en komponent med hjälp av funktionen Ange. Omfattningen av dessa variabler är begränsad till komponenten, men du kan få åtkomst till dem utanför komponenten via anpassade egenskaper för utdata.

Nästa steg

Lär dig hur du använder ett komponentbibliotek för att skapa en lagringsplats för återanvändbara komponenter.