Informació general dels components de llenç

Nota

• Aquesta secció explica els components del llenç que abasten les capacitats d'extensibilitat de la interfície d'usuari de codi baix. Els desenvolupadors professionals també poden utilitzar el Power Apps component framework per crear components de codi.
• Els components de llenç també es poden utilitzar en aplicacions controlades per models que utilitzen pàgines personalitzades i a una biblioteca de components. Més informació: Afegir components de llenç a una pàgina personalitzada en una aplicació basada en models

Els components són blocs de compilació reutilitzables per a les aplicacions de llenç per tal que els creadors d'aplicacions puguin crear controls personalitzats per utilitzar-los dins d'una aplicació o en diverses aplicacions que utilitzin una biblioteca de components. Els components poden utilitzar característiques avançades, com ara propietats personalitzades i habilitar capacitats complexes. Aquest article introdueix conceptes dels components i alguns exemples.

Els components són útils per a la creació d'aplicacions més grans que tenen patrons de control similars. Si actualitzeu una definició de component dins de l'aplicació, totes les instàncies de l'aplicació reflecteixen els canvis. Els components també redueixen la duplicació d'esforços eliminant la necessitat de copiar o enganxar controls i milloren el rendiment. Els components també ajuden a crear un desenvolupament col·laboratiu i estandarditzen l'aspecte en una organització quan s'utilitza una biblioteca de components.

Mireu aquest vídeo per aprendre com s'utilitzen els components en aplicacions de llenç:

Components en aplicacions del llenç

Podeu crear un component des d'una aplicació com s'explica en aquest article o creant un component nou dins d'una biblioteca de components. Una biblioteca de components s'ha d'utilitzar per als requisits d'utilitzar components en diverses pantalles d'aplicacions. També podeu copiar els components existents en una biblioteca de components existent o nova.

Per crear un component dins d'una aplicació, aneu a la Visualització d'arbre, seleccioneu la pestanya Components i, a continuació, seleccioneu Component nou:

La selecció de Component nou obre un llenç buit. Podeu afegir controls com a part de la definició dels components del llenç. Si editeu un component del llenç, s'actualitzaran les instàncies del mateix component en altres pantalles de l'aplicació. Les aplicacions que reutilitzen un component ja creat també poden rebre actualitzacions dels components després de publicar els canvis dels components.

Podeu seleccionar un component de la llista de components existents a la subfinestra esquerra després de seleccionar una pantalla. Quan seleccioneu un component, inseriu una instància d'aquest component a la pantalla, de la mateixa manera que inseriu un control.

Els components disponibles dins de l'aplicació es mostren a la categoria Personalitzats en una llista de components a la visualització d'arbre. Els components importats de les biblioteques de components es mostren a la categoria Components de la biblioteca:

Nota

Els components que es tracten en aquest article són diferents del Power Apps component framework que permet als desenvolupadors i creadors crear components de codi per a les aplicacions basades en models i del llenç. Per obtenir més informació, aneu a la Descripció general del Power Apps component framework.

Propietats personalitzades

Un component pot rebre valors d'entrada i emetre dades si creeu una o més propietats personalitzades. Aquests escenaris són avançats i requereixen que entengueu les fórmules i els contractes vinculants.

Nota

Una característica experimental per a les propietats dels components millorades proporciona encara més opcions per a les propietats, incloses les funcions i les funcions de comportament. Per obtenir més informació, vegeu Propietats dels components de llenç (experimental)

Propietat d'entrada és la manera com un component rep dades per utilitzar-les al component. Les propietats d'entrada es mostren a la pestanya Propietats de la subfinestra de la dreta si se selecciona una instància del component. Podeu configurar les propietats d'entrada amb expressions o fórmules, de la mateixa forma que configureu les propietats estàndard en altres controls. Altres controls tenen propietats d'entrada, com ara la propietat Default d'un control Entrada de text.

La Propietat de sortida s'utilitza per emetre dades o estats de components. Per exemple, la propietat Selected en un control Galeria és una propietat de sortida. Quan creeu una propietat de sortida, podeu determinar quins altres controls poden referir-se a l'estat del component.

A continuació, la següent guia segueix explicant aquests conceptes.

Crear un component d'exemple

En aquest exemple, creareu un component de menú que s'assembla al gràfic següent. A més, podeu canviar el text més endavant per utilitzar-lo en diverses pantalles, aplicacions o totes dues coses:

Nota

Us recomanem que utilitzeu una biblioteca de components quan creeu components per a la reutilització. L'actualització de components dins d'una aplicació només fa que les actualitzacions dels components estiguin disponibles dins de l'aplicació. Quan utilitzeu una biblioteca de components, se us demanarà que actualitzeu components si els components d'una biblioteca s'actualitzen i es publiquen.

Crear un component nou

1. Crea una aplicació de llenç en blanc.

2. Per crear un component nou, aneu a la Visualització d'arbre, seleccioneu la pestanya Components i, a continuació, seleccioneu Component nou.

   

3. Seleccioneu el component nou a la subfinestra esquerra, seleccioneu els punts suspensius (...) i, a continuació, seleccioneu Canvia el nom. Escriviu o enganxeu el nom com a MenuComponent.

4. A la subfinestra dreta, definiu l'amplada de l'element com a 150 i la seva alçada com a 250 i, a continuació, seleccioneu Nova propietat personalitzada. També podeu definir l'alçada i l'amplada a un altre valor segons convingui.

   

5. Als quadres Nom de visualització, Nom de la propietat i Descripció, escriviu o enganxeu el text com a Items.

   

   No inclogueu espais en el nom de la propietat perquè fareu referència al component amb aquest nom en escriure una fórmula. Per exemple, ComponentName.PropertyName.

   El nom de visualització apareix a la pestanya Propietats de la subfinestra de la dreta si seleccioneu el component. Un nom de visualització descriptiu us ajudarà a vós i altres creadors a entendre la finalitat d'aquesta propietat. La Descripció apareix en un indicador de funció si passeu el cursor per sobre del nom de visualització d'aquesta propietat a la pestanya Propietats.

6. A la llista Tipus de dades, seleccioneu Taula i, a continuació, seleccioneu Crea.

   

   La propietat Items està definida en un valor per defecte basat en el tipus de dades que heu especificat. Podeu definir-la en un valor que s'adapti a les vostres necessitats. Si heu especificat un tipus de dades de Taula o Registre, pot ser que vulgueu canviar el valor de la propietat Items per adaptar-se a l'esquema de dades que voleu introduir al component. En aquest cas, l'haureu de canviar a una llista de cadenes.

   Podeu definir el valor de la propietat a la barra de fórmules si seleccioneu el nom de la propietat a la pestanya Propietats de la subfinestra de la dreta.

   

   Com es mostra al gràfic següent, també podeu editar el valor de la propietat a la pestanya Avançat de la subfinestra de la dreta.

7. Definiu la propietat Items del component en aquesta fórmula:

   Table({Item:"SampleText"})
   

   

8. Al component, inseriu un control Galeria vertical en blanc i seleccioneu Layout a la subfinestra de la propietat com a Títol.

9. Assegureu-vos que la llista de propietat mostri la propietat Items (com ho fa per defecte). I, a continuació, definiu el valor d'aquesta propietat en aquesta expressió:

   MenuComponent.Items
   

   D'aquesta manera, la propietat Items del control Galeria llegeix i depèn de la propietat d'entrada Items del component.

10. Opcional: definiu la propietat BorderThickness del control Galeria a 1 i la seva propietat TemplateSize a 50. També podeu actualitzar els valors per al gruix de la vora i la mida de la plantilla a qualsevol altre valor segons convingui.

Afegir un component a una pantalla

A continuació, afegireu el component a una pantalla i especificareu una taula de cadenes perquè mostri el component.

1. A la subfinestra esquerra, seleccioneu la llista de pantalles i, a continuació, seleccioneu la pantalla per defecte.

   

2. A la pestanya Insereix, obriu el menú Components i, a continuació, seleccioneu MenuComponent.

   

   El component nou s'anomena MenuComponent_1 per defecte.

3. Definiu la propietat Items de MenuComponent_1 a aquesta fórmula:

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

   Aquesta instància s'assembla a aquest gràfic, però podeu personalitzar el text i altres propietats de cada instància.

   

Crear i utilitzar la propietat de sortida

Fins al moment, heu creat un component i l'heu afegit a una aplicació. A continuació, creareu una propietat de sortida que reflecteix l'element que l'usuari selecciona al menú.

1. Obriu la llista de components i, a continuació, seleccioneu MenuComponent.

2. A la subfinestra de la dreta, seleccioneu la pestanya Propietats i, a continuació, seleccioneu Nova propietat personalitzada.

