function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sandeesh Phulkar 3Sandeesh Phulkar 3 

How to include external scripts in a Lightning Component/App

Hello,

I wish to include :-
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
extenal library for Google maps in a lightning component.

It doesnt allow me to do so , it gives me the following error:-
Content Security Policy: The page's settings blocked the loading of a resource at http://maps.google.com/maps/api/js?sensor=false ("script-src https://ap1.lightning.force.com https://ssl.gstatic.com chrome-extension: 'unsafe-eval' 'unsafe-inline'").

I tried loading this script asynchronously as well , by creating dynamic <script> tag and loading the src. Still doesnt work.

Kindly let me know how I can get Google Maps to work in a Lightning Component.

Thanks in advance
 
EnreecoEnreeco
I wrote a post about it.
http://enreeco.blogspot.it/2014/10/salesforce-lightning-loading-scripts.html
Use RequireJS to load whatever script you want.
Hope this helps
--
May the Force.com be with you!
Sandeesh Phulkar 3Sandeesh Phulkar 3
Hi ForceLogic,

Thanks for the update.
But unfortunately loading the script through RequireJS also doesnt help.
Gives the same error.

Thanks for the great article you wrote. Read your post and it was very helpful for me to get the Jquery working in Lightning app.

 
EnreecoEnreeco
Sorry I misunderstood your problem.
Actually you have to load any script from a local resource (static resource) and cannot load from outside.
This is a known limitation (and wanted).
 
Sandeesh Phulkar 3Sandeesh Phulkar 3
So does that mean implementing Google Maps as on Today isn't possible in Lightning App?
EnreecoEnreeco
I'm afraid the answer is yes.
For more details: http://www.salesforce.com/us/developer/docs/lightning/lightning.pdf (page 95 "Using JavaScript Libraries"  that states "The framework’s content security policy mandates that external JavaScript libraries must be uploaded to Salesforce static resources. For
more information, see Content Security Policy Overview on page 90.")
Sandeesh Phulkar 3Sandeesh Phulkar 3
Thank you ForceLogic for the details.
Ken KoellnerKen Koellner
Would it be possible to pull the js file down from the URL http://maps.google.com/maps/api/js.  Then put it in a static resource and use it from there?  I'm not sure if the Google side might then break.

I recall using things like jQuery from network URLs when prototyping and then pulling them down and storing them locally in static resources for production.  I don't know if that would work with this library.

-Ken
 
Sandeesh Phulkar 3Sandeesh Phulkar 3
No Ken. This approach doesnt work. I had tried this initially.
It gives an error somehing like:- "document.weite failed on the file."
Thanks
 
SkipSaulsSkipSauls
We're working on a way to provide a whitelist feature for external scripts. Please vote on this or otherwise chime in if you'd like to see one. The basic idea would be to adjust the CSP policy based on the whitelist, controlled by a list similar to Remote Sites (if not the same one).
EnreecoEnreeco
Hi @SkipSauls,
this would be a really important feature for the framework!
Can't wait for it!
--
May the Force.com be with us :)
KMForceKMForce
Visualforce controller had options to set header, so there we could whitelist the external domain from where we want to get js,css. But now I don't see any option since lightning app does not have a controller and components controller does not have any impact on overall page header. It means that currently we can't develop any google map app, google chart. This is really really needed.
Bhupendra yadavBhupendra yadav
Hey Guys,

Did we get the solution for this issue now? OR anybody figured out any workaround to get Google Chart/Map working inside lightning?

Please be posted, I think the feature to include external scripts is going to be the key for the sucess of lightning platform.
 
Prasad KairamkondaPrasad Kairamkonda
Hey Guys found this one.. Haven't tried it out yet.. hope it solves our problem..

https://developer.salesforce.com/blogs/developer-relations/2015/04/creating-salesforce-lightning-map-component.html
Prasad KairamkondaPrasad Kairamkonda
It Works ! But still figuring out how to convert an address into its lattitude and logitude values for dynamic markers.

Never the less, we've got a start into loading maps inside a Salesforce Lightning Component. 

Thanks Christophe Coenraets for your article at http://coenraets.org/blog/2015/04/creating-a-salesforce-lightning-map-component/#comment-1515482

 
Oleg RebenkoOleg Rebenko
Now you can vote for Create external libraries whitelist for Lightning Components Idea 
https://success.salesforce.com/ideaView?id=0873A000000LlVWQA0
Jasveer SinghJasveer Singh
Include Jquery into lightning Component

Go to Setup select Critical Update

Deactivate:  Enable Lightning LockerService Security

and paste below code in developer console


1 Step: Insert into component

<ltng:require scripts="/resource/Jq"  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 Step: Insert into Component

<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
                <img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Step 3: insert into Controller

({
    afterScriptsLoaded : function(component, event, helper) {
        
        },
    
    dropdown:function(component, event, helper)
    {
      //  console.log("1st time");
       //  $.noConflict();
        jQuery("#dropdown1").toggle();
//console.log("2nd time");
    }
    
})

 
Amit SahaiAmit Sahai
Jasveer, this was indeed  very useful !