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?


Kudo Collector
Kudo Collector



You can try editing the pcf webpack config file and add the html-loader to handle your html files.

Please take a look on what I've done. I'm already using SASS and PCF. you can do it the same with VueJs working with the loaders from webpack.



Helpful resources

PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!


Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Users online (18,716)