cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
fberasategui
Level: Power Up

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?

 

7 REPLIES 7
ScottDurow
Level 8

Re: Load HTML from file inside PCF Component

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.

See https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/react-facep...

Hope this helps
fberasategui
Level: Power Up

Re: Load HTML from file inside PCF Component

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.

ScottDurow
Level 8

Re: Load HTML from file inside PCF Component

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.
fberasategui
Level: Power Up

Re: Load HTML from file inside PCF Component

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.

ScottDurow
Level 8

Re: Load HTML from file inside PCF Component

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. https://developer.microsoft.com/en-us/fabric#/controls/web/dropdown)

 

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! 🤣 https://dayssincelastjavascriptframework.com/

 

 

 

 

fberasategui
Level: Power Up

Re: Load HTML from file inside PCF Component

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!

ScottDurow
Level 8

Re: Load HTML from file inside PCF Component

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!

 

Cheers,

Scott

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 143 members 5,513 guests
Please welcome our newest community members: