Comparteix a través de

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

  • Article

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ó: Utilitzar components de codi al Power Pages

Important

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

Amb aquesta versió, hem introduït la possibilitat d'afegir components de codi mitjançant una etiqueta de plantilla de Liquid a les pàgines web i hem habilitat components mitjançant l'API web que estan habilitats per a components de nivell de camp als formularis del Power Pages.

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>%}

Propina

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 de mostra i el paquet del component de codi com a solució per utilitzar amb el Power Pages.

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 el Power Pages per afegir el component a una pàgina web. A continuació, visiteu la pàgina web del lloc 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 al Power Pages, aneu a Utilitzar components de codi al Power Pages.

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 lloc a l'estudi de disseny del Power Pages.

  2. Seleccioneu l'àrea de treball Pàgines i seleccioneu + Pàgina.

  3. Assigneu un nom a la pàgina. Per exemple, Visualitzador de mapes.

  4. Seleccioneu la disposició de pàgina Començar des de zero.

  5. Seleccioneu el botó Edita el codi per obrir el Visual Studio Code al web.

  6. Afegiu el control entre <div></div> amb l'etiqueta de plantilla de Liquid i la sintaxi següent:

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

    S'ha afegit l'etiqueta de Liquid del codi de VS.

    Propina

    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

  7. Seleccioneu CTRL-S al teclat per desar el codi d'actualització.

  8. Torneu al estudi de disseny i seleccioneu Sincronitza per actualitzar la pàgina web amb les edicions del Visual Studio Code.

  9. A la cantonada superior dreta, seleccioneu Visualització prèvia i Escriptori per previsualitzar el lloc.

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

    Assigneu el component a la pàgina web.

Passos següents

Informació general: Utilitzar els components de codi als portals

Consulteu també