cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tvd_nzi
Advocate II
Advocate II

How to load external libraries and add them to dom following best practice?

Hello everyone

 

We're using the google places api for an address autocomplete pcf control. My current issue is that when I open the form from an overview the onload function of the script is not getting called and if then only in rare cases. If I reload the form the onload function is hit everytime.

 

 

private appendGoogleApiUrlToDom(context: ComponentFramework.Context<IInputs>) {
        if (!document.getElementById('googleapi')) {
            let googleApiKey = context.parameters.googleapikey.raw;
            let scriptUrl = "https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=" + googleApiKey;

            let scriptNode = document.createElement("script");
            scriptNode.id = "googleapi";
            scriptNode.defer = true;
            scriptNode.setAttribute("type", "text/javascript");
            scriptNode.setAttribute("src", scriptUrl);
            scriptNode.onload = () => {
                debugger
                googleApiLoaded = true;
                context.factory.requestRender();
            }
            document.head.appendChild(scriptNode);
        }
    }

 

 

Is there another possibility to load external javascript libraries like the google api? With the onload function I could workaround the issue of google not being defined but later on the control depends on the googleApiLoaded variable which doesn't get set despite google being available.

Thanks!

4 REPLIES 4
tvd_nzi
Advocate II
Advocate II

@HemantG  Please delete. I relied on a variable from init function which doesn't get populated everytime as context parameters are still null especially not populated when opening a record from an overview. It has nothing to do with loading external libraries.


DianaBirkelbach
Super User
Super User

Hi @tvd_nzi , 

Usually you don't inject script tags in PCF, but import the scripts and use them inside index.ts.

Maybe using something like googleapis npm package (I didn't tried it out): https://www.npmjs.com/package/googleapis

 

I remember about another thread regarding the google maps. Maybe it helps, since the problem seems to be similar: https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/pcf-1022-Error-Control-source-code-declar...


Hope it helps!

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Hi @DianaBirkelbach , thanks for your response. These are third party npm packages which do the script loading dynamically. If these packages don't exist at all how would you load hosted scripts?

DianaBirkelbach
Super User
Super User

Hi @tvd_nzi , 

I've seen an example in the PCF docs: the Map component: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/map-control...

Basically it uses an Iframe. 
Didn't tried this out nether...but maybe it still helps...

 

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

secondImage

Power Apps Community Call

Please join us on Wednesday, October 20th, at 8a PDT. Come and learn from our amazing speakers!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,273)