Using a static resource in VisualForce Page

Hi All,

Happy to see you all again smiley,

When I got requirement to use a static content out side of Salesforce, I was thinking how can I achieve this ???cool Salesforce static resource helped me to achieve this easily.

Let us look at what ,how to create and how can we use static resource?

What is static resources?

How to Create a static resource in Salesforce?

How can I use my static resource in my Visualforce page?

We will go one by one.

What is static resources?

Static resources allows you to upload content that you can reference in a Visualforce page, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.

Using a static resource is preferable to uploading a file to the Documents tab because:

  • You can package a collection of related files into a directory hierarchy and upload that hierarchy as a .zip(If you are using WinZip be sure to install the most recent version. Older versions of WinZip may cause a loss of data.) or .jar archive.
  • You can reference a static resource by name in page markup by using the $Resource global variable instead of hard coding document IDs.

How to Create a static resource in Salesforce?

To create a static resource in Salesforce we need to achieve this by following steps,

1. Go to Setup -> Develop -> Static Resource. There you can able to see list of static resource which are all already in your org. 

2. Click on New button. Now you will redirect to new static resource creation/edit page as shown in below figure.

3. In the Name text box, enter the text that should be used to identify the resource in Visualforce markup. This name can contain only underscores and alphanumeric characters, and must be unique in your organization. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.

4. In the Description text area, give description about static resource it's optional only.

5. In File Input , By using Choose file button select file from your local system drive which you want to include as a static resource.

Note : 

  • A single static resource can be up to 5 MB in size, and an organization can have up to 250 MB of static resources, total. 
  • You can't able to select file from any other storage other than local system drive.

6. Next step is to set cache control to your static resource choose private or public as per your requirements needs,

  • Private specifies that the static resource data cached on the Salesforce server shouldn’t be shared with other users. The static resource is only stored in cache for the current user’s session.
  • Public specifies that the static resource data cached on the Salesforce server be shared with other users in your organization for faster load times.

7. After complete all above steps click on Save button. 

How can I use my static resource in my visualforce page?

We completed with adding resource as a static resource in our Salesforce org. Now let's see how we can include or use static resource in our visualforce page.

To include static resource first decide what type of file you added as a static resource, it's depends on whether you want to reference a stand-alone file, or whether you want to reference a file that is contained in an archive (such as a .zip or .jar file)

  • If you have added a stand-alone file as a static resource, then use $Resource <resource_name> as your value, where <resource_name>  is the name you have specified while creating static resource.For Example : 
    <apex:image url="{!$Resource.Image}" width="100" height="100"/>
    You can also use include script apex tag to include static resource in your Visualforce page
    <apex:includeScript value="{!$Resource.MyJavascriptFile}"/>


  • If you have added zip or jar as a static resource and you want to archive file in that then use the URLFOR Function. First parameter as name you have specified while creating static resource and the path to the desired file within the archive with the second parameter in the URLFOR function. For example:
    <apex:image url="{!URLFOR($Resource.SampleZip,'images/SamplePic.jpg')}" width="100" height="100"/>
    You can also use include script apex tag to include static resource in your Visualforce page
    <apex:includeScript value="{!URLFOR($Resource.JSFile, '/Foldername/subfoldername/filename.js')}"/>
  •  You can use relative paths in files in static resource archives to refer to other content within the archive. 
    For example, in your CSS file, named stylesample.css, you have the following style:
    table { background-image: img/image.gif }

    When you use that CSS in a Visualforce page, you need to make sure the CSS file can find the image. To do that, create an archive (such as a zip file) that includes styles.css and img/image.gif. Make sure that the path structure is preserved in the archive. Then upload the archive file as a static resource named “style_resources”. Then, in your page, add the following component:

    <apex:stylesheet value="{!URLFOR($Resource.style_resources, 'stylesample.css')}"/>

    Since the static resource contains both the style sheet and the image, the relative path in the stylesheet resolves and the image is displayed.

Congrats!  we have successfully looked into using static resource in Visualforce page laugh.

Hope this post used to have a look into static resource in Salesforce..

Let me know in comments whether you have liked it or not. 

Have a good day smiley


Average: 3.9 (9 votes)