React version 18 has recently been pushed into npm which is great if all of your components support it, however, if you are working with Fluent UI then you may stumble across the following error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: my-app20@0.1.0 npm ERR! Found: @types/react@18.0.8 npm ERR! node_modules/@types/react npm ERR! @types/react@"^18.0.8" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @types/react@">=16.8.0 <18.0.0" from @fluentui/react@8.67.2 npm ERR! node_mod ..read more

The long-awaited 'virtual control' feature is finally in preview which means you can start to try converting your controls to be virtual - but what does this actually mean? What are virtual code component PCF controls? Virtual controls are probably better named React code components since this is their defining feature. Using them has the following benefits: Uses the host virtual DOM - The code component natively is added to the hosting apps 'Virtual DOM' instead of creating its own. This has performance benefits when you have apps that contain many code components. See more about t ..read more

If you are using Fluent UI in your code components (PCF) you probably are also using path-based imports to reduce your bundle size. This technique ensures that when you build your code component, the bundle doesn't include the entire Fluent UI library, but instead just the components that you need. With the recent update to Fluent UI, you might receive an error similar to the following: ERROR in ./somefile.tsx Module not found: Error: Package path ./lib/components/CommandBar is not exported from package C:\src\CommandBar\node_modules\@fluentui\react (see exports field in ..read more

Happy 21st December! The chestnuts are roasting, and the snow is falling (somewhere I'm sure). It's that festive time of year again, and with it, a new year is beckoning. We all know that the biggest event of 2020 will be the retiring of the 'classic' user interface in Power Apps and Dynamics 365. To make sure you are ready for this, my gift is an updated version of Smart Buttons that is fully supported on the Unified Interface. It also includes a new smart button 'WebHook' that can be used to call HTTP Triggered Flows. What are Smart Buttons? Smart Buttons are a feature I introduced into th ..read more

..read more

At some point, over the last few months, a change was introduced to the Power Platform CLI such that if you have the ESLint VS Code add-in installed, after using pac pcf init, you may see an error in VS code: 'ComponentFramework' is not defined.eslint(no-undef) This might look something like this in the index.ts file: The reason for this is that the pac pcf init template now includes an .eslintrc.json however, it is configured to use JavasScript rules rather than TypeScript ones. To fix this you simply need to edit the .eslintrc.json  file. Find the extends section and replace the ..read more

As you know, I'm 'super excited'* about the new Power Fx low-code Command Bar buttons (First Look Video) (Ribbon Workbench compared to Power Fx) - especially the ease at which you can update multiple records in a grid. To allow the user to select a number of records on a grid, and then perform an operation on each, in turn, would have taken plenty of pro-code TypeScript/JavaScript before but now can be turned into a simple ForAll expression.  * That one's for you @laskewitz ? The one thing that always gets left out - Error Handling! It's easy to assume that every operation will always suc ..read more

If you have canvas apps that use code components then you will be used to the hard link between the namespace of the code component and the canvas apps that use it. Also, if you have your canvas apps in a solution, then there are now solution dependencies added for the code components used to ensure that they are installed before you import the solution to a target environment. You can read more about code component ALM in the Microsoft docs. How do we swap out components easily? Occasionally, you may need to change the namespace of a control (or perhaps change a property name) but i ..read more

If you are developing code components (PCF) for canvas apps you'll be used to using the 'Get more components' panel. When adding the code-component to the canvas app, occasionally you will receive the somewhat unhelpful error: Couldn't import components  There are no more details provided in the expanded down arrow area: I'm put this here for my future self (who always seems to forget about this issue) and anyone else who comes across this error. The cause is usually because you have a property-set that has the same name as an in-build property or one of your own (e.g. Enabled/Selec ..read more

One of the longest-standing mottos of the Power Platform has been ‘no cliffs’. This somewhat odd phrase has definitely stood the test of time due to its simplicity and its powerful message. That is - you shouldn’t ever find yourself developing solutions using the Power Platforms ‘low-code’ features and suddenly finding that you hit an un-passable ‘cliff’. Instead, there are multiple avenues forwards using various degrees of ‘pro-code’ features. I think the message also hints at being able to start as a small app and grow into a larger enterprise one without hitting cliffs – although this story ..read more