How to create an optimized React build for Business Central

A while ago I wrote about creating a React front end for Business Central.

In this post I used a fairly simple single web page example where the front end loads the entire React library. Quick and easy but not ideal for production deployment. What we really need is a compiler that will create an optimal build specifically for our app. Like for instance this Tic Tac Toe example.

The first thing you need to address is the fact that the compiler cannot recognize our Microsoft.Dynamics.NAV JavaScript functions. If we tried to compile this:

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady", []);

We will end up with a compiler error like this one:

Line 177:3:  'Microsoft' is not defined  no-undef

We can remedy this by adding a comment line that will tell the compiler to ignore any warnings:

// eslint-disable-next-line
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady", []);

Another thing we need to do is to rename the root div in the public\index.html and in your JavaScript to controlAddIn. That will cause your React components to be attached to the controlAddIn div inside your Control Add-In .

Now we can run the NPM build that will create our optimized production scripts. All the scripts will end up inside the build\static\js folder.

There are two things you can do to add these js files to your extension. You can simply copy them to your extension folder or you can host them elsewhere. For my dev projects I just copy them to my extension. I’m sure that with some clever build scripts this can be easier but that is a story for another day.

Once the scripts are in my extension I can call them from my Control Add-In. Obviously you can do the same with the css files.

Scripts =
   'Scripts/2.2694cafb.chunk.js',
   'Scripts/main.09a9684e.chunk.js';
 StartupScript = 'Scripts/runtime-main.0f79e1cd.js';
 StyleSheets =
   'CSS/2.c0fa1c84.chunk.css',
   'CSS/main.34de6062.chunk.css';

Any React app always has a runtime-main js file. This is the JavaScipt that goes on your main index.html and contains the code that will call all other scripts. Remember, you can’t host the startupscript, that needs to be present inside your extension.

Photo by Markus Spiske on Unsplash

On Harley’s, chaos, and Business Central

I am always struck by the similarity between Harley Davidson and Navision. Both are fantastic products with devoted cult followings.

Both also have had trouble lately having to adapt to the new World. Navision struggled in a world that became increasingly cloud and mobile oriented. Harley Davidson struggles with increasing environmental regulations and an aging demographic. Both recently also released amazing new products. Microsoft Released Business Central. Harley Davidson released the LiveWire. Both also risk alienating their cult following with their latest releases.

I’m told that on twisting the throttle of a LiveWire it slips quietly into hyperspace miraculously reappearing a 100 miles down the road carrying a rider with a stupid grin on her face feeling that somehow she glimpsed the very fabric of reality. If it is anywhere near this description then I want one.

I will go one step further though and claim that the LiveWire is the only viable mode of transport for the future. we must all buy one or we won’t be able to move from a to b at all. Obviously all older Harleys must be traded in immediately. Cars, buses, airplanes, and rockets will all be obsolete. Sorry Elon.

Sound familiar much? I often get this same idea when people talk about Business Central. The truth though is that we have never been more spoiled for choice. Gas or electric, cloud or on premise. Customized or not customized, old or new. Just as a Harley Knucklehead is still a serviceable motorcycle NAV2009 is still a working product. Both just require a lot more maintenance, parts are hard to get, and there are less people who can work on them. But that does not make them unusable.

Let’s talk about accessories. Harley Davidson’s accessory catalogue has it’s own gravity field and it is orbited by moons made of discarded wish lists. Same thing with Business Central right? I dare not descend into the depths of Azure without leaving a trail of pebbles so I can find my way back. Making matters worse is the fact that by using modern development techniques you can interface Business Central with everything. Where do you start?

What we end up with is complete chaos. Where once we had one ERP that did everything we now have so many choices to make many people don’t know where to begin.

The only way out of this mess is to bring order into it ourselves. We need to do this by going back to our roots. Our customer and their business processes. Let’s start with the basics. We need to add value for our customers by efficient automation and reduction of technical debt.

Don’t just build and don’t just buy Azure or PowerApps or anything else because it is hot or you just had a slick presentation on TechDays. You need to think critically. Before you build or buy something you need to think about if there are enough developers for that technology, security, ease of use, and how hard it will be to keep it up to date. Remember that it is not just Business Central that is updated automatically, everything is. Every API in the world faces breaking changes and what you develop now will be broken at some point in the life cycle of your product.

