Tutorial: Use dataset code components

Note

Effective October 12, 2022, Power Apps portals is Power Pages. More information: Microsoft Power Pages is now generally available (blog)
We will soon migrate and merge the Power Apps portals documentation with Power Pages documentation.

In this tutorial, you'll create a sample component using Power Apps component framework. Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas aps. 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

Note

  • This tutorial is based on the existing Power Apps component framework tutorial that walks you through Power Apps grid control (preview) component on list and sub grid on blank page. You can also use any existing or new component, add it to any other web page for this tutorial. In this case, be sure to your component and web page when following the steps in this tutorial. To learn which code components are supported in portals, see Use code components in portals

In this tutorial, you'll learn how to:

  • Create a sample component using Power Apps component framework
  • Package the component to a Microsoft Dataverse environment
  • Configure Power Pages to add the component to a web page
  • Visit your Power Pages web page to interact with the component

Prerequisites

  • Portal version 9.4.9.xx or higher. 
  • Dataverse base portal package 9.3.2209.x or higher. 

Step 1 - Create your first component

Complete the Create your first component tutorial.

Note

At the end of the Create your first component, you'll have a component named TSLinearInputComponent packaged and uploaded to your Dataverse environment.

Step 2 - Add the code component to views or subgrids in a model-driven app

To add your component to the Account table, views and subgrids, follow the steps here Convert views and subgrids into editable grids (preview) 

Step 3 - Add code component to a list and subgrid in portal

In this step, you'll create a new basic form in portals and then add the component to the created basic form. You can also use an existing basic form instead. 

Step 3.1 - Add the code component to lists

  1. Open the Portal Management app.

  2. On the left pane, under Content, select list. 

  3. Select New

  4. Enter Name. For example, Account list with code component

  5. For Table Name, select the table that you added the code component to earlier in this tutorial. 

  6. Select your portal website

  7. Select Use a configured code component as Yes 

    Use a configured code component.

Step 3.2 - Add the code component to views on list

Follow these steps to enable control on entity view in Dataverse. 

  1. Open the Portal Management app.

  2. Enter Name. For example, Account list with code component

  3. For Table Name, select the table that you added the code component to earlier in this tutorial. 

  4. Select your portal website

  5. Add views under advance setting grid. 

    Add views in advanced settings grid.

  6. Select Use a configured code component as Yes 

Step 3.3 - Add the code component to sub grid 

  1. Open the Portal Management app.

  2. On the left pane, under Content, select Basic Forms

  3. Select the basic form you created in the previous step. 

  4. Select Related

  5. Select Basic Form Metadata. 

  6. Select New Basic Form Metadata

  7. Select Type as Subgrid

  8. Select Subgrid Name

    Add code component to subgrid.

  9. For Control Style, select Code component

    Select Control style.

Add dataset-based code component using liquid tag

Data set based 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 more information, see Liquid template tag for code components.

Limitations

Actions and metadata filter configuration on lists and subgrid are not supported with Power Apps grid control.

See also

Use code components in Power Apps portals