Liquid template tag for code components

[This article is pre-release documentation and is subject to change.]

Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can provide an enhanced experience for users working with data on forms, views, and dashboards. More information: Use code components in portals

Important

The Liquid template tag for code components requires portals version 9.3.10.x or later.

With this release, we've introduced the ability to add code components using a Liquid template tag on webpages, and enabled components using Web API that are enabled for field-level components on forms in portals.

Code components can be added using the codecomponent Liquid template tag. The key for denoting the code component that needs to be loaded is passed in using the name attribute. The key can be the GUID (which is the code component ID) or the name of the code component imported into Microsoft Dataverse.

The values of the properties that the code component expects need to be passed in as a key/value pair separated by ":" (colon sign), where the key is the property name and the value is the JSON string value.

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

For example, to add a code component expecting an input parameter named controlValue, use the following Liquid template tag:

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

Tip

This example uses parameters called controlvalue and controlApiKey, however the component you use may require different parameter names.

You can use the sample map control and package the code component as a solution for use with portals.

Note

Resources created by the community are not supported by Microsoft. If you have questions or issues with community resources, contact the publisher of the resource. Before using these resources, you must ensure that they meet the Power Apps component framework guidelines and should only be used for reference purpose.

Tutorial: Use code components on pages with Liquid template tag

In this tutorial, you'll configure Power Apps portals to add the component to a webpage. You'll then visit the portals webpage and interact with the component.

Before you begin

If you're using the sample code component used in this tutorial, ensure that you first import the sample solutions to the environment before you begin. To learn about solution import, go to Import solutions.

Prerequisites

For prerequisites, and to learn about supported/unsupported code components in portals, go to Use code components in portals.

Note

This tutorial uses a sample code component created using Power Apps component framework to demonstrate a map control on a webpage. You can also use any existing or new component of your own, and any other webpage for this tutorial. In this case, be sure to use your component and webpage when following the steps in this tutorial. For more information about how to create code components, go to Create your first component.

Step 1. Add the code component to a webpage from Studio

  1. Open your portal in Power Apps portals Studio.

  2. On the top-left corner, select New page.

  3. Select Blank.

  4. On the right-side property pane, update the webpage name. For example, "Map Viewer."

  5. Update partial URL. For example, "mapviewer."

  6. Expand Permissions.

  7. Disable Page available to everyone.

  8. Select the web roles that should be allowed access to this page.

  9. Select the editable area on page to edit the Liquid source code.

  10. Open studio code editor.

  11. Add control with Liquid template tag using the following syntax:

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

    Tip

    To retrieve the details of all imported components, and to search for a component name, refer to CustomControl Web API.

    For example:

    • To search for a component:

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

    • To retrieve input parameters for a component:

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

  12. Save and close the code editor.

  13. On the top-right corner, select Browse website.

  14. The webpage will now show the control added on it.

Next steps

Overview: Use code components in portals

See also

Codecomponent Dataverse entity tag
Codecomponent Template tag
Power Apps component framework overview
Create your first component
Add code components to a column or table in model-driven apps
Implement a sample portal Web API component