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
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/code-components-best-practices.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -110,7 +110,7 @@ Always bundle the modules that are required as part of your code component inste
110
110
111
111
#### Linting
112
112
113
-
Linting is where a tool can scan the code for potential issues. The template used by `pac pcf init` installs the `eslint` module to your project and configures it by adding an `.eslintrc.json` file. `Eslint` requires configuring for TypeScript and React coding styles. It can also be used to fix some of these issues automatically where possible. To configure, at the command-line use:
113
+
Linting is where a tool can scan the code for potential issues. The template used by [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) installs the `eslint` module to your project and configures it by adding an `.eslintrc.json` file. `Eslint` requires configuring for TypeScript and React coding styles. It can also be used to fix some of these issues automatically where possible. To configure, at the command-line use:
114
114
115
115
```shell
116
116
npx eslint --init
@@ -165,7 +165,7 @@ Before you can use `eslint`, you need to add some scripts to the `package.json`:
165
165
```
166
166
167
167
168
-
The `eslint` script accepts the folder that contains your code. Replace **MY_CONTROL_NAME** to be the same name as the code component used when calling `pac pcf init`.
168
+
The `eslint` script accepts the folder that contains your code. Replace **MY_CONTROL_NAME** to be the same name as the code component used when calling [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init).
169
169
170
170
Now at the command-line, you can use:
171
171
@@ -199,7 +199,7 @@ This section contains best practices and guidance relating to HTML browser UI de
199
199
200
200
#### Use path-based imports from Fluent to reduce bundle size
201
201
202
-
Currently, the code component templates used with `pac pcf init` will not use tree-shaking, which is the process where `webpack` detects modules imported that are not used and removes them. This means if you import from Fluent UI using the following, it imports and bundles the entire library:
202
+
Currently, the code component templates used with [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) will not use tree-shaking, which is the process where `webpack` detects modules imported that are not used and removes them. This means if you import from Fluent UI using the following, it imports and bundles the entire library:
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/component-framework-for-canvas-apps.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ Professional developers can use Power Apps component framework to create, import
24
24
> [!WARNING]
25
25
> Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data when rendered in Power Apps Studio. When adding code components to a canvas app, make sure that the code component solutions are from a trusted source. This vulnerability does not exist when playing the canvas app.
26
26
27
-
When you open a canvas app that contains code components in Power Apps Studio, a warning message about potentially unsafe code appears. Code components in the Power Apps Studio environment have access to security tokens; hence only components from trusted sources should be opened. Administrators and system customizers should review and validate all code components before importing those components in an environment and making them available for makers to use in their apps. The `Default` publisher is shown when you import code components by using an unmanaged solution or when you have used `pac pcf push` to install your code component.
27
+
When you open a canvas app that contains code components in Power Apps Studio, a warning message about potentially unsafe code appears. Code components in the Power Apps Studio environment have access to security tokens; hence only components from trusted sources should be opened. Administrators and system customizers should review and validate all code components before importing those components in an environment and making them available for makers to use in their apps. The `Default` publisher is shown when you import code components by using an unmanaged solution or when you have used [pac pcf push](/power-platform/developer/cli/reference/pcf#pac-pcf-push) to install your code component.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/create-custom-controls-using-pcf.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,7 @@ To begin, open **Developer Command Prompt for VS 2017 or higher** after installi
25
25
26
26
1. In the Developer Command Prompt, 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>`.
27
27
2. Go to the newly created folder using the command `cd <specify your new folder path>`.
28
-
3. Create a new component project by passing some basic parameters using the command:
28
+
3. Create a new component project by passing some basic parameters using the [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init)command:
29
29
30
30
```CLI
31
31
pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/customize-editable-grid-control.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -65,7 +65,7 @@ The template control is included in the [PowerApps-Samples](https://github.com/m
65
65
> [!NOTE]
66
66
> If the function returns null or undefined, then the grid will use the internal renderer/editor for the targeted cells.
67
67
68
-
1. After defining your custom cell renderers and editors, **package** the grid customizer control and **import** it to your Power Apps environment. Alternatively, you can use the `pac pcf push` command. More information: [PCF command](/power-platform/developer/cli/reference/pcf-command)
68
+
1. After defining your custom cell renderers and editors, **package** the grid customizer control and **import** it to your Power Apps environment. Alternatively, you can use the [pac pcf push](/power-platform/developer/cli/reference/pcf#pac-pcf-push) command.
69
69
1. After publishing the grid customizer control, open the **Customize the system** panel from the **Settings > Customizations** menu.
70
70
71
71
:::image type="content" source="media/customize-editable-grid-settings-customize-system.png" alt-text="Open the Customize the system panel from the Settings > Customizations menu":::
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/debugging-custom-controls.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -122,7 +122,7 @@ Modern browsers have a built-in set of developer tools that allow you to inspect
122
122
123
123
### Bundling using webpack
124
124
125
-
When writing code components using TypeScript, your code will likely look different from the JavaScript that is emitted into the bundled code component output. When you run `npm start` or `npm start watch`, the `pcf-scripts` module (added to the `packages.json` by running `pac pcf init`) uses web pack to build multiple TypeScript files into a single `bundle.js` inside the `out` folder. This folder will also contain any other resources (for example, `html`/`css`) that are referenced by your `ControlManifest.Input.xml` including the manifest itself, but named instead as just `ControlManifest.xml`.
125
+
When writing code components using TypeScript, your code will likely look different from the JavaScript that is emitted into the bundled code component output. When you run `npm start` or `npm start watch`, the `pcf-scripts` module (added to the `packages.json` by running [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init)) uses web pack to build multiple TypeScript files into a single `bundle.js` inside the `out` folder. This folder will also contain any other resources (for example, `html`/`css`) that are referenced by your `ControlManifest.Input.xml` including the manifest itself, but named instead as just `ControlManifest.xml`.
126
126
127
127
When you use modern TypeScript language features such as import/export or async/await that are not supported by the targeted standard of JavaScript (e.g. ES5), the build process will transpile the TypeScript into JavaScript without using these language features. The source maps that are output as part of the development build, provide the information to the developer tools so that breakpoint locations in your TypeScript can be mapped to the corresponding line of JavaScript. Equally, when an exception occurs or you step through the code, you can see the original TypeScript line rather than the underlying transpiled JavaScript.
128
128
@@ -146,7 +146,7 @@ This section describes how to debug your code component inside the Microsoft Edg
146
146
147
147
4. Use `Ctrl` + `P` to show the **Open File** command pallet. You can also select **Open File** from the **ellipsis** menu.
148
148
149
-
5. Enter the name of your control (which will be the name of the control you used in `pac pcf init`).
149
+
5. Enter the name of your control (which will be the name of the control you used in [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init)).
150
150
151
151
6. Select the file in the matches listed that will be similar to:
@@ -189,7 +189,7 @@ Currently, by default, code components are configured to transpile into ES5 Java
189
189
190
190
To fully test the logic inside the context of a model-driven app, canvas app, or portal you can first deploy and configure your code component to Microsoft Dataverse and then use either [Fiddler](https://www.telerik.com/download/fiddler)'s AutoResponder feature or use [requestly](https://requestly.io/). In both cases you will load a development build of your code component (built locally) into the browser without having to continuously deploy changes as you debug your code. This also allows you to debug against a non-development downstream environment without having to first deploy a development build.
191
191
192
-
First ensure your component is deployed and configured in Microsoft Dataverse. Ideally, you should only publish production builds of code components into Microsoft Dataverse. For larger code components, publishing a development build may result in the error [Web resource size is too large](issues-and-workarounds.md#web-resource-size-is-too-large). Since we are going to redirect the code component's `bundle.js` to a locally built version, you can update your `.pcfproj` file to always build in production mode when using `pac pcf push` by setting the property `PcfBuildMode` to production.
192
+
First ensure your component is deployed and configured in Microsoft Dataverse. Ideally, you should only publish production builds of code components into Microsoft Dataverse. For larger code components, publishing a development build may result in the error [Web resource size is too large](issues-and-workarounds.md#web-resource-size-is-too-large). Since we are going to redirect the code component's `bundle.js` to a locally built version, you can update your `.pcfproj` file to always build in production mode when using [pac pcf push](/power-platform/developer/cli/reference/pcf#pac-pcf-push) by setting the property `PcfBuildMode` to production.
193
193
194
194
```XML
195
195
<PropertyGroup>
@@ -232,8 +232,8 @@ To debug your code component using Fiddler:
232
232
233
233
where:
234
234
235
-
-**YOUR_NAMESPACE** - the namespace you provided to `pac pcf init` as contained in the `control.namespace` attribute of the `ControlManifest.Input.xml`
236
-
-**YOUR_CONTROL_NAME** - the component name you provided to `pac pcf init` and set in the `control.constructor` attribute of the `ControlManifest.Input.xml`
235
+
-**YOUR_NAMESPACE** - the namespace you provided to [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) as contained in the `control.namespace` attribute of the `ControlManifest.Input.xml`
236
+
-**YOUR_CONTROL_NAME** - the component name you provided to [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) and set in the `control.constructor` attribute of the `ControlManifest.Input.xml`
237
237
238
238
This rule aims to match requests for the code component's `bundle.js` and related resources (`css`/`html`) in such a way that it works for both model-driven, and canvas apps, both in Power Apps Studio and Player.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/implementing-controls-using-typescript.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ To create a new project:
63
63
64
64
1. Open a new terminal inside Visual Studio Code using **Terminal** -> **New Terminal**.
65
65
66
-
1. At the terminal prompt, create a new component project by passing basic parameters using the command.
66
+
1. At the terminal prompt, create a new component project by passing basic parameters using the [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) command.
67
67
68
68
```CLI
69
69
pac pcf init --namespace SampleNamespace --name LinearInputControl --template field
@@ -344,7 +344,7 @@ Follow these steps to create and import a [solution](../../maker/data-platform/s
344
344
345
345
1. Create a new folder **Solutions** inside the **LinearInputControl** folder and navigate into the folder.
346
346
347
-
2. Create a new solution project in the **LinearInputControl** folder using the followingcommand:
347
+
2. Create a new solution project in the **LinearInputControl** folder using the [pac solution init](/power-platform/developer/cli/reference/solution#pac-solution-init)command:
0 commit comments