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 Force.com, 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. At this writing it’s jQuery 3.1.0.
    If the link doesn’t work, or if you want to make sure you’re downloading the very latest version, go to http://jquery.com/download/ and download the latest version available there.
    Note

    Note

    Right-click on the direct link to download the file, rather than opening it in a browser window.

  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 the standard Salesforce page header and sidebar elements, and 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 Force.com.

  1. Download the current version of the jQuery Mobile JavaScript library, in the ZIP format. At this writing it’s jQuery Mobile 1.4.5.
    If the link doesn’t work, or if you want to make sure you’re downloading the very latest version, go to http://jquerymobile.com/download/ and download the latest version of the ZIP file available there.
  2. From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then click New.
  3. Enter jQueryMobile for the Name.
  4. Click Choose File, and then choose the jQuery Mobile ZIP file you downloaded previously.
    Creating a zipped static resource
  5. If you see the Cache Control menu, choose Public.
    This item isn’t visible in all organizations.
  6. Click Save.
    Note

    Note

    If the jQuery Mobile ZIP file is larger than 5 MB, edit the zip file to remove the /demo/ directory and its contents, and upload the smaller zip archive.

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. Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page. Enter jQueryMobileResources for the page name.
  2. In the editor, replace any markup with the following.
    <apex:page showHeader="false" sidebar="false" standardStylesheets="false">
        
         <!-- Add static resources to page's <head> -->
        <apex:stylesheet value="{! 
            URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.css') }"/>
        <apex:includeScript value="{! $Resource.jQuery }"/>
        <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>
  3. 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.

Tell Me More...

Static resources are often the best way to include design and script assets in your Force.com apps, and there are a multitude of ways to combine these assets with your Visualforce pages.

If you liked putting together a few static resources for jQuery and jQuery Mobile, you’ll love our pre-packaged collections of static resources. Salesforce Mobile Packs let you build web and hybrid apps that integrate with the Salesforce Platform using industry standard web technologies like HTML5, CSS3 and JavaScript, and popular frameworks like jQuery Mobile, AngularJS and Backbone.js.

Share Time Estimate