3. Als quadres Nom de visualització, Nom de la propietat i Descripció, escriviu o enganxeu Seleccionat.

4. A Tipus de propietat, seleccioneu Sortida i, a continuació, seleccioneu Crea.

   

5. A la pestanya Avançat, definiu el valor de la propietat Selected en aquesta expressió, ajustant-ne el numeral en el nom de la galeria si cal:

   Gallery1.Selected.Item
   

   

6. A la pantalla per defecte de l'aplicació, afegiu una etiqueta i definiu la propietat Text en aquesta expressió, ajustant el numeral en el nom del component si cal:

   MenuComponent_1.Selected
   

   MenuComponent_1 és el nom per defecte d'una instància, no el nom de la definició del component. Podeu canviar el nom de qualsevol instància.

7. Mentre manteniu premuda la tecla Alt, seleccioneu cada element al menú.

   El control Etiqueta reflecteix l'element de menú que heu seleccionat més recentment.

Scope

Les propietats d'entrada i sortida defineixen clarament la interfície entre un component i la seva aplicació amfitrió. Per defecte, el component està encapsulat de manera que és més fàcil reutilitzar el component entre aplicacions, que requereix l'ús de propietats per enviar la informació dins i fora del component. Les restriccions d'àmbit mantenen el contracte de dades d'un component senzill i cohesionat, i ajuda a habilitar les actualitzacions de definició de component, especialment a través d'aplicacions amb biblioteques de components.

Però hi ha moments en què un component pot voler compartir una font de dades o una variable amb el seu amfitrió. Especialment quan el component només està pensat per al seu ús en una aplicació en particular. Per a aquests casos, podeu accedir directament a la informació del nivell d'aplicació activant l'opció Accedeix a l'àmbit de l'aplicació a la subfinestra de propietats del component:

Quan Accedeix a l'àmbit de l'aplicació està activat, el següent és accessible des d'un component:

• Variables globals
• Col·leccions
• Controls i components en pantalles, com ara un control Entrada de text
• Fonts de dades tabulars, com ara taules del Dataverse

Quan aquesta opció de configuració està desactivada, cap de les opcions anteriors no estarà disponible per al component. Les funcions Defineix i Recopila encara estan disponibles, però les variables i col·leccions resultants s'abasten a la instància del component i no es comparteixen amb l'aplicació.

Les fonts de dades no tabulars, com ara l'emmagatzematge de blob de l'Azure o un connector personalitzat, estan disponibles independentment de si aquesta opció està activada o desactivada.Penseu en aquestes fonts de dades més com si féssiu referència a un recurs de l'entorn en lloc d'a un recurs d'aplicació.Quan s'introdueix un component en una aplicació des d'una biblioteca de components, també s'incorporen aquestes fonts de dades de l'entorn.

Els components d'una biblioteca de components mai poden tenir accés a l'àmbit de l'aplicació, ja que no hi ha cap àmbit d'aplicació al qual fer referència. Per tant, aquest paràmetre no està disponible en aquest context, i està desactivat.Un cop importat a una aplicació, i si el creador de components ha permès la personalització, es pot habilitar el commutador i es pot modificar el component per utilitzar l'àmbit de l'aplicació.

Nota

• Podeu inserir instàncies de components en una pantalla dins d'una biblioteca de components i obtenir una visualització prèvia de la pantalla per fer proves.
• La biblioteca de components no es mostra quan s'utilitza el Power Apps Mobile.

Importar i exportar components (retirat)

Nota

Aquesta característica s'elimina. Les biblioteques de components són la manera recomanada de reutilitzar components entre aplicacions. Quan s'utilitza una biblioteca de components, una aplicació manté les dependències dels components que utilitza. El creador de l'aplicació rebrà una alerta quan les actualitzacions de components dependents estiguin disponibles. Per tant, tots els nous components reutilitzables s'han de crear dins de les biblioteques de components.

La capacitat d'importar i exportar components està inhabilitada per defecte perquè aquesta característica s'ha eliminat. Tot i que el mètode recomanat per treballar amb components és utilitzar biblioteques de components, podeu habilitar aquesta característica de manera permanent com a excepció fins que se suprimeixi la característica. Per fer-ho, editeu l'aplicació al Power Apps Studio i, a continuació, aneu a Configuració > Futures característiques > Retirat i habiliteu l'opció Exporta i importa components.

Després d'habilitar aquesta característica, podeu utilitzar les capacitats següents per importar i exportar components.

Importar components d'una altra aplicació

Per importar un o diversos components d'una aplicació a una altra, seleccioneu Importa components des del menú Insereix i, a continuació, utilitzeu el menú desplegable Personalitzat. O utilitzar Components a la visualització d'arbre de la subfinestra esquerra.

Un quadre de diàleg enumera totes les aplicacions que contenen components que teniu permís per editar. Seleccioneu una aplicació i, a continuació, seleccioneu Importa per importar la versió publicada més recent de tots els components de l'aplicació. Després d'importar com a mínim un component, podeu editar-ne la còpia i suprimir-ne les que no necessiteu.

Podeu desar una aplicació amb els components existents a un fitxer localment i, a continuació, tornar a utilitzar el fitxer important-lo. Podeu utilitzar el fitxer per importar components a una altra aplicació.

Si l'aplicació conté una versió modificada del mateix component, se us demanarà que decidiu si voleu substituir la versió modificada o cancel·lar la importació.

Després de crear components en una aplicació, la resta d'aplicacions poden consumir els components d'aquesta aplicació important-los.

Nota

Si a l'aplicació original es modifica un component que heu importat des d'una altra aplicació, heu de tornar a importar el component manualment a l'aplicació que consumeix per rebre els canvis més recents dels components. Utilitzeu les biblioteques de components per treballar amb actualitzacions dels components de manera més eficient.

Exportar els components de l'aplicació

Podeu exportar els components a un fitxer i baixar-los per a la importació a una altra aplicació.

Seleccioneu l'opció Exporta els components de la secció Components a la visualització d'arbre de la subfinestra esquerra:

També podeu utilitzar el menú Insereix i, a continuació, seleccionar el menú desplegable Personalitzat en el seu lloc.

Seleccionar Exporta components baixa els components a un fitxer:

El fitxer de component descarregat utilitza l'extensió de nom de fitxer .msapp.

Importar components de fitxers de components exportats

Per importar components d'un fitxer de components exportats, seleccioneu Importa els components des del menú Insereix i, a continuació, utilitzeu el menú desplegable Personalitzat o utilitzeu els Components a la visualització d'arbre de la subfinestra esquerra. Al quadre de diàleg de components, seleccioneu Puja un fitxer en comptes de seleccionar qualsevol altre component o aplicació:

Des del quadre de diàleg Obre, navegueu a la ubicació del fitxer del component i seleccioneu Obre per importar components dins de l'aplicació.

Importar components d'una aplicació exportada

Podeu desar localment una aplicació mitjançant l'opció Fitxer > Anomena i desa:

Quan deseu l'aplicació, podeu tornar a utilitzar els components d'aquesta aplicació mitjançant el mateix mètode d'importació de components des d'un fitxer. Seguiu les instruccions de la secció anterior sobre la importació de components des d'un fitxer de components exportats.

Limitacions conegudes

• Una propietat d'entrada personalitzada no es pot configurar a un valor de propietat de sortida personalitzat en les mateixes o diferents instàncies quan teniu dues o més instàncies del mateix component en una aplicació. Aquesta acció tindrà com a conseqüència un missatge d'advertiment de referència circular. Per ajudar-vos en aquesta limitació, podeu crear una còpia del component a l'aplicació.
• L'addició i l'execució de fluxos de Power Automate a les biblioteques de components no està admesa.
• No podeu desar orígens de dades ni controls que incloguin dades d'aquests orígens de dades (com ara formularis, quadrícules de dades o taules de dades) amb components.
• No podeu inserir un component en una galeria o un formulari (inclòs un formulari de SharePoint).
• Els components no admeten la funció UpdateContext, però es poden crear i actualitzar variables en un component mitjançant la funció Set. L'àmbit d'aquestes variables està limitat al component, però podeu accedir-hi des de fora del component a través de propietats de sortida personalitzades.

Passos següents

Més informació sobre com utilitzar una biblioteca de components per crear un dipòsit d'elements reutilitzables.

Consulteu també

• Biblioteca de components
• Administració del cicle de vida de l'aplicació (ALM) de Biblioteca de components
• Assignar camps d'entrada d'un component
• Afegir contingut multimèdia a un component
• Fórmules de comportament per a components
• Power Apps component framework
• Afegir components de llenç a una pàgina personalitzada d'una aplicació basada en models

Nota

Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)

Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).