The purpose of this story is not to scare you into doing nothing. The purpose of this story is to think critically and give your customers something that is of lasting value. Something that is safe, secure, and easy to use. Something that is kept up to date as a matter of course.

Don’t get me wrong, I think Business Central, Azure, Power Apps, and the LiveWire are cool and, more than that, that they can add value to your customer. But so can other things. We cannot rely on the old gods of Danish sensibility to bring order to our world. We need to do that ourselves.

Photo by Harley-Davidson on Unsplash

Building a React front end in Business Central

Why on earth would you want to do that?

That, honestly, still is one of my reactions when I work on this project. Fair warning to you, dear reader, this is very much still a work in progress. What I am going to share in this blog post will hopefully help someone to realize the power of React front ends and help that someone get started. Don’t expect a glib demo style bit of code though, I am just going to try to inflict my learning curve on you. Or at the very least help someone to get started with React.

So why React? Mostly because I want to be able to create better looking and more interactive user interfaces than the standard page lets me. Don’t get me wrong, I think the way we define pages in Business Central is genius and it has been for the past 40 years. There are some cases however where it just falls short. In the past few years there have been enough of those that I started to build Control Add-Ins with JavaScript. React is just a logical progression of that. I’ll let someone else explain what React is.

ReactJS is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. It’s used for handling view layer for web and mobile apps. React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.

React allows developers to create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in application. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC. Source.

In my opinion this says it all. “specifically for single page applications”, “web applications which can change data, without reloading the page”, and “fast, scalable, and simple” just screams Control Add-In to me. Microsoft itself uses React in its new UI Fabric framework. I expect us to see a lot more of that in the near future.

How to get started? Before making it as far as building an extension there are some steps you need to take first. If you are completely new to HTML, CSS, and/or JavaScript I highly recommend doing the codecademy courses first. To get started with React follow the add React to a website and the tutorial instructions.

In this blog post I won’t go into the building of a Control Add-In and its initial setup. If you are interested there is a ton of stuff out there on Google. Hat tip to Vjeko and Arend-Jan for posting stuff that helped me. And to a ton of more or less anonymous Stack Overflow posters. Where would we be right?

The nitty gritty

This is by no means a comprehensive How To. I will just describe the interaction between React and Business Central. If you want to know more just get in touch or check the GitHub project.

First thing I did was to create two VS Code projects, one for my extension, one for my React project. In my React project I added Node.js so I can use JSX. JSX is an easier way to create HTML code in JavaScript. With it you can simply write HTML in JavaScript. JavaScript code will be placed in parentheses.

JSX, and with it the second VS Code project, is completely optional. I just prefer using it. The only requirement is to have Node.js installed on your computer. To add JSX to your React project go to your project folder in the terminal, and paste these two commands (source):

Step 1: Run npm init -y
Step 2: Run npm install babel-cli@6 babel-preset-react-app@3

You start the compiler from the VS Code terminal. I find it useful to build straight to the Scripts folder of my extension:

npx babel --watch src --out-dir "~path to my extensions~\reactpages\React Pages\Objects\Scripts" --presets react-app/prod

The first thing i create in my extension is a Control Add-In on a page. Mine looks like this:

 controladdin ReactPageControlAddinRED
{
    Scripts =
        'https://unpkg.com/react@16/umd/react.development.js',
        'https://unpkg.com/react-dom@16/umd/react-dom.development.js',
        'Objects/Scripts/reactPageFunction.js';
    StartupScript = 'Objects/Scripts/reactPageStart.js';

    StyleSheets = 'Objects/Css/reactPage.css';

    HorizontalStretch = true;
    HorizontalShrink = true;
    MinimumWidth = 250;

    procedure InitControls(FieldList: JsonArray; Data: JsonArray; PageActions: JsonArray);
    procedure ValidationResult(FieldKey: Integer; Data: JsonArray; LastError: Text);
    event ControlReady();
    event ValidateField(FieldKey: Integer; Data: JsonArray);
    event HandleAction(Data: JsonArray; PageAction: JsonObject);
    event UpdateRecord(Data: JsonArray);
} 

From top to bottom there are some things I want to draw you attention to.

The first two scripts are needed to make React work. Please don’t use these for production. When deploying, replace “development.js” with “production.min.js”.

