cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
RevanthReddy
New Member

Using JS files in PCF

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 

15 REPLIES 15
ben-thompson
Solution Sage
Solution Sage

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
rexkenley
Kudo Collector
Kudo Collector

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

 

 

 

 

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:

<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
Kudo Collector
Kudo Collector

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

 

rexkenley
Kudo Collector
Kudo Collector

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:

    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.

 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (4,195)