cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
fberasategui
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);
		}, () => {
			alert("failed");
		});

		// Container appends the HTML structure
		container.appendChild(appDiv);
	}

 

 

 

where ui.html contains the following:

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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?

 

11 REPLIES 11
rexkenley
Kudo Collector
Kudo Collector

@fberasategui 

 

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.

 

https://powerusers.microsoft.com/t5/News-Announcements/Using-SASS-on-your-PCF-Project/ba-p/614222

 

 

Helpful resources

Announcements
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!

secondImage

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)