My reactPageFunction.js contains my React classes. The startup script just calls the reactPageFuntion.js. The reason for doing is is to be able to host the JavaScript elsewhere. It is not possible to host the startup script elsewhere so this is my solution for that problem.

My procedures are used to move data from my page to my JavaScript. events work the other way. On this particular page I send a FieldList with its data and an ActionList. React will display the fields and actions I define in the JSON arrays. The React code to do this looks like this:

window.InitControls = function(fieldList, data, actions) {
  ReactDOM.render(
    <FieldList
      fieldList={fieldList}
      data = {data}
      actions = {actions}
    />,
    document.querySelector('#controlAddIn'),
  )
}

From top to bottom this event creates a function that will render my React component. It renders the FieldList class that I have created earlier and appends it to the Control Add-In div that the Business Central page created for us.

The FieldList class has a state in which I load the three JSON arrays. this state is what we manipulate and what ultimately determines what React shows on the screen.

class FieldList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: Object.values(this.props.fieldList),
      data: Object.values(this.props.data),
      actions: Object.values(this.props.actions),
    }
  }

If I want to validate the content of a field in React I call the ValidateField event of my Control Add-In which validates the field and sends the validated data back to React.

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ValidateField", [e.target.dataset.id, newData])

In a bit of typical React magic I added a listener for the ValidationResult procedure inside the componentDidMount function. In this function I call the setState to update the state of my React class. That is what renders the changes on the page. The fun thing about React is that while the underlying Business Central page is validating my React component will remain responsive. I can even start typing in another field and everything will work perfectly!

componentDidMount(){
  window.ValidationResult = (fieldkey, data, lastError) => {
    let newData = Object.values(data);
    this.setState({data: newData});
    let fields = [...this.state.fields];
    if (lastError)
    {
      fields[fieldkey].errorMessage = lastError;
    } else {
      fields[fieldkey].validated = true;
      fields[fieldkey].errorMessage = null;
    }
    this.setState({ fields : fields });
  }
}

In the calling and handling of the validation I also set the validated boolean of the field to false and then true. This allows me to display a nice loading image on my HTML form while Business Central is validating the field. Same for the error message, when there is an error in validating the field React will display an error message based on the state of the React Class. Finally to display the fields on the React Component I call the fieldsForm which renders everything into a form.

I won’t go into the details on how to make a React form work. In this blog I wanted to focus on the integration of React with Business Central. If you want to know more about React forms I suggest reading this. Some quick highlights though.

 fields.map((val, idx) => { }

This loops through the fields array.

 { fields[idx].validate && fields[idx].validated ?  [some new div]  : null } 

The question mark in JavaScript is a ternary operator. This line is basically an if statement, you could write it like this. Null in this case means don’t display anything.

if (fields[i].validate && fields[idx].validated) {
  [some new div]
} else {
  null
}

Add a little CSS magic and the result is this:

Annotation 2019-10-22 214647

This is of course a very very brief description of what I made. You can find the full project on GitHub.

Some final thoughts. First, there are people who are working on extensions that will allow you to create really nice UI elements in Business Central without mucking about with JavaScript. If you are interested in this please send me a message and I will get you in touch with them.

Second, and blindingly obvious, I am not a React developer (yet). I am only learning and sharing what I learned. If you have anything to add please create a pull request on GitHub. I welcome collaboration.

Third, as I mentioned before, this is a work in progress. I will share more when I learn more.

Fourth, it is of course entirely possible to create a React frontend outside of Business Central using the APIs. Or even to call the APIs from inside a Control Add-In. That will be a new blogpost. Stay tuned!

Photo by Greg Rakozy on Unsplash

Using HTML inside ForNAV reports

Earlier this week I was conducting a Reports ForNAV training in Bremen. As I was showing my students ForNAV multilanguage labels with HTML formatting we started talking about the other features that ForNAV has regarding HTML. My students suggested that it would be useful if users could write their own HTML code, save it in a blob field and then display it in a report. That is perfectly possible! In this blog post I use a Dynamics 365 Business Central Cloud ForNAV report with a per tenant extension but this will work with an On Prem Extension or plain old C/Side just as well. So, how does HTML work in a ForNAV report?

A while ago I was working with another ForNAV customer who wanted a flag for every item on a catalogue report so customers could see the origin of that item. We ended up with a simple ForNAV text box with this source expression:

Annotation 2019-10-17 205301

That results in a report that looks like this:

Annotation 2019-10-17 205451

So that is fun right? No messing about with saving images anywhere, just instant prettyness in our report. But we wanted something a bit more intricate, something we can use across multiple reports. Yes I know ForNAV has a template function. Please indulge my love of coding.

First thing I did was to create an extension with three objects, a table with the blob fields, a page to edit the blobs, and a standard ForNAV sales invoice. You can find the extension on my github page. I won’t go into detail here as it is pretty standard stuff.

I then used an online HTML editor to create a simple report footer text. I wrapped that in the HTML doctype labels and saved it in my new HTML blob table. Please note the %1 text I use as a placeholder for my company name. Yes, I could have created a nice ReactJS WYSIWYG HTML editor on my page but I really wanted to get this blog post out. Maybe later.

<p style="text-align: center;"><span style="background-color: #00ff00;">We at %1 do so enjoy your custom</span>. <strong>Please</strong> come back and spend <span style="color: #ff0000;">more</span> cash.</p>

Next step is to get this blob field and use it as a source expression in ForNAV. To do that I first added the record in the Records property of the report. To do this open the properties of the ForNAV report and drill down into the Records property and add the tables you want to get data from.

Annotation 2019-10-17 210857

The next step is to get the record from Business Central. For that we write some JavaScript code in the ForNAV OnPreReport trigger.

HTMLBlobRED.Get(1);
HTMLBlobRED.CalcFields('HTML');

decodeBase64 = function(s) {
var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
for(i=0;i<64;i++){e[A.charAt(i)]=i;}
for(x=0;x<L;x++){
c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
}
return r;
};

The decodeBase64 function is needed because in Business Central Cloud I get the content of a blob field as a base64 string.  In On Prem situations this is not needed.

Finally I created a new text field in a footer with this source expression:

decodeBase64(HTMLBlobRED.HTML).replace('%1', CompanyInformation.Name);

What this does is it decodes the base64 string in my blob field and in the resulting string it replaces the %1 placeholder with the CompanyInformation.Name field which is part of the dataset of this report.

The result is this:

Annotation 2019-10-17 213021

Some final thoughts. In this example I used a new ForNAV report that is part of my extension. That is not strictly necessary. The records property in a ForNAV report can access all installed extension tables without the need for dependencies. I just wanted a complete stand alone example set so I chose not to use the phenomenal ForNAV Report Pack.

Full disclosure, I do work for ForNAV as a freelance trainer/consultant. They have not encouraged nor paid me to write this blog. I write about products and technology that I love working with and I love working with and wholeheartedly endorse ForNAV.

Two more ways to break your extension

I realize I have been remiss in sharing with you my continued experiences with creating extensions for our Hybrid NAV 2018 database. This is mostly because I have been busy doing exactly that, building extensions. Mostly it goes very well. Sometimes it does not, usually because we mess something up.

Recently we ran in to two problems, both of which can be fixed in the same way.

As I said before, most of our problems arise from us creating extensions in a heavily modified NAV2018 database. This is a so called hybrid system where we have both C/Side modifications and extensions. It is not something we particularly like but it is something we, and many others, have to live with. This problem arose in us moving tables from C/Side to extensions.

In doing this we ran into a situation where an object was removed that an installed extension depended on. In another situation an object was added in C/Side that had the same type and ID that already existed in an installed extension. Normally this will just result in errors when you try to run these objects. However, if all your service tiers are down they won’t start up again so there is no possible way to remove either objects or extension. The only possible way to start the service tier is to uninstall the extension from SQL.

DISCLAIMER, do not attempt to remove records in SQL without first making a back-up! If you are not sure of what your are doing please ask someone who does!

Fortunately for us there is a table in SQL that holds the information on installed extensions. It is called ”NAV App Installed App” and you can access it from SQL Server Management Studio. It is also the only NAV App table that you can remove records from. Any changes to the other NAV App tables will result in you having to restore a backup. Be warned.

After removing the records for the offending extensions we managed to start our service tiers, remove or add the C/Side objects and reinstall said extensions. No data from said extensions was lost as they were just uninstalled.

I hope this helps you in creating your own extensions. Please share your own extension stories, I’d like to read them.