Blog, Development

Let’s build Html WebResources faster and smarter

I wrote the initial post on how to develop Html/JS webresources using modern frameworks almost 2 years ago. A few months back I got an email from my colleague Chris Groh who did a few brilliant recommendations on how to enhance the development process and in this post, I will provide an updated version of the steps and those golden tips.

Initialize

Create the folder for your web application and run the following command to initialize the project:

Yes, no additional installation of the “create-react-app” package is needed.

Open the project folder using VS Code. You should see something like the following:

In order to check that everything is configured the right way run the “npm start” command. Running this command will start “development server” and your browser should show the following app:

Project clean-up

Usage of the template brings a lot of files. As a next step it’s possible to perform the clean-up and remove files that won’t be used:

Also, I perform modifications to files:

index.html:

App.tsx:

index.tsx:

Remove everything from App.css file.

During the run of the “npm start” command, a blank browser window is presented. So now, after all preparations have been completed, it’s possible to switch to the fun part that is the development of the application.

In my project, I plan to rely on Office UI Fabric (or Fluent UI how it is called now) so I run the following command to install the required packages:

Scenario

With a click of the ribbon button, the user is presented with a modal dialog window that contains a text and date input control, initial values for fields are passed from the calling script. By click on the “OK” button located at the bottom of the dialog – the window is closed and user inputs are returned to the calling source. If the “Cancel” button is clicked – nothing happens.

Implementation

I will start from App.tsx – the following

Here is the CSS I put to App.css:

Here is the code of index.tsx:

In order to see the first results, you can run the “npm start” command. In a nutshell, you should see something like presented on the following screenshot:

Build

In the original article, I was changing the webpack.config. That works when you’re the one-man-army. But when one works in a team and it’s possible that your teammate may have a need to apply some changes to your code- this way could go downside really fast. Chris suggested using a custom build script and “rewire” npm package to override settings used in the build process.

Install the “rewire” package using the following command from the terminal:

Create a JS file with the following content and add it to your project (I used ./scripts/custom-build.js) in my case – this file used during the build process overrides the configuration of “chunking” and all files are built in one piece:

Add “homepage” to “package.json” file – that will configure react-scripts to use relative paths during the build process:

Replace standard build commands with the custom that was just added in “package.json”:

So from now, running “npm run build” will build the app that is not shrunk into chunks, and even better – using “npm run build:dev” will build a non-minified version of the code that is helpful during troubleshooting. Here is how the build folder will look like once the build is completed:

There is no need to change anything inside any of the files and the next step is an import of files to the system. The main requirement to that import – files have to be in one folder like it’s shown on the next screenshot:

Once files are imported to the system it’s up to use how to use it – as a resource embedded into the SiteMap or record page or in dialog scenarios. In order to get more clarity regarding the usage of Html WebResources as dialogs you can check my other posts:

Xrm.Navigation.navigateTo – gotchas, tricks and limitations

Development of custom Html/JS Webresources with help of modern frameworks

Cover photo by Christina @ wocintechchat.com on Unsplash

12 Comments

  1. Have you tried “react-app-rewired” npm package? I have not tried “rewired” but felt like you need lot of configuration to start it up.

  2. Thanks for a great job. I have a question. If the autosave is prevented how can I save the new value of the field using javascript?
    I created a javascript Onload event but the record display unsaved form.
    Thanks in advance

  3. Hi Andrew,
    Thanks for the answer. The problem is already solved. But I have another problem. I added Web resources on the contact, account, and lead form. Which is displayed leaflet map and recorded with a marker. Marker is dependent on customer type and I query all records using the Rest API. We have over 100K records for each entity(account, contact, and lead) When I open the form the query needs over 2 minutes to display the map, and when I checked the check box of customer type (for marker) need the closely same time to display on the map.
    My question is how can I query faster and display markers on the HTML web resource map without freezing the CRM form?
    Thanks in advance

    1. Hello,
      I have few questions:
      1. What kind of requests do you use to query records? Sync/Async? Usage of Async approach should not freeze the page so if you use Sync – refactor the code using Async instead.
      2. Do you really need that 100k records for every of entities? I’m not sure what’s customer’s usecase for that scenario…
      Andrew

      1. Hello,
        I use HttpRequest with pagination to query all records with required fields value (full name, contact, street, zip, city telephone, and related account customer type and website ) These fields I need to add popup when the user clicks on the marker it must display with the information. I use the async method.
        The scenario is: When the user opens a contact form there is a Tab for the web resource that displays the open street map. The code queries all contacts with coordinate(lat, long) and adds in search circle (between 5 and 150 km) with different colors of markers depending on customer type.
        From here users can select the records and add them to the marketing list. With 10K record working perfect but when I load on Product system were to exist over 100K records it is working very slow. It needs 3 minutes to load the map. There are checkboxes to select each customer type and for all separate checkboxes.
        What can you advise me to accelerate my program? How fast can I query all records? Is it better to use FetchXML and HttpRequest together?
        Thanks in advance

  4. Hello Andrew,
    Thanks for the answer.
    I use Http request async to retrieve records. (with paging)
    I must query all contact records while I retrieve the coordinate(lat, long) and with calculation select which are in the selected circle will be marked on the map. Users can click the marker and see the information of the records and also can add to the marketing list. Maybe I use the wrong logic? There are checkboxes which are depending on the customer type and when the user checked customer type these are will be displayed on the map.
    The approach is: User can select a contact and search other contacts in a circle(between 5 to 150 km) and these are will be displayed on the map with a marker. When they click marker they can see the information about the record from CRM and if they want to create a marketing list they can add all contacts in a circle to a marketing list and create it. All contacts have a parent account and the account has the field which displays customer type of account with options set. (14 different types)
    I hope I explain understandable. Sorry about my English thanks for your time and help.

    1. Hello Necdet,
      Somehow I missed your question. I believe that the best way to speed up the processing is to avoid “traveling” time that is related to the page-by-page approach.
      The way that I used is the following:
      1. Create an action that receives search parameters and returns a string.
      2. Write a plugin to handle that message and move all the processing to the serverside – querying, filtering, e.t.c.
      3. Build a result and serialize it into JSon format and return it.
      4. Call that action from your form and use the result on the map.
      Thanks,
      Andrew

  5. Thank you for your input!
    This really helped us solve our task, although we had to replace fluentui with another framework, because it doesn’t support React 18 yet.

    1. Hello Yosem,
      I was building the dialog just yesterday and I experienced similar issues with the compatibility of React 18 and FluentUI. I downgraded the version of the react/react-dom to 17.0.2 and everything started to work again.
      I’m glad you found the article helpful.
      Andrew

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.