Skip to content

Commit 4400b2e

Browse files
committed
Merging changes synced from https://github.com/MicrosoftDocs/powerapps-docs-pr (branch live)
2 parents 0a17988 + d19ccf1 commit 4400b2e

19 files changed

+91
-92
lines changed

powerapps-docs/developer/component-framework/code-components-alm.md

Lines changed: 12 additions & 12 deletions
Large diffs are not rendered by default.

powerapps-docs/developer/component-framework/code-components-best-practices.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ Always bundle the modules that are required as part of your code component inste
110110
111111
#### Linting
112112

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:
114114

115115
```shell
116116
npx eslint --init
@@ -165,7 +165,7 @@ Before you can use `eslint`, you need to add some scripts to the `package.json`:
165165
```
166166

167167

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).
169169

170170
Now at the command-line, you can use:
171171

@@ -199,7 +199,7 @@ This section contains best practices and guidance relating to HTML browser UI de
199199
200200
#### Use path-based imports from Fluent to reduce bundle size
201201
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:
203203
204204
```typescript
205205
import { Button } from '@fluentui/react'

powerapps-docs/developer/component-framework/component-framework-for-canvas-apps.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Professional developers can use Power Apps component framework to create, import
2424
> [!WARNING]
2525
> 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.
2626
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.
2828

2929
![Safety warning.](media/canvas-app-safety-warning.png "Safety warning")
3030

powerapps-docs/developer/component-framework/create-custom-controls-using-pcf.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To begin, open **Developer Command Prompt for VS 2017 or higher** after installi
2525

2626
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>`.
2727
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:
2929

3030
```CLI
3131
pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>

powerapps-docs/developer/component-framework/customize-editable-grid-control.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The template control is included in the [PowerApps-Samples](https://github.com/m
6565
> [!NOTE]
6666
> If the function returns null or undefined, then the grid will use the internal renderer/editor for the targeted cells.
6767
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.
6969
1. After publishing the grid customizer control, open the **Customize the system** panel from the **Settings > Customizations** menu.
7070

7171
:::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":::

powerapps-docs/developer/component-framework/debugging-custom-controls.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ Modern browsers have a built-in set of developer tools that allow you to inspect
122122

123123
### Bundling using webpack
124124

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`.
126126

127127
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.
128128

@@ -146,7 +146,7 @@ This section describes how to debug your code component inside the Microsoft Edg
146146

147147
4. Use `Ctrl` + `P` to show the **Open File** command pallet. You can also select **Open File** from the **ellipsis** menu.
148148

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)).
150150

151151
6. Select the file in the matches listed that will be similar to:
152152
`webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./DataSetGrid/index.ts`
@@ -189,7 +189,7 @@ Currently, by default, code components are configured to transpile into ES5 Java
189189

190190
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.
191191

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.
193193

194194
```XML
195195
<PropertyGroup>
@@ -232,8 +232,8 @@ To debug your code component using Fiddler:
232232

233233
where:
234234

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`
237237

238238
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.
239239

powerapps-docs/developer/component-framework/implementing-controls-using-typescript.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ To create a new project:
6363
6464
1. Open a new terminal inside Visual Studio Code using **Terminal** -> **New Terminal**.
6565
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.
6767
6868
```CLI
6969
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
344344

345345
1. Create a new folder **Solutions** inside the **LinearInputControl** folder and navigate into the folder.
346346

347-
2. Create a new solution project in the **LinearInputControl** folder using the following command:
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:
348348

349349
```CLI
350350
pac solution init --publisher-name Samples --publisher-prefix samples

0 commit comments

Comments
 (0)