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
Developers need to be able to style their components so they look like the rest of the application they're included in. They can do this when modern theming is in effect for either a canvas app (via the [Modern controls and themes](../../maker/canvas-apps/controls/modern-controls/overview-modern-controls.md) feature) or model-driven app (through the [new refreshed look](../../user/modern-fluent-design.md)). Use modern theming, which is based on [Fluent UI React v9](https://react.fluentui.dev/), to style your component. This approach is recommended to get the best performance and theming experience for your component.
25
+
26
+
There are four different ways to apply modern theming to your component.
Wrapping Fluent UI v9 controls as a component is the easiest way to utilize modern theming because the modern theme is automatically applied to these controls. The only prerequisite is to ensure your component adds a dependency on the [React controls & platform libraries (preview)](react-controls-platform-libraries.md) as shown below. This approach allows your component to use the same React and Fluent libraries as the platform, and therefore share the same React context that passes the theme tokens down to the component.
36
+
37
+
```xml
38
+
<resources>
39
+
<codepath="index.ts"order="1"/>
40
+
<!-- Dependency on React controls & platform libraries -->
41
+
<platform-libraryname="React"version="16.8.6" />
42
+
<platform-libraryname="Fluent"version="9.4.0" />
43
+
</resources>
44
+
```
45
+
46
+
## Fluent UI v8 controls
47
+
48
+
Fluent provides a migration path for applying v9 theme constructs when you use Fluent UI v8 controls in your component. Use the `createV8Theme` function included in the [Fluent's v8 to v9 migration package](https://www.npmjs.com/package/@fluentui/react-migration-v8-v9) to create a v8 theme based on v9 theme tokens, as shown in the following example:
If your component doesn't use Fluent UI, you can take a dependency directly on the v9 theme tokens available through the `fluentDesignLanguage` context parameter. Use this parameter to get access to all [theme](reference/theming.md) tokens so it can reference any aspect of the theme to style itself.
When your component requires styling that is different from the current theme of the app, create your own `FluentProvider` and pass your own set of theme tokens to be used by your component.
Examples for each of these use cases are available at [Modern Theming API control](./sample-controls/modern-theming-api-control.md).
81
+
82
+
## FAQ
83
+
84
+
This section contains frequently asked questions. If you have a question about this feature, use the **Feedback** for **This page** button at the bottom of this page to create a GitHub issue.
85
+
86
+
### Q: My control uses Fluent UI v9 and has a dependency on the platform libraries, but I don't want to utilize modern theming. How can I disable it for my component?
87
+
88
+
**A**: You can do this two different ways:
89
+
90
+
1. You can create your own component-level `FluentProvider`
91
+
92
+
```tsx
93
+
<FluentProvidertheme={customFluentV9Theme}>
94
+
{/* your control */}
95
+
</FluentProvider>
96
+
```
97
+
98
+
1. You can wrap your control inside `IdPrefixContext.Provider` and set your own `idPrefix` value. This prevents your component from getting theme tokens from the platform.
99
+
100
+
```tsx
101
+
<IdPrefixProvidervalue="custom-control-prefix">
102
+
<Labelweight="semibold">This label is not getting Modern Theming</Label>
103
+
</IdPrefixProvider>
104
+
```
105
+
106
+
### Q: Some of my Fluent UI v9 controls aren't getting styles
107
+
108
+
**A**: Fluent v9 controls that rely on the React Portal need to be rewrapped in the theme provider to ensure styling is properly applied. You can use `FluentProvider`.
109
+
110
+
### Q: How can I check if modern theming is enabled
111
+
112
+
**A**: You can check if tokens are available: `context.fluentDesignLanguage?.tokenTheme`. Or in model-driven applications you can check app settings: `context.appSettings.getIsFluentThemingEnabled()`.
113
+
114
+
## Related articles
115
+
116
+
[Theming (Power Apps component framework API reference)](../component-framework/reference/theming.md)
117
+
[Modern Theming API control](./sample-controls/modern-theming-api-control.md)
118
+
[Use modern themes in canvas apps (preview)](../../maker/canvas-apps/controls/modern-controls/modern-theming.md)
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/react-controls-platform-libraries.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
-
title: "React controls & platform libraries (Preview) | Microsoft Docs"
3
-
description: "You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you are using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent packages individually for each control."
2
+
title: "React controls & platform libraries (preview) | Microsoft Docs"
3
+
description: "You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you're using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent packages individually for each control."
4
4
keywords: "Component Framework, code components, Power Apps controls"
You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you are using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent libraries individually for each control. All controls will share a common library instance and version to provide a seamless and consistent experience.
24
+
You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you're using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent libraries individually for each control. All controls share a common library instance and version to provide a seamless and consistent experience.
25
25
26
-
By re-using the existing platform React and Fluent libraries, you can expect the following benefits:
26
+
By reusing the existing platform React and Fluent libraries, you can expect the following benefits:
27
27
28
28
- Reduced control bundle size
29
29
- Optimized solution packaging
30
30
- Faster runtime transfer, scripting and control rendering
31
31
32
-
With the benefits available by re-using these component resources, we expect this approach will become the preferred way all Power Apps code components will be created after this feature reaches general availability.
32
+
With the benefits available by reusing these component resources, we expect this approach will become the preferred way all Power Apps code components will be created after this feature reaches general availability.
33
33
34
34
## Prerequisites
35
35
36
-
Just as with any component, you must install [Visual Studio Code](https://code.visualstudio.com/Download) and the [Microsoft Power Platform CLI](../data-platform/powerapps-cli.md#install-microsoft-power-platform-cli) as described here: [Prerequisites](implementing-controls-using-typescript.md#prerequisites)
36
+
As with any component, you must install [Visual Studio Code](https://code.visualstudio.com/Download) and the [Microsoft Power Platform CLI](../data-platform/powerapps-cli.md#install-microsoft-power-platform-cli) as described here: [Prerequisites](implementing-controls-using-typescript.md#prerequisites)
37
37
38
38
> [!NOTE]
39
39
> If you have already installed Power Platform CLI for Windows, make sure you are running the latest version by using the `pac install latest` command.
@@ -44,7 +44,7 @@ Just as with any component, you must install [Visual Studio Code](https://code.v
44
44
> [!NOTE]
45
45
> These instructions expect that you have created code components before. If you have not, see this tutorial: [Create your first component](implementing-controls-using-typescript.md)
46
46
47
-
There is a new `--framework` (`-fw`) parameter for the [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) command. Set the value of this parameter to `react`.
47
+
There's a new `--framework` (`-fw`) parameter for the [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) command. Set the value of this parameter to `react`.
48
48
49
49
The following table shows the long form of the commands:
50
50
@@ -56,19 +56,19 @@ The following table shows the long form of the commands:
56
56
|`--framework`|`react`|
57
57
|`--run-npm-install`|`true` (default) |
58
58
59
-
The following PowerShell command uses the parameter shortcuts and will create a React component project and run `npm-install` in the folder where you run the command:
59
+
The following PowerShell command uses the parameter shortcuts and creates a React component project and run `npm-install` in the folder where you run the command:
You can now build and view the control in the test harness as usual using `npm start`.
66
66
67
-
After you build the control you can package it inside solutions and use it for model-driven apps (including custom pages) and canvas apps like standard code components.
67
+
After you build the control, you can package it inside solutions and use it for model-driven apps (including custom pages) and canvas apps like standard code components.
68
68
69
69
## Differences from standard components
70
70
71
-
These are the differences between a React component and a standard component.
71
+
Thi section describes the differences between a React component and a standard component.
72
72
73
73
### ControlManifest.Input.xml
74
74
@@ -77,7 +77,7 @@ The [control element](manifest-schema-reference/control.md) `control-type` attri
77
77
> [!NOTE]
78
78
> Changing this value does not convert a component from one type to another.
79
79
80
-
Within the [resources element](manifest-schema-reference/resources.md), you will find two new [platform-library element](manifest-schema-reference/platform-library.md) child elements like the following:
80
+
Within the [resources element](manifest-schema-reference/resources.md), you'll find two new [platform-library element](manifest-schema-reference/platform-library.md) child elements like the following:
81
81
82
82
```xml
83
83
<resources>
@@ -94,15 +94,15 @@ We recommend using Fluent platform libraries. If you don't use Fluent, you shoul
94
94
95
95
### Index.ts
96
96
97
-
The [ReactControl.init](reference/react-control/init.md) method for control initialization does not have `div` parameters because these controls do not render the DOM directly. Instead [ReactControl.updateView](reference/react-control/updateview.md) returns a ReactElement which has the details of the actual control in React format.
97
+
The [ReactControl.init](reference/react-control/init.md) method for control initialization doesn't have `div` parameters because these controls don't render the DOM directly. Instead [ReactControl.updateView](reference/react-control/updateview.md) returns a ReactElement that has the details of the actual control in React format.
98
98
99
99
### bundle.js
100
100
101
-
React and Fluent libraries are not included in the package because they are shared, therfore the size of bundle.js is significantly smaller.
101
+
React and Fluent libraries aren't included in the package because they're shared, therefore the size of bundle.js is smaller.
102
102
103
103
## Sample controls
104
104
105
-
You can find two new controls added to the samples as part of this preview. Functionally, they are the same as their standard version but will have much better performance.
105
+
You can find two new controls added to the samples as part of this preview. Functionally, they're the same as their standard version but have better performance.
106
106
107
107
|Sample |Description|Link|
108
108
|---------|---------|---------|
@@ -111,7 +111,7 @@ You can find two new controls added to the samples as part of this preview. Func
111
111
112
112
## Supported platform libraries list
113
113
114
-
Platform libraries are made available both at the build and runtime to the controls which are using platform libraries capability. Currently, the following versions are provided by the platform and these can also be found in the control manifest.
114
+
Platform libraries are made available both at the build and runtime to the controls that are using platform libraries capability. Currently, the following versions are provided by the platform and these can also be found in the control manifest.
115
115
116
116
| Name | npm package name | Version |
117
117
| ------ | ---------------- | ------- |
@@ -128,7 +128,7 @@ A: No. You must create a new control using the new template and then update the
128
128
129
129
A: No. React controls & platform libraries are currently only available for canvas and model-driven apps.
130
130
131
-
## Related topics
131
+
## Related articles
132
132
133
133
[What are code components?](custom-controls-overview.md)<br/>
134
134
[Code components for canvas apps](component-framework-for-canvas-apps.md)<br/>
0 commit comments