Code components for canvas apps

Power Apps component framework enables app makers to create code components to use in an app or across the apps. More information: Power Apps component framework overview

In this public preview, Power Apps component framework enables app makers to create code components, debug, import, and add them to canvas apps using the Power Apps CLI tooling. Only specific APIs are supported in this public preview. We recommend you to check each API to determine whether it supports canvas apps.

Warning

Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data. When adding code components to an app, make sure that the code component solutions are from a trusted source.

Prerequisites

  1. A Power Apps license is required. More information: Power Apps component framework licensing
  2. System Administrator privileges are required to enable the Power Apps component feature in the environment.

Enable Power Apps component framework feature

To add code components to an app, you need to enable the Power Apps component framework feature in each environment where you want to use them. To enable an environment to use code components inside its apps:

  1. Sign in to Power Apps.

  2. Select the Settings icon and then select Admin Center.

    Settings and Admin Center

  3. Select the Environments tab in the left pane and select the environment where you want to enable this feature, select the ellipsis (...), and then select Settings.

  4. Under the Products tab, select Features.

    Enable Power Apps component framework

  5. From the list of available features, set the switch to On under Power Apps component framework for canvas apps and click Save.

  6. Now, open the app where you want to add the code component and navigate to File > Settings and select Advanced settings.

    Enable components for Power Apps component framework

  7. Turn the Components switch to On under the Experimental feature section.

Implementing code components

After you enable the Power Apps component framework feature in your environment, you can start implementing the logic for code components.

The Create your first code component topic demonstrates the step-by-step process to create code components.

Add components to a canvas app

To add code components to a canvas app:

  1. Navigate to Power Apps Studio.

  2. Create a new canvas app or edit an existing app to which you want to add the code component.

    Important

    Make sure the solution zip file is already imported into Microsoft Dataverse before you proceed to the next step.

  3. Go to Insert > Custom > Import component.

    Insert components

  4. Select the Code tab, add a component from the list, and then select Import.

    Import sample component

  5. Click the + icon on the left pane and expand the code components tab to add the sample component.

    Add sample component

Delete a code component

To delete a code component from a canvas app:

  1. Open the app where you have added the code component.

  2. Select the Tree view icon from the left pane and select the screen where you have added the code component.

  3. Select ellipse (...) next to the code component and select Delete.

    Delete code component

  4. Save the app to see the changes.

Update existing code components

Whenever you update the code components and want to see the changes in runtime, you need to bump the version attribute in the manifest file. It is recommended to always bump the version of the component whenever you make changes.

Note

Existing code components are updated only when the app is closed or reopened in Power Apps Studio. When you reopen the app, it asks you to update the code components. Simply deleting the code components or adding the code component back into the app doesn't update the components.

See also

Power Apps component framework overview
Create your first code component
Learn Power Apps component framework