Informació general dels components de llenç

Nota

• Aquesta secció explica components de canvas que engloben capacitats d'extensibilitat d'interfície d'usuari de baix codi. Els desenvolupadors professionals també poden utilitzar el framework de components Power Apps per construir components de codi.
• També pots utilitzar components canvas en aplicacions basades en models utilitzant pàgines personalitzades i la biblioteca de components. Per a més informació, vegeu Afegir components de tela a una pàgina personalitzada en una aplicació basada en models.

Els components són blocs de construcció reutilitzables per a aplicacions canvas. Els creadors d'aplicacions poden crear controls personalitzats per utilitzar dins d'una aplicació o entre aplicacions mitjançant 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 quan es construeixen aplicacions més grans amb 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ç eliminant la necessitat de copiar i enganxar controls i millorar el rendiment. Quan utilitzes una biblioteca de components, els components ajuden a crear desenvolupament col·laboratiu i a estandarditzar l'aspecte i la sensació d'una organització.

Per aprendre a utilitzar components en aplicacions de canvas, mira aquest vídeo:

Components en aplicacions del llenç

Podeu crear un component des d'una aplicació tal com s'explica en aquest article o creant un component nou dins d'una biblioteca de components. Fes servir una biblioteca de components quan necessitis utilitzar components en diverses pantalles d'aplicacions. També pots copiar components existents a una biblioteca de components existent o nova.

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

Si seleccioneu Component nou, s'obre un llenç buit. Afegeix controls com a part de la definició de components al llenç. Si edites un component al canvas, actualitzes instàncies del mateix component en altres pantalles d'aplicacions. 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 l'aplicació apareixen a la categoria Personalitzada en una llista de components dins la vista d'arbre. Els components importats de biblioteques de components apareixen a la categoria de components de la biblioteca :

Nota

Els components discutits en aquest article són diferents del marc de components de Power Apps, que permet a desenvolupadors i creadors crear components de codi per a aplicacions basades en models i canvas. Per a més informació, vegeu Power Apps component framework overview.

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 millorar les propietats dels components proporciona encara més opcions per a les propietats, incloses les funcions i les funcions de comportament. Per obtenir més informació, vegeu Propietats del component del llenç (experimental)

La propietat d'entrada és com un component rep les dades que s'utilitzaran en el component. Les propietats d'entrada apareixen a la pestanya Propietats de la subfinestra 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 per defecte d'un control d'entrada de text.

La propietat de sortida s'utilitza per emetre dades o estat del component. Per exemple, la propietat Selected d'un control Gallery é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 reutilitzar-los. 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. Creeu una aplicació de llenç en blanc.

2. A la vista d'arbre , seleccioneuComponents i, a continuació, seleccioneu Component nou per crear un 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 del component 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 iDescripció , escriviu o enganxeu el text com a Elements .

   

   No incloguis espais al nom de la propietat perquè quan escriguis una fórmula et referiràs al component amb aquest nom. Per exemple, NomComponent.NomPropietat.

   El nom de visualització apareix a la pestanya Propietats de la subfinestra 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 consell 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ó, seleccioneuCrea.

   

   La propietat Elements es defineix 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, és possible que vulgueu canviar el valor de la propietat Elements perquè coincideixi amb 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 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 dreta.

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

   Table({Item:"SampleText"})
   

   

8. Al component, inseriu un control de galeria vertical en blanc i seleccioneu Disposició a la subfinestra de propietats com a Títol.

9. Assegureu-vos que la llista de propietats mostra la propietat Elements (com fa per defecte). Després fixa el valor d'aquesta propietat a aquesta expressió:

   MenuComponent.Items
   

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

10. (Opcional) Configura la propietat BorderThickness del control Gallery a 1 i la 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ó, afegeix el component a una pantalla i especifica una taula de cadenes perquè el component mostri.

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 nou component s'anomena MenuComponent_1 per defecte.

3. Definiu la propietat Elements de MenuComponent_1 en 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 ara, has creat un component i l'has afegit a una aplicació. A continuació, crea una propietat de sortida que reflecteixi l'element que l'usuari selecciona al menú.

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

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

3. Als quadres Nom de visualització, Nom de la propietat iDescripció , 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 el número del nom de la galeria si cal:

   Gallery1.Selected.Item
   

   

