{"content":"Recently, while developing a PCF control with the FluentUI React v9 library, I encountered a rather unusual and annoying runtime display bug. Its resolution ended up shedding light on an important concept that had previously escaped my attention and I thought it deserves its own blog post.\n🤒The symptoms The control I was developing is my latest community PCF control, the FluentUI Month Picker.\n🔗FluentUI Month Picker | PCF Gallery 🔗 GitHub repo : drivardxrm/FluentUI.MonthPicker.PCF\nGiven that FluentUI v9(@fluentui/react-components) is the main library used by the platform to render form elements when the New Look switch is activated\u0026hellip; see my previous blog post. I decided to use it in my project to replicate the look and feel of a native date picker.\nThe control functioned perfectly within the PCF test harness during development. However, upon deployment to a live Dataverse environment and integration into a form, inconsistencies surfaced in the display of the calendar pop-over.\nAs you can see in the image below, the styling of the calendar is off and the surface is transparent.\nMoreover, as soon as I selected a month in the calendar, the styling magically started to be applied correctly.\nThe cherry on top, this display issue seemed to happen only if my PCF control was configured on the first field of the form.\n🧑‍⚕️The diagnostic After struggling to find a solution and testing various approaches in vain, I decided to be pragmatic and look at the developer logs of the browser. Turns out that the answer was right there under my nose.\nI noticed this error message about conflicting DOM ids in the rendered page coming from the fluentui/react-provider library.\nInterestingly, the error message provides a link to the Advanced Configuration section of the FluentUI v9 documentation. This section explains the issue and offers a comprehensive solution.\n🔗Concepts / Developer / Advanced Configuration - Page ⋅ Storybook (fluentui.dev) 🔗feat: add IdPrefixProvider by layershifter · Pull Request #26496 · microsoft/fluentui (github.com)\n💊The fix One of the first thing to consider when working with FluentUI v9 is to wrap your application with a FluentProvider. This component is plays a crucial role in injecting both the theme and styles into the application.\nimport { Button, FluentProvider, webLightTheme } from \u0026#39;@fluentui/react-components\u0026#39; const SimpleApp= (): JSX.Element =\u0026gt; \u0026lt;FluentProvider theme={webLightTheme}\u0026gt; \u0026lt;Button appearance=\u0026#34;primary\u0026#34;\u0026gt;Hello FluentUI React v9\u0026lt;/Button\u0026gt; \u0026lt;/FluentProvider\u0026gt; export default SimpleApp See my previous blog post on PCF control development with FluentUI v9 for more context\n🔗 Develop PCF Controls with FluentUI React v9 - It Must Be Code!\nNow, Since FluentUI is also used natively by the PowerPlatform and that other PCF controls on the form might also bring their own flavor of the provider, chances are that we end up with multiple instances of FluentProvider with the same DOM id on the page at runtime. When this happens, it can cause interop problems, thus the display bug encountered earlier.\nTo mitigate this, we need to wrap the application with another component, IdPrefixProvider and provide an APPID. This ensures that the id of the rendered html element is unique by prefixing the standard id with the given APPID.\nimport { Button, FluentProvider, IdPrefixProvider, webLightTheme } from \u0026#39;@fluentui/react-components\u0026#39; const SimpleApp= (): JSX.Element =\u0026gt; \u0026lt;IdPrefixProvider value=\u0026#34;APPID-\u0026#34;\u0026gt; \u0026lt;FluentProvider theme={webLightTheme}\u0026gt; \u0026lt;Button appearance=\u0026#34;primary\u0026#34;\u0026gt;Hello FluentUI React v9\u0026lt;/Button\u0026gt; \u0026lt;/FluentProvider\u0026gt; \u0026lt;/IdPrefixProvider\u0026gt; export default SimpleApp Here is how I implemented the fix in my PCF control code. By adding a prefix that identifies the control \u0026rsquo; month-picker-\u0026rsquo; and an \u0026rsquo; instanceId\u0026rsquo; (randomly generated GUID), I can be sure that each possible instance of the control on a form will have a different prefix id.\nAs you can see in the image below, the FluentProvider root html element gets prefixed accordingly.\nAs soon as I deployed the version with the prefixed FluentProvider, collision errors were resolved and my PCF controls started to render flawlessly 💪.\nTakeaway Moving forward, I will always use the IdPrefixProvider in my PCF controls that uses FluentUI v9. This simple trick not only safeguards against DOM Id collisions but also enhances the overall robustness of PCF controls implementations.\nHope this helps,\nLinks Fluent UI React Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar. react.fluentui.dev feat: add IdPrefixProvider by layershifter · Pull Request #26496 · microsoft/fluentui New Behavior This PR implements IdPrefixProvider for @fluentui/react-components. This feature allows to better control automatically generated IDs: /* All ids in a scope will start with “scope-” */… github.com Develop PCF Controls with FluentUI React v9 Explore FluentUI React v9 and the experience of developing Power Apps Component Framework controls with the new component library. itmustbecode.com FluentUI Month Picker A control to select a month and optionally outputs some information about the selected month (ex. month number, number of days in month). pcf.gallery GitHub - drivardxrm/FluentUI.MonthPicker.PCF: PCF Control that renders a Month picker over a Date column PCF Control that renders a Month picker over a Date column - GitHub - drivardxrm/FluentUI.MonthPicker.PCF: PCF Control that renders a Month picker over a Date column github.com Image by Marcel Langthim from Pixabay\n","date":"2024-01-16T02:24:28Z","image":"/pcf-controls-with-fluentui-v9-avoid-dom-id-collisions/crash-test-1620591_1280.jpg","permalink":"/pcf-controls-with-fluentui-v9-avoid-dom-id-collisions/","title":"PCF Controls with FluentUI v9 - Avoid DOM id collisions"}