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?
