You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use PowerApps Command Line Interface (CLI) to create, debug and deploy custom PowerApps component framework components. PowerApps CLI will enable developers to quickly create PowerApps component framework components and will in the future be expanded to include support for additional development and Application Lifecycle Management (ALM) experiences.
19
+
This topic provides information on how to createand deploy a custom component using PowerApps component framework.
20
20
21
-
## What is Microsoft PowerApps CLI?
21
+
Ensure that you have installed Microsoft PowerApps CLI
22
22
23
-
Microsoft PowerApps CLI is a simple, single-stop developer command line interface enabling you to create custom component. PowerApps CLI is also the first step towards a comprehensive ALM story where enterprise developers and ISVs can create, build, debug and publish their PowerApps and Dynamics 365 for Customer Engagement apps extensions and customizations quickly and efficiently.
24
-
25
-
> [!IMPORTANT]
26
-
> - Microsoft PowerApps CLI tools are a pre-release version and may be different from the commercially released version.
> - If you give feedback about the software to Microsoft, you give to Microsoft, without charge, the right to use, share and commercialize your feedback in any way and for any purpose.
29
-
> - Microsoft doesn't provide support for this preview feature. Microsoft Technical Support won’t be able to help you with issues or questions.
30
-
31
-
## Prerequisites to use PowerApps CLI
32
-
33
-
To use PowerApps CLI you will need the following:
34
-
35
-
- Install [Npm](https://www.npmjs.com/get-npm)(comes with Node.js) or install [Node.js](https://nodejs.org/en/) (comes with npm). We recommend LTS (Long Term Support) version 10.15.3 LTS as it seems to be most stable.
36
-
- If you don’t already have Visual Studio 2017 or later, follow one of the options below:
37
-
- Option 1: Install Visual Studio 2017 or later
38
-
- Option 2: Install .NET Core 2.2 SDK and install Visual Studio Code
39
-
- Install Microsoft PowerApps CLI from [here](http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi)
40
-
41
-
42
-
43
-
> [!NOTE]
44
-
> To deploy your custom component, you will need Common Data Service environment with System administrator or System customizer privileges.
45
-
46
-
> [!NOTE]
47
-
> Currently PowerApps CLI is supported only on Windows 10.
48
-
49
-
## Creating a new PowerApps component framework component
23
+
## Create a new component
50
24
51
25
To get started, open a new Developer Command Prompt for VS 2017 after installing PowerApps CLI.
52
26
53
27
1. In the Developer Command Prompt for VS 2017, create a new folder on your local hard drive for example, *C:\Users\<your name>\Documents\My_PCF_Control*
54
28
2. Go to the newly created folder using the command `cd <specify your new folder path>`
55
-
3. Run the following command to create a new component project by passing some basic parameters
56
-
`pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type>`
29
+
3. Run the following command to create a new component project by passing some basic parameters:
30
+
31
+
`pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type>`
57
32
58
33
> [!NOTE]
59
-
> Today we offer two types of components **field** and **dataset**.
34
+
> Currently, we offer two types of components:**field** and **dataset**.
60
35
61
36
4. To retrieve all the required project dependencies, run the command `npm install`.
62
37
5. Open your project folder (`C:\Users\<your name>\Documents\My_PCF_Control\<component name>`) in any developer environment of your choice and get started with your custom component development.
63
38
64
-
## Building your components
39
+
## Build your component
65
40
66
41
To build your component you can open the folder in Visual Studio Code and use the (Ctrl-Shift-B) command, then select your build options. Alternately, you can build your control quickly using `npm run build` command in your Developer Command Prompt for VS 2017 window.
67
42
68
-
## Debugging your PowerApps component framework component
69
-
70
-
Once you are done implementing your custom component logic, run the following command to start the debugging process
71
-
`npm start`
72
-
73
-
> [!NOTE]
74
-
> Today you can only visualize your field component, but dataset support is coming soon. Below image shows a sample component implemented in the tutorial below just as an example.
75
-
76
-
> [!div class="mx-imgBorder"]
77
-
> ![local-host](media/local-host.png"local host")
78
-
79
-
As shown in the image above, the browse window will open with 3 sections. Your component will be rendered in the left pane while the right pane consists of **Inputs** and **Outputs** sections
80
-
81
-
-**Inputs** section is an interactive UI that displays all properties and their types/type-groups defined in the manifest.xml. It allows you to key in mock data for each property.
82
-
-**Outputs** section renders the output whenever a component's `getOutputs` method gets called.
83
-
84
-
> [!NOTE]
85
-
> If you want to modify the `manifest.xml` or create additional properties, you will need to restart the debug process before they appear in the inputs section.
86
-
87
-
As you are inputting mock data, you can use the browser’s debugging capabilities to observe the component behavior. Each browser provides you with a debugging tool to help you debug your code natively in the browser. Typically, you can activate debugging in your browser by pressing the **F12** key to display the native developer tool used for debugging. Today both Chrome and Edge browsers are supported.
88
-
89
-
For example, on **Microsoft Edge**,
90
-
91
-
- Press **F12** to open inspector.
92
-
- Click on your component
93
-
- On top bar, go to **Debugger**, and then start searching for the component name described in the Manifest file in the search bar. For example, type your component name like `Hello World component`.
> 2. Follow the steps to configure [AutoResponder](https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/streamline-javascript-development-fiddler-autoresponder)
114
-
115
-
## Deploying your components
116
-
117
-
Once the debugging and development is finished, you just have one step remaining to deploy your new component.
118
-
119
-
Follow the steps below to create and import a [solution](https://docs.microsoft.com/en-us/dynamics365/customer-engagement/customize/solutions-overview) file:
120
-
121
-
1. Create a new directory and go to it `cd <new directory name>`
122
-
2. Create a new solution project in the directory of your choice by using the command
123
-
`pac solution init --publisherName <enter your publisher name> --customizationPrefix <enter your publisher name>` after `cd <your new folder>`.
124
-
125
-
> [!NOTE]
126
-
> The [publisherName](https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/reference/entities/publisher) and [cutomizationPrefix](https://docs.microsoft.com/en-us/powerapps/maker/common-data-service/change-solution-publisher-prefix) values must be unique to your environment.
127
-
128
-
3. Once the new solution project is created, you need to refer to the ___location where the created component is located. You can add the reference by using the command
129
-
`pac solution add-reference --path <path or relative path of your PowerApps component framework project on disk>`
130
-
4. To generate a zip file from your solution project, you will need to `cd` into your solution project directory and build the project using the command `msbuild /t:restore` then `msbuild`
131
-
132
-
> [!NOTE]
133
-
> If msbuild 15 is not in the path, open Developer Command Prompt for Vs 2017 to run the `msbuild` commands.
134
-
135
-
> [!NOTE]
136
-
> Building the solution in the debug configuration, generates an unmanaged solution package. A managed solution package is generated by building the solution in release configuration. These settings can be overridden by specifying SolutionPackageType property in `cdsproj` file.
137
-
138
-
> [!NOTE]
139
-
> If you would like your project build to emit a managed solution or both managed and unmanaged, open the folder where you created your solution project, edit the `cdsproj` file and uncomment the below property group:
> You can also enable additional solution packaging [capabilities](https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/compress-extract-solution-file-solutionpackager) by adding any of the property group elements below:
148
-
149
-
```XML
150
-
<PropertyGroup>
151
-
<SolutionPackageErrorLevel />
152
-
<SolutionPackageEnableLocalization />
153
-
<SolutionPackagerWorkingDirectory />
154
-
<SolutionPackageLogFilePath />
155
-
<SolutionPackageZipFilePath />
156
-
<SolutionPackageMapFilePath />
157
-
</PropertyGroup>
158
-
```
159
-
160
-
5. The generated solution zip file is located in `\bin\debug\`.
161
-
6. You should manually [import the solution](https://docs.microsoft.com/en-us/dynamics365/customer-engagement/customize/import-update-export-solutions) using the web portal once the zip file is ready.
162
-
163
-
## Adding custom components to an entity or a field
164
-
165
-
To add a custom component like data-set component or simple table component to a grid or view, follow the steps mentioned in the topic [Add controls to fields and entities](add-custom-controls-to-a-field-or-entity.md).
166
-
167
-
## Telemetry
168
-
169
-
The feature team is aggregating anonymized telemetry in order to understand which features or capabilities in the PowerApps CLI tool are most often used by the developers. The aggregated data allows us to provide the best experience to the customers by focusing on what’s truly is important.
170
-
171
-
> [!NOTE]
172
-
> To disable the telemetry collection, run the command `pac telemetry --enable false`. To turn the telemetry back, use the command `pac telemetry --enable true`.
173
-
174
-
## How to Uninstall Microsoft PowerApps CLI
175
-
176
-
To uninstall the CLI tool please run the MSI from [here](http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi). If you are Private Preview Participant and have an older version of CLI, please follow below manual steps:
177
-
178
-
1. To find out where PowerApps CLI is installed, open a command prompt and type `where pac`
179
-
1. Delete the PowerAppsCLI folder.
180
-
1. Open Environment Variables tool by running command `rundll32 sysdm.cpl,EditEnvironmentVariables` in the command prompt
181
-
1. Double-click on `Path` under `User variable for...` section
182
-
1. Select the row containing PowerAppsCLI path and click the Delete button on the right-hand side
183
-
1. Click OK twice
43
+
> [!TIP]
44
+
> To debug your component during or after the build operation, see [Debug custom components](debugging-custom-controls.md).
184
45
185
46
## Known Configuration issues and Workarounds
186
47
187
48
**Msbuild error MSB4036:**
188
49
189
50
1. The name of the task in the project file is the same as the name of the task class.
190
51
2. The task class is public and implements the Microsoft.Build.Framework.ITask interface.
191
-
3. The task is correctly declared with <UsingTask> in the project file or in the *.tasks files located in the <path> directory
52
+
3. The task is correctly declared with \<UsingTask> in the project file or in the *.tasks files located in the <path> directory.
192
53
193
54
**Resolution:**
194
55
195
-
1. Open Visual Studio Installer
196
-
1. For VS 2017, click on modify
197
-
1. Click on Individual Components
198
-
1. Under Code Tools, check **NuGet targets & Build Tasks**
56
+
1. Open Visual Studio Installer.
57
+
1. For VS 2017, select **Modify**.
58
+
1. Click on Individual Components.
59
+
1. Under Code Tools, check **NuGet targets & Build Tasks**.
199
60
200
61
### See also
201
62
202
-
[Implementing components in TypeScript](implementing-controls-using-typescript.md)<br/>
203
-
[Updating existing components into new tools format](updating-existing-controls.md)<br/>
title: "What are custom components? | MicrosoftDocs"
3
3
description: "Use the PowerApps component framework to create custom components to provide enhanced user experience for users to view and work with data in forms, views, and dashboards."
0 commit comments