Salesforce Static Resources:
🔍 What Are Static Resources?
Static Resources in Salesforce are files or collections of files that are uploaded and stored in Salesforce so they can be referenced in Visualforce pages, Lightning components, or Apex code.
Supported file types include:
- .css, .js, .zip
- Images: .jpg, .png, .gif, .svg
- Fonts, XML, JSON, and more
🚀 Why Use Static Resources?
- Performance: Store files in Salesforce to reduce server load and avoid external hosting.
- Security: Files are served through Salesforce’s trusted domain.
- Versioning: Easily manage and reference versions of resources.
- Reusability: Use the same resource across multiple pages or components.
📂 Uploading a Static Resource
Follow these steps:
- Navigate to Setup → Static Resources.
- Click New.
- Provide:
- Name: Identifier used in code (e.g., myCSS)
- Cache Control: Choose Public or Private
- Upload File: Choose your .css, .js, image, or .zip file
- Click Save.
💡 Tip: To upload multiple files together, compress them into a .zip file.
📄 Using Static Resources in a Visualforce Page
Visualforce provides a built-in function called {!URLFOR($Resource.resourceName)} to reference static resources.
✅ Example 1: Include a CSS File
Suppose you’ve uploaded a styles.css file as a static resource named myCSS.
html
<apex:page>
<apex:includeScript value=”{!URLFOR($Resource.myCSS)}”/>
<h1 class=”heading”>Welcome to Salesforce!</h1>
</apex:page>
Note: Use <link> tag for CSS:
html
<apex:page>
<link rel=”stylesheet” type=”text/css” href=”{!URLFOR($Resource.myCSS)}”/>
<div class=”container”>Hello Styled Page</div>
</apex:page>
✅ Example 2: Include a JavaScript File
Let’s say you’ve uploaded custom.js as myJS.
html
<apex:page>
<script src=”{!URLFOR($Resource.myJS)}” type=”text/javascript”></script>
<button onclick=”showMessage()”>Click Me</button>
</apex:page>
And in custom.js:
javascript
function showMessage() {
alert(‘Hello from Static Resource!’);
}
✅ Example 3: Displaying an Image
If you uploaded an image (logo.png) as a static resource named companyLogo:
html
<apex:page>
<img src=”{!URLFOR($Resource.companyLogo)}” alt=”Company Logo” />
</apex:page>
✅ Example 4: Referencing Files Inside a Zipped Static Resource
If you uploaded a zip file named myAssets.zip containing a folder structure like:
/myAssets/
css/styles.css
js/scripts.js
img/logo.png
You can reference them using:
html
<apex:page>
<link rel=”stylesheet” type=”text/css” href=”{!URLFOR($Resource.myAssets, ‘css/styles.css’)}”/>
<script src=”{!URLFOR($Resource.myAssets, ‘js/scripts.js’)}” type=”text/javascript”></script>
<img src=”{!URLFOR($Resource.myAssets, ‘img/logo.png’)}” alt=”Logo”/>
</apex:page>
🛡️ Cache Control: Public vs Private
When uploading a static resource, you’ll choose a Cache Control setting:
- Public: Browser will cache the file. Good for stable assets (CSS, logos, etc.).
- Private: No caching in the browser. Use when files change often or are user-specific.
🧪 Bonus: Debugging Tips
- Double-check the resource name matches exactly.
- Use Developer Console → View Page Source to inspect if the resource is correctly loaded.
- Check for CORS errors in browser console when loading JavaScript from external domains.
🎯 Conclusion
Static Resources are essential for building polished and maintainable UI components in Salesforce. Whether it’s styling a Visualforce page with CSS, enhancing interactivity with JavaScript, or embedding media — static resources keep everything centralized and efficient.
Explore them, organize them with folders in .zip files, and integrate them cleanly in your Visualforce pages to enhance the user experience.