Using JS files in PCF

(0) Share

Report

Posted on by RevanthReddy

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?

@HemantG

Categories:

Power Apps Pro Dev & ISV

js.png

I have the same question (0)

All responses (15)

Answers (0)

Ben Thompson 1,400 on at

Like (1)

Report

Re: Using JS files in PCF

See the replies at https://powerusers.microsoft.com/t5/Power-Apps-Component-Framework/Unable-to-load-external-JS-files/td-p/450868

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.

Was this reply helpful? Yes No
rexkenley 203 on at

Like (1)

Report

Re: Using JS files in PCF

RevanthReddy

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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Re: Using JS files in PCF

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!

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report

Re: Using JS files in PCF

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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Re: Using JS files in PCF

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:
<control namespace="xxx" constructor="SamplePCF" version="0.0.1" display-name-key="SamplePCF" description-key="SamplePCF description" control-type="standard" >

Your d365MultipleLinesHTML uses the TinyMCE editor. I'm wanting to create a similar component to be used on a PowerShell Canvas app. that uses CKEditor 4 along with a plug-in by Loopindex. Any help you can provide will be greatly appreciated as I'm slowly climbing the relatively steep learning curve. Thanks.

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report

Re: Using JS files in PCF

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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
Re: Using JS files in PCF

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");

Was this reply helpful? Yes No
rexkenley 203 on at

Like (2)

Report

Re: Using JS files in PCF

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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
Re: Using JS files in PCF

Thanks, that's exactly what I was studying.

I think I finally got it working. Here's what I did:
Created a class in a .tsx file.
In updateView, added the following code to render the control:
ReactDOM.render( React.createElement(ReactSampleTextBox, this.props) , this._container );
In the tsx file, added a render method as follows:
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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Re: Using JS files in PCF

Of course I spoke too soon. The "solution" I showed loads the CKEditor from the CDN, NOT locally. To do that I think I need to set the editorUrl on the React component like this:
editorUrl='/ckeditor/ckeditor.js'
But I don't know how to bundle all the required files. I tried doing:
const ckeditor = require("ckeditor/ckeditor");
and then a bunch of: require("ckeditor/plugins/...")
But it just tells me it can't find those files. I have installed ckeditor so it exists in node_modules. I get:
Module not found: Error: Can't resolve 'ckeditor/plugins/clipboard' in 'C:\Users\111723\source\repos\PCF-ReactSample\PCFReactSample'.
I could try taking the approach in d365MultipleLinesHTML, but I'm not clear on what
const tinyEditor = React.createRef()
and
const TinyEditor = React.forwardRef
are doing.

Was this reply helpful? Yes No