Form-based Dataverse Web Resources with React, Typescript and FluentUI - Part 2

A few months ago I posted this article on how to develop form-based HTML WebResources leveraging my npm package @_neronotte/cra-template-dataverse-webresource, and it generated a lot of interactions.

In that article I've shown how to:

1. create a standard React+TS+FluentUI WebResource using my npm package
2. remove the references to ClientGlobalContext.js.aspx
3. update the index.tsx file to accept Xrm and FormContext from the parent form
4. update the local SDK removing dependencies from GlobalContext and adding the LocalFormContext class
5. build and push to Dataverse
6. edit the form js to inject the context into the webresource.

Nothing so much complicated... but quite manual.

Since then, I had the opportunity (or need, see it as you like) to create several WebResources that needed to be embedded into forms and... as usual... when I'm stuck on doing manual stuff 3 times in a row or more, i try to automate it as much as possible.

Let's do it! 🚀

The output of this job is here: this new npm package is a clone of the previous one that addresses automatically steps 2 to 4 of the previous list and provides a few improvements, such as

• css is now managed internally to the .tsx file with FluentUI makeStyles
• css sizes, positions, colors, borders and fonts are handled via FluentUI tokens in order to reflect the standard theme, and designed to fit well in a form section (playing with tokens I've found a lot of interesting stuff... more on this topic in one of the upcoming posts)

• the render() call is done automatically on start when running the webresource in development mode via npm run start

• icons dependency migrated from legacy Fluent 8 icons to new Fluent 9 icons

So... no more manual job needed, you can just create your WebResource with:

npx create-react-app <name> --template @_neronotte/cra-template-dataverse-webresource-form

And you're ready to go!

Conclusions 👏🏻

With this new package WebResource development is streamlined even more than before! Tell me what do you think about it, drop a comment here or on my LinkedIn page.

The source code of the create-react-app template is open source and available on GitHub, feel free to ping me there for issues or new feature requests.

Hope this will be helpful to you as much as it is for me!