Utilitzar l'etiqueta de plantilla de Liquid per als components de codi

Nota

Des del 12 d'octubre de 2022, els portals del Power Apps són Power Pages. Més informació: Microsoft Power Pages ara està disponible de manera general (bloc)
Ben aviat migrarem i combinarem la documentació dels portals del Power Apps amb la documentació del Power Pages.

El Power Apps component framework capacita els desenvolupadors professionals i els desenvolupadors d'aplicacions per crear components de codi per a les aplicacions basades en model i de llenç. Aquests components de codi poden proporcionar una experiència millorada per als usuaris que treballen amb dades de formularis, visualitzacions i escriptoris digitals. Més informació: Ús de components de codi als portals

Important

L'etiqueta de la plantilla Liquid de components de codi requereix la versió de portals 9.3.10.x o posterior.

En aquesta versió, hem introduït l'habilitat d'afegir components de codi creats amb el component framework mitjançant l'etiqueta de plantilla de Liquid a les pàgines web i els components habilitats amb l'API web que està habilitat per als components de nivell de camp als formularis dels portals.

Els components de codi es poden afegir amb l'etiqueta de plantilla de Liquid codecomponent. La clau per denotar el component de codi que s'ha de carregar es passa amb l'atribut name. La clau pot ser el GUID (que és l'ID del component de codi) o el nom del component de codi importat al Microsoft Dataverse.

Els valors de les propietats que espera el component de codi s'han de passar com a parell clau/valor separat per ":" (signe de dos punts), on la clau és el nom de la propietat i el valor és el valor de cadena JSON.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

Per exemple, per afegir un component de codi que esperi un paràmetre d'entrada anomenat controlValue, feu servir el amb l'etiqueta de plantilla Liquid següent:

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

Suggeriment

Aquest exemple utilitza paràmetres anomenats controlvalue i controlApiKey. No obstant això, el component que utilitzeu pot necessitar noms de paràmetres diferents.

Podeu utilitzar el Control de mapa d'exemple i empaquetar el component de codi com a solució per utilitzar-les amb portals.

Nota

Microsoft no admet els recursos creats per la comunitat. Si teniu preguntes o problemes amb els recursos de la comunitat, poseu-vos en contacte amb l'editor del recurs. Abans d'utilitzar aquests recursos, heu de garantir que compleixin les directrius del Power Apps component framework i que només s'utilitzen amb finalitats de referència.

Tutorial: Ús de components de codi en pàgines amb l'etiqueta de plantilla de Liquid

En aquest tutorial, configurareu els portals del Power Apps per afegir el component a una pàgina web. A continuació, visiteu la pàgina web dels portals i interactueu amb el component.

Abans de començar

Si utilitzeu el component de codi d'exemple utilitzat en aquesta secció, assegureu-vos d'importar primer les solucions d'exemple a l'entorn abans de començar. Per obtenir més informació sobre la importació de solucions, aneu a Importar solucions.

Requisits previs

Per obtenir els requisits previs i aprendre sobre els components de codi compatibles o no compatibles als portals, aneu a Utilitzar components de codi als portals.

Nota

Aquest exemple utilitza un component de codi de mostra creat amb el Power Apps component framework per millorar el control de mapa en una pàgina web. També podeu utilitzar qualsevol component existent o de nou de la vostra propietat i qualsevol altra pàgina web per a aquest tutorial. En aquest cas, assegureu-vos d'utilitzar el component i la pàgina web quan seguiu els passos d'aquest tutorial. Per obtenir més informació sobre com crear components de codi, aneu a Crear el primer component.

Pas 1. Afegir el component de codi a una pàgina web des de Studio

1. Obriu el portal a l'Estudi Power Apps de portals.

2. A l'extrem superior esquerre, seleccioneu Pàgina nova.

3. Seleccioneu En blanc.

4. A la subfinestra de propietats de la dreta, actualitzeu el nom de la pàgina web. Per exemple, "Visualitzador de mapes".

5. Actualitzeu l'adreça URL parcial. Per exemple, "mapviewer".

6. Amplieu Permisos.

7. Inhabiliteu Pàgina disponible per a tothom.

8. Seleccioneu les funcions web a les quals s'hauria de permetre l'accés a aquesta pàgina.

9. Seleccioneu l'àrea editable a la pàgina per editar el codi d'origen de Liquid.

10. Obriu l'editor de codi de Studio.

11. Afegiu el control amb l'etiqueta de plantilla de Liquid amb la sintaxi següent:

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
    

    Suggeriment

    Per recuperar els detalls de tots els components importats i cercar un nom de component, consulteu l'API web CustomControl.

    Per exemple:

    • Per cercar un component:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName

    • Per recuperar paràmetres d'entrada d'un component:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest

12. Deseu i tanqueu l'editor de codi.

13. A l'extrem superior dret, selecciona Navega pel lloc web.

14. Ara, la pàgina web mostrarà el control afegit.

Passos següents

Informació general: Ús dels components de codi als portals

Consulteu també

Etiqueta d'entitat codecomponent de Dataverse
Etiqueta de plantilla de codecomponent
Informació general del Power Apps component framework
Crear el vostre primer component
Afegir components de codi a una columna o taula en aplicacions basades en models
Implementar un component de l'API web del portal d'exemple

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