The PowerApps Component Framework (PCF) is a powerful framework that gives users the ability to create controls. This capability will give us more flexibility, and extensibility on UI components with our model-driven apps and very recently with canvas apps as well (preview). With Typescript being able to transpile code to native JavaScript, developers with different experiences from other JavaScript frameworks can rejoice.
Typical JavaScript app development usually allows us to have control of the full set of HTML DOM elements, script files, and stylesheets. If you’d like to load an external JavaScript (.js) or CSS (.css) file, you can make a reference to it in the head of your HTML page like below. Other external files from websites and Content Delivery Networks (CDNs) such as Google and Cloudflare are also referenced.
But what if you’re using third-party JavaScript libraries that depend on some external JS or CSS files? Or what if you’re just wanting to reference them because you’re used to this method from your previous experience with other JavaScript Frameworks? Then this is the blog for you.
When adding components into your PCF control, the input parameter container is used in the init() method. This is the main component control that will receive our custom DOM element. We create a custom container using DOM methods, then append our custom container_container with our HTML components to it. Based on our sample index.html from the screenshot above, if we were to add that div element with id=”app”, then we would need to do this:
We apply the same principle when referencing our JS and CSS files into the head element. Based on the index file, we know that external references are just script and link elements with some attributes. We will create our script or link elements with DOM methods. After that, its all about getting the head element and appending our references. This will get loaded when our PCF component gets initiated.
