Let’s try Dataverse DevTools to easily create/update WebResource customizations!

Lately, I’m still preparing my presentation for Reactor Indonesia with the topic “Membangun Solusi Low-Code Dengan Power Platform” and when I’m stumbled to create the WebResource, I remembered about Dataverse DevTools by Danish Naglekar that already being installed in my VS Code for so long since he published the tool but I had never tried it. Looking at the GitHub page it’s already being evolved and makes me want to try it 🤣 (sorry Danish took it so long!). Without further ado, let’s begin!

The Tools

You need the below software installed before you begin:

• Visual Code
• Node.js

Open your Visual Code > go to the Gear icon > Extensions > search “Dataverse DevTools” > Install the extension:

Install Dataverse DevTools

Create Dataverse Connection

Once you have installed it, you will have the Dataverse Icon in your VS Code and you can go to the next steps:

Create a new connection to your Dataverse Environment

To connect to your dev environment, you need to add a new connection > paste your organization URL (for instance https://yourcrmurl.crm5.dynamics.com) > then it will come out the new dialog on top of your VS Code to select how to log in > for this demonstration, I’ll choose Username & Password > input your username > input your password > named the connection > select the type of the environment (suppose you always choose Dev. But I know some people directly update to other instances type 🤣) and you are ready to go!

Prepare The Project Source Code

The one thing that I loved about this project is that the extension will help us to create a TypeScript project with very easy steps (for those who don’t know, TypeScript is a strict syntactical superset of JavaScript and adds optional static typing to the language). You only need to prepare the folder that you want to work on (set the directory in vs code) > make sure your Dataverse connection is on (go to Dataverse DevTools icon and make sure your connection is the GREEN ICON – DON’T FORGET TO CHECK THIS) > go to Explorer tab > right click and choose “Create Dataverse TS Project“:

Create the Project

Once you click that, it will ask the template that you want to be generated > choose WebPack > it will ask the namespace (THIS IS IMPORTANT WHEN YOU WANT TO REGISTER THE FUNCTION):

Named the namespace

After you give the namespace name, it will automatically run the “npm install” command and you just need to wait until it finishes.

Project structures

Let’s Begin The Customization!

To begin the customization, I’ll generate the typings which is one of the features of this project. The typings in short are the definition of the form. So IntelliSense will automatically understand what you want to type when you create the customization later.
Go to the Dataverse DevTools icon >on the Entities tab you can find the entity that you want to be generated > right click on the entity and select “Generate Typing” > select the directory which in this case I’ll put it in “typings” folder:

Generate the typing of your form

Go to your Explorer tab > in the typings folder will have the generated file:

Sample generated typing

Next, in the terminal, you can run “npm run build” > select the src folder and right click here > click “Add Dataverse TS File” > it will open a dialog to give the name of the file and you are ready to develop the customization!

Demo time

Once your customization is done, you need to run “npm run build” which will generate the js files in the “WebResources/scripts” folder:

Generated the JS file

The tool will automatically create 2 webpack.config (dev and prod). If you want the JavaScript without minification so you can debug easily, you can run “npm run build-dev“. Else you can run “npm run build” which will minified the js:

To publish the file individually, you can choose your js file (in this case tmy_order.js) > right click > you will have two options which you can upload to the existing WebResource or you want to create a new WebResource. For this demo, I will choose the Upload & Publish Web Resource > select “Upload as new web resource” > select the solution that you want > enter the web resource display name > enter your web resource unique name (without prefix). Once you did that the tool will publish the web resource and will create “dvdt.linker.xml” where you can see the information of the javascript you created:

Your JS information

So, next time you got changes. You only need to run “npm run build” > then right-click on the WebReources/script/[your-js].js > Upload & Publish Web Resource:

Update your JS file if got changes

To consume this Javascript in your Dataverse Model-Driven-Apps form, you need to go to your Form > On the Events click “+ Event Handler” > select the javascript library and fill in the function name as below ([namespace].[classname].[functionname]):

Registering the Event on your form

Last part, if you have multiple JS files that you want to be updated > go to the Dataverse DevTools > on the Web Resources tab/pane >click Smart Match (light bulb icon)> You can just click “Upload All Linked“:

Deploy Multiple JS in one shot 🙂

Happy CRM-ing!

Advertisement