Create and build a code component
This topic demonstrates how to create and deploy code components using PowerApps CLI. Ensure that you have installed Microsoft PowerApps CLI.
Create a new component
To begin, open Developer Command Prompt for VS 2017 after installing PowerApps CLI.
In the Developer Command Prompt for VS 2017, create a new folder on your local machine, for example, C:\Users\your name\Documents\My_code_Component using the command
mkdir <Specify the folder name>.
Go to the newly created folder using the command
cd <specify your new folder path>.
Create a new component project by passing some basic parameters using the command:
pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>
Currently, PowerApps CLI supports two types of components: field and dataset for model-driven apps. For canvas apps, only the field type is supported for this experimental preview.
To retrieve all the required project dependencies, run the command
Open your project folder
C:\Users\<your name>\Documents\<My_code_Component>in any developer environment of your choice and get started with your code component development. The quickest way to get started is by running
code .from your command prompt once you are in the
C:\Users\<your name>\Documents\<My_code_Component>directory. This command opens your component project in Visual Studio Code.
Implement the required artifacts for the component like manifest, component logic and styling and then build the component project. More information: Implementing sample component
Build your component
To build the component project, open the project folder that contains
package.json in Visual Studio Code and use the (Ctrl-Shift-B) command, then select the build options. Alternatively, you can build the component quickly using the
npm run build command in the Developer Command Prompt for VS 2017 window.
To debug the component during or after the build operation, see Debug a code component.
Once you're done implementing the component logic in TypeScript, you need to bundle all the code component elements into a solution file so that you can import the solution into Common Data Service. More information: Package a code component
Known configuration issues and workarounds
Msbuild error MSB4036:
- The name of the task in the project file is the same as the name of the task class.
- The task class is public and implements the Microsoft.Build.Framework.ITask interface.
- The task is correctly declared with <UsingTask> in the project file or in the *.tasks files located in the path directory.
- Open Visual Studio Installer.
- For Visual Studio 2017, select Modify.
- Select Individual Components.
- Under Code Tools, check NuGet targets & Build Tasks.
If a component is created using a PowerApps CLI tooling version lower than 0.4.3, you will hit an error while trying to re-import the solution file into Common Data Service. The error is thrown because the newly imported component name is now being appended with the publisher prefix to ensure its uniqueness and to avoid collisions.
- Delete the solution containing the relevant component from Common Data Service. If the component is already configured on a form or grid, it needs to be removed there first because the component solution had a dependency on the configuration.
- Import the new solution with updates to the component built by the latest CLI version.
- Newly imported components can now be configured on forms or grids.
Debug code components
Package a code component
Add code components to a field or entity
Updating existing code components
PowerApps component framework API reference
PowerApps component framework overview