Skip to main content

Use Static Resources

Learning Objectives

After completing this unit, you’ll be able to:

  • Explain what static resources are and why to use them.
  • Explain the difference between individual and zipped static resources.
  • Create and upload a static resource.
  • Add static resources to a Visualforce page.

Introduction to Static Resources 

Static resources allow you to upload content that you can reference in a Visualforce page. Resources can be archives (such as .zip and .jar files), images, stylesheets, JavaScript, and other files.

Static resources are managed and distributed by Lightning Platform, which acts as a content distribution network (CDN) for the files. Caching and distribution are handled automatically.

Static resources are referenced using the $Resource global variable, which can be used directly by Visualforce, or used as a parameter to functions such as URLFOR().

Create and Upload a Simple Static Resource 

Create a simple, stand-alone static resource for independent static assets.

When your static asset is not related to other assets—that is, not part of a set of similar assets such as a group of icons—it’s easiest to create a stand-alone static resource.

  1. Download the current version of the jQuery JavaScript library from http://jquery.com/download/. 
  2. From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then click New.
  3. Enter jQuery for the Name.
  4. Click Choose File, and then choose the jQuery JavaScript file you downloaded previously. Creating a simple static resource
  5. If you see the Cache Control menu, choose Public. This item isn’t visible in all organizations.
  6. Click Save.

You now have a static resource version of jQuery that you can use in your Visualforce pages by referencing it in an expression, such as {! $Resource.jQuery }. What’s really nice is that you can edit the static resource and update it to, say, jQuery 3.1.2, without having to change any of your Visualforce pages. The static resource reference handles the details.

Add a Static Resource to a Visualforce Page 

Use the $Resource global variable and dot notation to reference a stand-alone static resource.

  1. Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page. Enter HelloJQuery for the page name.
  2. In the editor, replace any markup with the following.
    <apex:page>
    <!-- Add the static resource to page's <head> -->
    <apex:includeScript value="{!$Resource.jQuery }"/>
    <!-- A short bit of jQuery to test it's there -->
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function() {
            jQuery("#message").html("Hello from jQuery!");
        });
    </script>
    <!-- Where the jQuery message will appear -->
    <h1 id="message"></h1>
</apex:page>
  3. Click Preview to open a preview of your page that you can look at while you make changes. A new window should open, showing a short message from jQuery.

This page doesn’t do much except illustrate how to include a JavaScript resource on your Visualforce page. The key is the use of the $Resource global variable. Use dot notation to combine it with the name of the resource in an <apex:includeScript> (for JavaScript files), <apex:stylesheet> (for CSS stylesheets), or <apex:image> (for graphics files) tag to add it to your page.

Create and Upload a Zipped Static Resource 

Create zipped static resources to group together related files that are usually updated together.

When your static assets are a set of related items—for example, a set of application icons, or a complex JavaScript library—it’s best to create a zipped static resource. Create a zip file containing all of the elements you want to group together, and upload only the one zip file to Lightning Platform.

  1. Download the current version of the jQuery Mobile JavaScript library, in the ZIP format, from http://jquerymobile.com/download/.
  2. Open the zip file and remove the /demos/ directory and its contents.
  3. Compress the folder and rename it jquery.zip.
  4. From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then click New.
  5. Enter jQueryMobile for the Name.
  6. Click Choose File, and then choose the jquery.zip file. 
  7. If you see the Cache Control menu, choose Public. This item isn’t visible in all organizations.
  8. Click Save.

You now have a static resource version of jQuery Mobile that you can use in your Visualforce pages. You’ll learn how to reference individual files inside the zipped static resource next.

Add Zipped Static Resources to a Visualforce Page

Use the $Resource global variable and the URLFOR() function to reference items within a zipped static resource.

The URLFOR() function can combine a reference to a zipped static resource and a relative path to an item within it to create a URL that can be used with Visualforce components that reference static assets. For example, URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') returns a URL to a specific graphic asset within the zipped static resource, which can be used by the <apex:image> component. You can construct similar URLs for JavaScript and stylesheet files for the <apex:includeScript> and <apex:stylesheet> components.

  1. If you haven’t already downloaded the current version of the jQuery Mobile JavaScript library, follow the directions in the Create and Upload a Zipped Static Resource section to do so. Add it as a static resource.
  2. Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page. Enter jQueryMobileResources for the page name.

In the editor, replace any markup with the following. 

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
  <!-- Add static resource to page’s <head> -->
  <apex:stylesheet value="{!
    URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
  <apex:includeScript value="{!$Resource.jQueryMobile }"/>
  <apex:includeScript value="{!
    URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.js')}"/>
  <div style="margin-left: auto; margin-right: auto; width: 50%">
    <!-- Display images directly referenced in a static resource -->
    <h3>Images</h3>
    <p>A hidden message:
      <apex:image alt="eye" title="eye"
        url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/>
      <apex:image alt="heart" title="heart"
        url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}"/>
      <apex:image alt="cloud" title="cloud"
        url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}"/>
    </p>
  <!-- Display images referenced by CSS styles, all from a static resource. -->
  <h3>Background Images on Buttons</h3>
  <button class="ui-btn ui-shadow ui-corner-all
    ui-btn-icon-left ui-icon-action">action</button>
  <button class="ui-btn ui-shadow ui-corner-all
    ui-btn-icon-left ui-icon-star">star</button>
  </div>
</apex:page>
Note

This example uses the jQuery Mobile Javascript library version 1.4.5. If you are using a newer version, update the version number in lines 4 and 7 of your code.

Click Preview to open a preview of your page that you can look at while you make changes. A new window opens and displays a few images from the jQuery Mobile static resource.

jQuery buttons via static resources

For simplicity, this page shows only how to reference zipped static resources on your Visualforce page. See the additional resources if you’d like to learn more about how to combine Visualforce and JavaScript libraries like jQuery Mobile, for example.

Resources 

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback