cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Resolver I
Resolver I

Issue Using external javascript files

Hey guys, I am facing an issue in using external js file, before updating to latest CLI version we where making js file for the external library and importing it by declaring it in ControlManifest, But as Library tag support is removed now, I am facing issue in how to use that javascript file in index.ts.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Skilled Sharer
Skilled Sharer

Re: Issue Using external javascript files

Have you tried using

import "./pathTo/YourFile.js";

on the top of your index.ts?

View solution in original post

8 REPLIES 8
Highlighted
Skilled Sharer
Skilled Sharer

Re: Issue Using external javascript files

Have you tried using

import "./pathTo/YourFile.js";

on the top of your index.ts?

View solution in original post

Highlighted
Power Apps
Power Apps

Re: Issue Using external javascript files

There are two main steps required to use the external librarires. PLease refer to  Angular Flip component and React Facepile component for working samples.

 

1. Include the externl library as dependecy in the packahe.json 

  "dependencies": {
    "@types/node": "^10.12.18",
    "@types/powerapps-component-framework": "1.1.0",
    "angular": "^1.7.8",
    "angular-animate": "^1.7.8",
    "angular-sanitize": "^1.5.5",
    "angular-ui-bootstrap": "^1.3.3",
    "@types/angular": "^1.6.54",
    "@types/angular-ui-bootstrap": "~0.13.47"
  }

 

2. Import the library in the main index.ts file

 

import * as angular from "angular";

hemant 

Highlighted
Resolver I
Resolver I

Re: Issue Using external javascript files

Thanks alot

Highlighted
Resolver I
Resolver I

Re: Issue Using external javascript files

Thank you @HemantG and @DianaBirkelbach 

 

@DianaBirkelbach: We are able to add external JavaScript files using import statement, but the control is giving an error in internet explorer.

 

@HemantG: We are able to add external JavaScript files (jQuery/Angular) into latest PCF control(Updated CLI), but we also have some JavaScript files(Some generic logic implemented in this files/ Bing Maps API URL) created on our own that we want to add into PCF control. Could you please guide us on how to add dependencies for JavaScript’s files which are created by us.

 

Highlighted
Skilled Sharer
Skilled Sharer

Re: Issue Using external javascript files

@sheldoncopper73  As far as I could evaluate, the files imported as import 'yourfile.js' are not transpiled to ES5, so in Internet Explorer will only work if it uses ES5 already or if you transpile the file by yourself, before adding it to project.

import {getProposals} from "./data/Requests"; //this will be transpiled
import "./Core/Dummy.js"; //this is not transpiled

Of course the better way is to import functions or objects, not a file, but maybe that's not allways possible.

Hope it helps Smiley Wink

Highlighted
Microsoft
Microsoft

Re: Issue Using external javascript files

Technically, pcf-scripts under the hood leverages webpack and babel-loader so that javascript files included in your bundle are transpiled.  However, the current settings are defined to target browsers that support ES modules.  Internet Explorer is not explicitly listed as a target and may be why your JS files are not running correctly.

Highlighted
Skilled Sharer
Skilled Sharer

Re: Issue Using external javascript files

@alchin  It's not that we love IE, but since Dynamics 365 still supports IE11, our PCF Controls have to support them too. Do you mean that the PCF controls are generally not supported in IE? That could be a big issue. Or maybe you mean that settings will be changed in a future version?

Or maybe Dynamics 365 won't support IE anymore Smiley Wink, that would be of course the best ?

 

Highlighted
Microsoft
Microsoft

Re: Issue Using external javascript files

Hi Diana,

 

Controls that are built using the tooling should be able to support IE.  If that is not the case, then our team will need to evaluate where the gaps are and fix them.  This may be one such area.

 

Thank you,

a/c

Helpful resources

Announcements
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (8,763)