Wednesday, March 22, 2017

Using Office UI Fabric JS in SPFx

SPFx and Office UI Fabric JS not playing nice

I recently started digging into SPFx web parts in a more serious way than the "hello-world" level web parts we did so far during the learning period of this great new platform for SharePoint add-ins.

My web part had some requirements that prevented me from using react in any way, but at the same time I had a requirement to use Office UI Fabric Components.

I was using KnockOut to render my UI, and naturally, I turned to OFfice UI Fabric JS and their great components.

Only then I discovered that the fabric.components.css had a version conflict with the SPFx and its built in react version of components, and they would mess each other's layout.

Buttons would not be aligned properly, drop downs from react would not open at all, popups and panels would look strange and almost every control I used had some deformity to it.

CSS conflict issues

I reported it to the SPFx, and they published a great article of explaining the issue in great detail, but basically there is nothing much that can be done since CSS is mostly global and there is no good way to scope it without the possibility of conflicts (I've had a very long discussion on this topic with our product dev manager, the great Kevin Vieira, as well, I was not convinced with any of the solutions we came up with).

Solution: renamed prefix

The only way I could think would allow us to use office ui fabric js without worrying that other versions or other vendors could interfere was to rename the fabric into our own unique name.

Meaning, changing the ms-class prefix into something else, like kw-class, and also changing the JS global fabric object to something like kwfabric.

Now, that seemed to be a lot of work to do, plus you will have to host your own version somewhere and won't be able to use the Microsoft CDNs directly.

So, I've decided we will host these files for everyone to use on our own apps.kwizcom.com server, and will generate the files for you with your own prefix on the fly, so you won't have to do it manually.

You are all welcome to use this to generate your own css/js files, or use them directly from our CDN. Our CDN is hosted in Azure and geo-replicated so it should have pretty goo response times, but KWizcom takes no responsibility if you want to us it.

By the way, since I am hosting the files on our servers, I was able to also fix quite a few bugs in the office ui fabric js script file, so our version might be a bit different than the one hosted by Microsoft.

So, here is how you use our version of fabric, assuming your chosen prefix is "kw" (you should use your own unique prefix):
* note: I limited the prefix to 4 letters max.

In SPFx project:

SPComponentLoader.loadCss(`https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/css/fabric.css?prefix=kw`);

SPComponentLoader.loadCss(`https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/css/fabric.components.css?prefix=kw`);

SPComponentLoader.loadScript(`https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/js/fabric.js?prefix=kw`, {globalExportsName:'kwfabric'});

In HTML:

<link href="https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/css/fabric.css?prefix=kw" rel="stylesheet" type="text/css"></link>

<link href="https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/css/fabric.components.css?prefix=kw" rel="stylesheet" type="text/css"></link>

<script src="https://apps.kwizcom.com/libs/office-ui-fabric-js/1.4.0/js/fabric.js?prefix=kw" type="text/javascript"></script>

You will use them with your provided prefix, for example: instead of ms-Button, use kw-Button and in JavaScript instead of fabric, use the kwfabric object.

Updates: