Showing results for 
Search instead for 
Did you mean: 
Frequent Visitor

Load HTML from file inside PCF Component

So, I've seen these PCF samples where random HTML elements are being created and populated via javascript by using




myDiv.innerHtml = "<some html inside a string/>";




Instead of that, what I intend to do is to load the HTML from an actual HTML file declared as a resource in my control's manifest.


This is what I've tried:




public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
		let appDiv: HTMLDivElement = document.createElement('div');

		context.resources.getResource("ui.html", data =>{
			appDiv.innerHTML = atob(data);
		}, () => {

		// Container appends the HTML structure




where ui.html contains the following:




<label>this is the actual UI</label>




and is declared in ControlManifest.Input.xml as follows:




  <code path="index.ts" order="1"/>
  <html path="ui.html" order="2"/>




however, when debugging via "npm run start", I get a null value for "data".


What's the correct way to use proper HTML files inside PCF components?



Hi! Rather than loading HTML like this, I would suggest using jsx or tsx files with React. These files compile markup similar to html into your component and allow you to add logic and styles to them dynamically.


Hope this helps

Yeah. Sorry, no. Thanks, but no, thanks.


There's no way I can be bothered with React. Honestly I don't see what value people see in it.

React code is extremely verbose, TSX syntax is horrendous, and I lose the ability to separate logic from presentation. 

Coming from years of WPF, then Angular, then VueJS, honestly React has zero value for me.

Fair enough! Do consider that you might be making things hard for yourself if you want to create extensions that look like the first party apps.

PowerApps itself is written in React with the office ui fabric.

That's fine. But then again, Microsoft has infinite budget and infinite manpower. I have no one in my team with React knowledge, I have no React knowledge myself, and I have no chances of hiring anyone with React knowledge due to budget limitations. Also, the look and feel of a web UI is determined by CSS, I don't see how my choice of JS framework will affect my ability to make my controls look "native" on CDS.

With respect to the UI components - I was referring to the dynamic nature of UI components. CSS is just half the story. For instance, dropdowns with autosuggest popups, data grids with resizable columns and virtual scrolling etc. office ui fabric does all this for you - you only need to concentrate on the logic behind your UI. (e.g.


Your point about separating out logic from the UI is a really good one. I always use the MVVM pattern - combining Mobx with React. That way you make your ViewModels unit testable without the UI concerns.


You seem dead-set against React,  I'm not going to try and change your mind! The great thing about web development is that there are so many libraries and patterns to choose from - or maybe that's the problem here! 🤣





Hmm.... Looking at the Office UI Fabric, it's kinda compelling. I might get myself a crash course on React but not yet. What I need right now is to be able to "embed" a quick and dirty HTML + VueJS UI into a PCF component. 


I have debugged a little bit and I figured out the getResource() function *might* be stubbed out in the local sandbox environment. I'll go ahead and pack the solution and install it into a CDS instance and come back with feeback on that.


Anyways, you've just opened my mind a little bit, which is a hell of an achievement.

Thank you!

Lots of the Xrm.* is stubbed in the test harness - so you might be in luck!


You are welcome - let me know how you get on!






Did you get any resolution for implementing PCF using Vue.js. 

Frequent Visitor

I am trying to do the same thing and not having any luck.

Did you figure it out?


Helpful resources

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Carousel_PP_768x460_Wave2 (1).png

2022 Release Wave 2 Plan

Power Platform release plan for the 2022 release wave 2 describes all new features releasing from October 2022 through March 2023.

365 EduCon 768x460.png

Microsoft 365 EduCon

Join us for two optional days of workshops and a 3-day conference, you can choose from over 130 sessions in multiple tracks and 25 workshops.

Users online (3,148)