6. A la pantalla per defecte de l'aplicació, afegiu una etiqueta i definiu la seva propietat Text a aquesta expressió, ajustant el número del 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'abast mantenen el contracte de dades d'un component senzill i cohesionat, i ajuden a habilitar les actualitzacions de definició de components, especialment en 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ó. Aquesta compartició és especialment útil quan el component només està pensat per a una aplicació concreta. En aquests casos, podeu accedir directament a la informació del nivell d'aplicació activant l'interruptor Accés a l'abast de l'aplicació a la subfinestra de propietats del component:

Quan actives l'abast de l'aplicació Access, els següents elements són accessibles 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 desactives aquesta configuració, el component no pot accedir a cap dels elements anteriors. Les funcions Set i Collect encara estan disponibles, però les variables i col·leccions resultants estan assignades a la instància del component i no es comparteixen amb l'aplicació.

Les fonts de dades no tabulares, com Azure Blob Storage o un connector personalitzat, estan disponibles tant si aquesta opció està activada com desactivada. Penseu en aquestes fonts de dades més aviat com una referència a un recurs de l'entorn en comptes d'un recurs de l'aplicació. Quan un component s'incorpora a una aplicació des d'una biblioteca de components, també s'introdueixen aquestes fonts de dades de l'entorn.

Els components d'una biblioteca de components mai poden accedir a l'abast de l'aplicació, ja que no hi ha un únic àmbit d'aplicació al qual referir-se. Per tant, aquest paràmetre no està disponible en aquest context, i està desactivat. Un cop importat a una aplicació, i si el fabricant de components permet la personalització, el commutador es pot activar i el component es pot modificar per utilitzar l'abast 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 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 els components a totes les aplicacions. Quan s'utilitza una biblioteca de components, una aplicació manté les dependències dels components que utilitza. El creador de l'aplicació rep una alerta quan les actualitzacions dels components dependents estan 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à desactivada per defecte, ja que aquesta funció s'ha retirat. Tot i que el mètode recomanat per treballar amb components és utilitzar biblioteques de components, encara pots activar aquesta funció per aplicació com a excepció fins que s'elimini. Per fer-ho, edita la teva aplicació a Power Apps Studio i després, ves a Settings>Pròximes funcions>Retirat> Configura Exportar i importar components a Activat.

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 més components d'una aplicació a una altra aplicació, selecciona Importar components al menú Insereix i després utilitza el menú desplegable Personalitzat . O feu servir Components a la vista d'arbre del panell esquerre.

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 d'aquesta aplicació. Després d'importar almenys un component, pots editar la teva còpia i eliminar qualsevol que no necessitis.

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. Feu servir biblioteques de components per treballar amb actualitzacions de 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 components de la secció Components de la vista d'arbre del panell esquerre:

També podeu utilitzar el menú Insereix i després seleccionar el menú desplegable Personalitzat .

Si seleccioneu Exporta components , els components es descarregaran a un fitxer:

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

Importar components de fitxers de components exportats

Per importar components des d'un fitxer de components exportat, seleccioneu Importa components al menú Insereix i, a continuació, utilitzeu el menú desplegable Personalitzat o utilitzeu Components a la vista d'arbre del panell esquerre. Al quadre de diàleg de components, seleccioneu Carrega el fitxer en comptes de seleccionar altres components o aplicacions:

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

Importar components d'una aplicació exportada

Pots desar una aplicació localmentseleccionant Guardar Fitxer> Com:

Després de desar l'aplicació, pots reutilitzar els seus components important-los d'un fitxer. Per a més informació, vegeu la secció anterior sobre la importació de components des d'un fitxer de components exportats.

Limitacions conegudes

• Quan tens dues o més instàncies del mateix component en una aplicació, no pots configurar una propietat d'entrada personalitzada a un valor de propietat de sortida personalitzat entre la mateixa instància o diferents. Aquesta acció resulta en un missatge d'advertència circular de referència. Per superar aquesta limitació, crea una còpia del component dins de la teva aplicació.
• No es suporta afegir i executar fluxos de Power Automate en biblioteques de components.
• 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 pots inserir un component en una galeria o en un formulari (incloent-hi el formulari de SharePoint).
• Els components no admeten la funció UpdateContext , però podeu 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

Apreneu a utilitzar una biblioteca de components per crear un repositori de components reutilitzables.

Consulteu també

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