You’re offline. This is a read only version of the page.
26
So, I've seen these PCF samples where random HTML elements are being created and populated via javascript by using
Share
ReportmyDiv.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?
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
You can try editing the pcf webpack config file and add the html-loader to handle your html files.
I am trying to do the same thing and not having any luck.
Did you figure it out?
Thanks!
Hi,
Did you get any resolution for implementing PCF using Vue.js.
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
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!
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/
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.
#1
WarrenBelz
87
Most Valuable Professional
#2
mmbr1606
71
Super User 2025 Season 1
#3
Michael E. Gernaey
65
Super User 2025 Season 1
All responses (
Answers (
