How To Setup Bootstrap On Your PCF Project

How many of you already know about PCF (PowerApps Component Framework) control? A framework that lets us (developer) create customize UI to be used in PowerApps. Because we are talking about customized UI and I’m a pure programmer, make use of Bootstrap is always a way to go for me. Bootstrap can help me more focus on the functionality without the need to thinking so hard about designing a beautiful UI. So this blog post will tell you in general how to install Bootstrap on your PCF Project. I get this information after reviewed one of the Ivan Ficko and Diana Birkelbach GitHub repositories that you can find here (shout out to them for their great work!).

Bootstrap got dependencies with JQuery and popper.js. So when you want to use it, you need to run this script:

npm install bootstrap jquery popper.js

After you install it, the next step is to import the bootstrap, Jquery, and popper.js javascript files in our index.ts file. So on top of your index.ts code, you need to place this code:

import 'jquery';
import 'popper.js';
import 'bootstrap';

This is the sample screenshot that I do in my project for your reference:

Snippet code to import jquery, popper.js, and boostrap

After the above part is done, the last part is to import the CSS that you want. To import the CSS file, you need to register the CSS that you want in the resources tag on ControlManifest.Input.xml. Because we already installed the Bootstrap NPM package, then you can found the CSS that you want below code:

...
<resources>
  <code path="index.ts" order="1"/>
  <css path="../node_modules/bootstrap/dist/css/bootstrap.min.css" order="1" />
</resources>
...

If you run your project using command npm run start, you can see the bootstrap already running on your PCF control:

Bootstrap applied when running the PCF project

Summary

When your PCF project needs third-party library (like in this sample are jquery, popper.js, and bootstrap) you need to import it in index.ts to let the WebPack understand that you need those files. But you must understand, the more libraries, it will cost you performance. That’s why the best practice is to load only those functions that you needed to let the packing result smaller + faster.

What do you think?