I'm trying to include an external JS file in my PCF component. But it's giving me an error.
In the Microsoft documents, they showed that a .js file can be used instead of .ts file
How can I resolve this?
See the replies at https://powerusers.microsoft.com/t5/Power-Apps-Component-Framework/Unable-to-load-external-JS-files/...
You need to rewrite your Javascript and move it to within the index.ts typescript file or create a separate typescript library and call it from / import it into the index.ts file.
Separate Javascript files will not work because a PCF component is a typescript file that is converted to javascript as the PCF component is built and unless you javascript is referenced within the index.ts file it will be ignored.
Please take a look at my repository on how you can include js files. I basically just treat the index.ts as a "wrapper container" and don't write any additional ts files. You can pretty much take your control and plug it into another "powerapps like framework" if you use my methodology. If you have any questions, please feel free to ask.
Starter kit: https://github.com/rexkenley/pcf-react
Pcf Html Editor: https://github.com/rexkenley/d365MultipleLinesHTML
If you want to use ts, just rename your .js files to .ts. It's that easy.
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
Hi,
I think you're doing exactly what I want to do - include a JavaScript component (in my case a text editor, e.g.: editor.js) that contains a bunch of support files into a PCF "wrapper" component. I wasn't clear looking at your links exactly what your approach was so would you please elaborate? Thanks!
Pretty much the same principle as in this article.
https://medium.com/docler-engineering/applying-solid-to-react-ca6d1ff926a4
Most pcf examples have everything in index.ts. By following the SOLID principle, I have the following
- ui component
- pcf wrapper
- data converters
Each "part" does one and only 1 thing. By following solid, it is easy for me to test it in frameworks like storybook. You can say I am using the "lego" approach.
I'm trying to understand what you did. It looks to me like pcf-react is a "skeleton" which you used to create your d365MultipleLinesHTML component. Is this correct?
I followed the directions on the pcf-react readme, but when I tried an npm build it told me:
Class constructor name in control source code does not match with constructor name defined in ControlManifest.Input.xml
My manifest file has:
Class constructor name in control source code does not match with constructor name defined in ControlManifest.Input.xml
What is the name of your class in index.ts? It should be SamplePCF for it to work.
If you have a github project, I can take a look at it when I can.
Thanks I really appreciate the help. If we can get this working I'll buy you a Starbucks card.
The repo is at: https://github.com/edhalsim/SamplePCF
Right now it builds, but then says "can't load control" when it runs. I assume that's because I don't have any HTML to render (I'm not even sure where to put it).
My goal is to wrap the CK editor 4 along with a plug-in. The structure is like this:
ckeditor
- plugins
- skins
ckeditor.js
config.js
styles.js
etc.
To use it on a "normal" web site I would do the following:
<div id="editor">
<p>This is the editor content.</p>
</div>
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>
I'm not sure how to do this in your framework. Normally I would do something like:
this.container.setAttribute("id", "editor");
Please take a look at this https://github.com/rexkenley/d365MultipleLinesHTML
I think that is what you need. You have to use the react ckeditor.
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
Thanks, that's exactly what I was studying.
I think I finally got it working. Here's what I did:
ReactDOM.render(
React.createElement(ReactSampleTextBox, this.props)
, this._container
);
render() {
return (
// <input id='inputText' value={this.state.value} onChange={this.handleChange} />
<div className="App">
<h2>Using CKEditor 4 in React</h2>
<CKEditor
initData={this.state.value}
onInstanceReady={ () => {
alert( 'Editor is ready!' );
} }
/>
</div>
);
}
This at least gets the editor to load when I run it locally. I still have to work out copying the data bidirectionally, plus adding a plug-in. Thanks again for the help.
The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.
This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.