Answered

How to import js file to custom javascript

(0) Share

Report

Posted on by joeyzy123 Microsoft Employee

Hi all,

I'm working on a powerapp task. My app has a 'Page' with a 'Web Form', it has 'Web Form Step' for sure. And I have some logics in the 'Web Form Step' -> 'Custom JavaScript'.

Now I have an external .js file, which exports some functions I want to import to the 'Custom JavaScript'. I uploaded it to 'Web Files', and named the partial url 'myFileName.js'; I added '<script type="module" src="/myFileName.js"></script>' to 'Web Page' -> 'Content Page' -> 'Content' -> 'Copy (HTML)'.

Then if I added 'import { functionName } from "/myFileName.js";' to 'Web Form Step' -> 'Custom JavaScript', the page will lose all behaviors added by the custom js, so basically the custom js broke down by the 'import' part.

Any suggestion for this?

Categories:

Power Apps portals

I have the same question (0)

All responses (10)

Answers (1)

Christian Leverenz 1,214 on at

Like (0)

Report
Copy link

Link copied!

Hi @joeyzy123 ,

usually, i have a look in browserconsole first, whether there is really a problem. In most cases like this, i see (js) errors in the console and they are usually right.

Do you really need to import the module? I never tried, i always have a plain old js files and use the functions which are in there without any problems.

In order to leave my personal "die hard" zone i tried also importing stuff recently which failed. The browser complaint(ed?), that the imports have to be on top of the file which is of course not possible in inline js.

May be you could as a workaround create another js fiels and import the functions/module there and use it afterwards.

Hope this points in a solution direction,
Christian

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi @joeyzy123

Some of the workarounds which I am aware of without unblocking JS extensions. But for this scenario, you need to unblock the JS extension in advanced settings.

In Portal management:

1. Click Settings> Advanced Settings

2. Under Advanced > settings> System> Administration> System settings

3. Remove JS under file extension attachments

Once done go to the portal studio and sync config and try the web form step.

Hope it helps.
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Was this reply helpful? Yes No
joeyzy123 Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @chleverenz
I have to create such a 'library' file because my custom js is reaching the character limits, I will not be able to add any new logic when it's over 10000.

I checked the browser console as you suggested,:
Uncaught SyntaxError: Cannot use import statement outside a module

So I guess the problem is not just the library .js should be a module, but the place where using 'import' should also be module, while 'custom javascript' is not?

Was this reply helpful? Yes No
joeyzy123 Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @ragavanrajan

I removed the block for .js file, but the browser console still complains about 'Uncaught SyntaxError: Cannot use import statement outside a module'

Was this reply helpful? Yes No
Verified answer

oliver.rodrigues 9,449 Most Valuable Professional on at

Like (3)

Report
Copy link

Link copied!
@joeyzy123 usually when importing JS I simply use:

<script src="/MYJS.js"></script>

I normally add that to the Tracking Code content snippet.. this way it's loaded on every page, but you can also do that at the page level

Was this reply helpful? Yes No
joeyzy123 Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @OliverRodrigues

Thanks! I actually tried this before but got error 'function not defined'. Tried again today and it works 😅, maybe I got some typo.

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

Like (0)

Report
Copy link

Link copied!

How do I upload a large js file to Web Files?

Was this reply helpful? Yes No
oliver.rodrigues 9,449 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

You can change the file size from the System Settings - E-mail Tab @Anonymous

System Settings Email tab - Power Platform | Microsoft Docs

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

Like (0)

Report
Copy link

Link copied!

How does email relate to Web Files?

Was this reply helpful? Yes No
oliver.rodrigues 9,449 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

@Anonymous the notes file size was originally used for D365 e-mail attachment.. and further functionalities in the system, including Portal Web Files inherited that configuration.

So basically it's a legacy configuration

Was this reply helpful? Yes No