Add External Files to Lightning Component (Script, Style & Image)

Hi Folks,

Lightning Components is a hot topic in Salesforce development since its is introduced.

In this post we look into its capability to include external scripts and styles in Lightning Component.

 

Let me separate this in simple sections.

  1. Add your External file as Static Resource

  2. Adding Script file in Lightning Component

  3. Adding Style file in Lightning Component

  4. Adding Image in Lightning Component

 

1) Add your External file as Static Resource

Upload your Javascript/CSS/Image files in Static Resource as below.

1) Upload your required Script file in Static Resource

2) Upload your required CSS file in Static Resource

3) Upload your required Image in Static Resource

 

2) Adding Script file in Lightning Component

In your Lightning component add the below lines to add Script file.

<aura:component implements="force:appHostable">
    <ltng:require scripts="/resource/1438164190000/ScriptFile"/>
</aura:component>

In this above code you should change value of scripts in ltng:require tag.

Copy the link of View file in Static Resource. It should look like follow.

https://ap1.salesforce.com/resource/1439967367000/ScriptFile

Remove the Org instance and copy the remaining and it should look like the follow 

 /resource/1439967367000/ScriptFile

Add this link in ltng:require tag in your Lightning component.

If everything goes well, your Lightning component user interface should look like this.

 

3) Adding Style file in Lightning Component

In your Lightning component add the below lines to add Script file.

<aura:component implements="force:appHostable">
    <ltng:require styles="/resource/1439967482000/CSSFile"/>
</aura:component>

In this above code you should change value of styles in ltng:require tag.

Copy the link of View file in Static Resource. It should look like follow.

https://ap1.salesforce.com/resource/1439967482000/CSSFile

Remove the Org instance and copy the remaining and it should look like the follow 

 /resource/1439967482000/CSSFile

Add this link in ltng:require tag in your Lightning component.

If everything goes fine, you can see the impact of your added CSS file in your user interface.

4) Adding Image in Lightning Component

In your Lightning component add the below lines to add Image.

<img src="/resource/1439974696000/ImageFile"/> 

The user interface should look like follow.

I hope you find this post useful. Hit the rate button to rate this post.

Let me know your thoughts in comments.

Happy Coding smiley

 

Rating: 
Average: 4 (3 votes)