This content originally appeared on DEV Community and was authored by Riccardo Gregori
In a world that moves towards Custom Pages and PCFs, there are still scenarios in which a old, simple, custom WebResource is the best choice.
Diana Birkelbach wrote a really interesting post about this topic describing pros and cons of both, and also describing how to mix them together to enrich the user experience.
It's 2024, and the best way to create custom WebResources for Dataverse is to leverage React, Typescript and FluentUI, for many reasons:
- Continuity with Dataverse internal UI engine
- Continuity with PCF development
- UI automatically styled like Dataverse
- Automatic support for themes
- Strongly-typing & compile time errors
... and many more.
There are a lot of interesting articles and videos online on how to create WebResources leveraging those techs, and I don't like to repeat stuff that's already available (I'm lazy, you know it), thus you will find a few references at the end of this article. Today I'm gonna show you how I like to work on this stuff.
Let's start
Prerequisites
To work with react + Typescript + FluentUI, be sure to have the latest version of Node.js and NPM installed on your local machine. This doc shows you how to setup both.
Initial folder setup
First of all, I like to start setting up the folder that will contain all my WebResources (images, html pages, javascripts, and so on). For the sake of this tutorial I will store everything under c:\sources\test\WebResourcesMyWay. I like to do it via PACX:
pacx webresources init
It initializes my WebResources folder with the following structure:
The folder names are self explanatory. They will reflect how WRs will be named within my Dataverse environment.
A custom home page
Assume we would like to create a Dataverse WebResource that acts as home page for users accessing one of our model driven apps.
Let's setup our React + Typescript + FluentUI project. On the root folder, let's type:
npx create-react-app home --template @_neronotte/cra-template-dataverse-webresource
This command will create our WebResource project folder called home with the following structure:
It generates a React+Typescript App project with:
- sass to handle CSS on steroids.
- @types/xrm to manage Dataverse client API using strongly typed classes.
-
ClientGlobalContext.js.aspx automatically referenced in the
index.htmlpage (you can remove it manually if your web resource needs to be opened within a form). - Webpack already configured to generate a single JS file without chunks.
- A ready-to-use local stub for Dataverse client API that can be used to test the WebResource locally, simulating server calls (under the
src/sdkfolder).
There are a few manual operations to complete before starting, that are described in the generated README.md file.
I need to:
- Change the value of the title tag of the
./public/index.htmlpage to provide a meaningful title for the webresource. - in the
config-overrides.jsfile, replace<output path>with../ava_/pages/home(where I want my WebResource to be saved). - in the
package.jsonfile, replace<output path>with../ava_/pages/home. - If needed, in the same
./public/index.htmlpage change the relative url ofClientGlobalContext.js.aspxpage to match our project structure. In my case, the compiled React app will be placed intoava_/pages/homefolder, thus the defaultClientGlobalContext.js.aspxpath works fine.
Once done, everything's ready for our WR to be compiled and run. Just type:
cd home
npm run build
And you'll see that the current content of the WR is compiled and placed in the ava_/pages/home folder.
Now, if you type:
npm run start
The WR starts in a new browser window.
You can now change the contents of the WR starting from App.tsx, and Node will recompile on the fly and reflect the changes in the browser window.
You are now ready to go, happy pro-code development!
References
- @_neronotte/cra-template-dataverse-webresource
- The LinkedIn post that shows a first use of @_neronotte/cra-template-dataverse-webresource
- This is a tutorial on React App Rewired, that seems to be the easiest way to generate build that can "work" in a Dataverse environment.
- Tutorial on how to create custom webresources from scratch it shows how to properly modify webpack.config.js
This content originally appeared on DEV Community and was authored by Riccardo Gregori
Riccardo Gregori | Sciencx (2024-07-06T20:36:27+00:00) Dataverse Web Resources with React, Typescript and FluentUI (_neronotte’s way). Retrieved from https://www.scien.cx/2024/07/06/dataverse-web-resources-with-react-typescript-and-fluentui-_neronottes-way/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.