Microsoft Dynamics 365 : Data exchanging between CRM & React

In todays blog we will see how to retrieve and use CRM data inside an React application, after retrieving this data in React we will be using it to dictate a certain behavior or conditions and then the React app will render something on CRM for the user to see.

To explain this development I will be using a React application that I have developed myself. The React app that I will be using is a weather forecasting application which basically looks like this:

As you can see in the video above this application shows the weather for 7 days if we search by the name of the city we want to check the forecast (if nothing is searched it shows the weather for London, I left that as a default value). In this blog I will not explain how to develop the React app that you see in the video, because that would take a lot of time to explain everything and build it from scratch but I will upload the project to my personal GitHub and you can go there, get the code locally and play around with it to better understand what it does and how it works.

To give a short explanation, this app uses a weather API (Visit: Open Weather API) to retrieve data for 7 days, in the app above there are actually made 2 API calls with every search made by the user:

1. The first API call retrieves the daily weather by passing the city name as a parameter in the API link but along with the daily data retrieved by this call there is also retrieved the latitude & longitude of the city.

  https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}  //you can get a free API key if you create an account

2. The second API call takes the retrieved latitude & longitude as parameters and it returns the weather for the city in those coordinates but this time it doesn’t only return the daily weather like the first call but also the weather for the next 7 days.

  https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}

Then after getting the weather for 7 days, all there is done is the HTML mapping in the app so everything looks well organized as seen in the video.

Now, the app looks finished (ofc the styling could be better) in the functional sense, but I want to put this application in CRM and instead of leaving it like it is , instead I decided for this example to remove the search bar and the search button. That way we can create a text field in CRM and the user can use that field to do the searching in the React app, that way we can connect CRM with React to work together.

So to do that I modified the project to look like below by commenting the Header component (Header component includes: The title & search bar/button, I commented it so you can later see it in GitHub how it was before or if you want to modify it):

After removing the search as seen above, then I added the part of code below which will replace the way we search:

What the code above does is that it retrieves the value the user puts in the field City (logical name: fisoft_cityname), the value get’s interpolated in the useState (this is a React Hook) which is then passed to the API calls and the data gets retrieved and then rendered.

In order to try this, I created a custom entity and in this entity I created the field City (logical name: fisoft_cityname) and in an IFrame below this field I show the React app.

First what we need to do is build and bundle the React app in a single HTML file using Gulp so we can upload it in CRM (check previous blog on how to bundle a React app in a single HTML file, click here). After creating the bundled file we then create the HTML web resource which will contain the code we get form the final bundled file and we upload it in CRM :

After saving the web resource, now we have to modify the main form of the entity so it shows the fields and the React app the way we want it:

If you don’t know how I added the React web resource in the main form then I suggest to click on the link mentioned above, to go read the previous blog made where this part is explained in great detail.

So the final result looks like this :

With this we can say that everything works as desired, now the users can search for the weather in as many cities as they want to. By the way, a little note if you look in the video when we open the ‘7 Day Weather Forecast’ record the City field is empty but the React app shows by default the weather for Tirana, that is happening because in the code above I changed the default value form London to Tirana.

Now that is how you get data from CRM into the React app, but the data can also move the other way from React to CRM. For example the line of code we use above to get the field value is :

  window.parent.Xrm.Page.getAttribute("fisoft_cityname").getValue();

  window.parent.Xrm.Page.getAttribute("field_logical_name").setValue();