Static Resources #inSalesforce

on

Static Resources #inSalesforce

Use static resources to upload content that you want to reference in a Visualforce page, including .zip and .jar files, images, stylesheets, JavaScript, and other files.


Example 1:


Create and Upload a Simple Static Resource

  1. Download the current version of the jQuery JavaScript library from http://jquery.com/download/.
  2. Right-click on the direct link to download the file, rather than opening it in a browser window.
  3. From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then click New.
  4. Enter jQuery for the Name.
  5. Click Choose File, and then choose the jQuery JavaScript file you downloaded previously.
  6. If you see the Cache Control menu, choose Public. This item isn’t visible in all organizations.
  7. Click Save.


Add a Static Resource to a Visualforce Page

Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page. Enter HelloJQuery for the page name.


<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>

Preview to see the output


Example 2:

Create and Upload a Zipped Static Resource

  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.


Add Zipped Static Resources to a Visualforce Page

Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page. Enter jQueryMobileResources for the page name.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!
        URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
    <apex:includeScript value="{! $Resource.jQueryMobile }"/>
    <apex:includeScript value="{!
        URLFOR($Resource.jQueryMobile,'jquery/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, 'jquery/images/icons-png/eye-black.png')}"/>
            <apex:image alt="heart" title="heart"
                url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/heart-black.png')}"/>
            <apex:image alt="cloud" title="cloud"
                url="{!URLFOR($Resource.jQueryMobile, 'jquery/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>

Preview to see the output


Reference:

https://help.salesforce.com/s/articleView?id=sf.pages_static_resources.htm&type=5

https://trailhead.salesforce.com/content/learn/modules/visualforce_fundamentals/visualforce_static_resources

Comments

Post a Comment