Using JS files in PCF

[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 

[ben-thompson]

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.

[rexkenley]

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

[edhalsim]

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!

[rexkenley]

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.

[edhalsim]

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.

[rexkenley]

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.

[edhalsim]

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

[rexkenley]

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

[edhalsim]

Thanks, that's exactly what I was studying.

I think I finally got it working.  Here's what I did:

1. Created a class in a .tsx file.
2. In updateView, added the following code to render the control:

ReactDOM.render(
    React.createElement(ReactSampleTextBox, this.props)
    , this._container
);

1. 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.