Static Resources

> Customization > Developer Resources > Static Resources

Static resources are external files that can be uploaded and used in JSP Pages.

About Static Resources

In a web application, programmers need to refer to resources such as static images, stylesheets and external JavaScripts to build powerful applications. This functionality allows developers and designers to package and upload the following resources and invoke them programmatically in Pages:

• Images (.gif, .jpg, etc.)
• Stylesheets (.css)
• JavaScript files (.js)
• Compressed files (.zip, .tar)

How it Works

Add Static Resource files to the platform, which can then be used to build Pages.

Detailed instructions are provided here to Add, View, Edit, Replace or Delete Static Resources. See Usage for sample HTML code you can copy and use to apply these resources.

Working with Static Resources

View Static Resources

1. Click > Customization > Developer Resources > Static Resources

   Static Resources are displayed in a View.

2. Use standard Searching and Filtering operations to determine which records are displayed.
3. The following columns are displayed in the view:

Name

Name of the resource, used by developers to reference this resource in a page

Name can contain only alphanumeric characters and underscores: (a-z, A-Z, 0-9, and "_")

Description

Description of the resource

File Size

Size of the resource

Displayed after a resource is loaded

MIME Type

Type of the resource (GIF, PDF, JPG, CSS, etc.)

Displayed after a resource is loaded

Add a Static Resource File

1. Click > Customization > Developer Resources > Static Resources
2. Click the [New Resource] button to add a new resource. Complete the following information for each resource that is added:

   Name

   Name of the resource

   File

   Click the [Browse] button to navigate to the file

   Description

   Enter a simple description of the file

3. Click [Save]

   The following information is displayed as a record of the upload:

   File Size

   Size of the resource

   MIME Type

   The type of the resource

Note: If the MIME type is incorrect for the resource, the file may not be handled properly when sent to a user's browser. In that case, the platform must be configured to recognize it. Learn more: Adding MIME Types

View, Edit, Replace or Delete a Static Resource File

1. Click > Customization > Developer Resources > Static Resources
2. Click the name of the resource
3. Choose from any of the following:

   Edit

   Edit the Name or Description of the resource

   Replace

   Replace the resource (load a new resource in place of the current resource)

   Delete

   Delete the resource

Accessing a JavaScript Resource from an Object Form

It is possible to use JavaScript resource in an Object form.

Note: For more information about API related permissions, see REST API:staticResource Resource.

To do so:

1. Upload the JavaScript file as a static resource.

2. In your browser, use the REST Static Resource API to list the available resources:

   https://{yourDomain}/networking/rest/staticResource

3. Copy the resource ID for the JavaScript file (a long string of numbers and letters):

   <platform>

   <staticResource>

   <id>{resourceID}</id>

   <name>HelpButton_js</name>

   <resource_file_name>HelpButton.js</resource_file_name>

   ...

4. Put the following code into your Form Script or Field Script, and insert the resource ID:

   $.get("https://{yourDomain}/networking/rest/staticResource/{resourceID}?getFile=true",

   function( data ) {

   eval(data);

   yourFunction();

   });

That code uses the REST API to get the contents of the file in the data string. That string is passed to an anonymous function that does an eval to make function definitions in the file available to the current script. Finally, the code calls the function defined in the file.

Important: When you have a new version of the JavaScript file to upload, go to the existing static resource and click [Replace]. That operation preserves the record ID, so references to the file get the updated version.

Accessing Static Resources in a JSP Page

The examples below use the custom tag library in Pages to access static resource files. The examples assume that the "Acme" company is building the application.

Note that the following code is required, and is used to include this library in custom pages:

<%@ taglib prefix="sr" uri="/staticresources" %>

Image

Here, the resource has been loaded under the name "Autumn_Leaves". The actual file might be falling_leaves.jpg or autumn_colors.gif, but the resource name is sufficient to access it.

<%@ taglib prefix="sr" uri="/staticresources" %>
<html>
<head>
</head>
<body>
    <img src='<sr:resource name="Autumn_Leaves"/>'/>
</body>
</html>

StyleSheet

In this example, a CSS stylesheet was uploaded under the name "AcmeStyles". The FormHeader style it defines is then used in the body of the page.

<%@ taglib prefix="sr" uri="/staticresources" %>
<html>
<head>
    <link href='<sr:resource name="AcmeStyles"/>' rel="stylesheet" type="text/css" />
</head>
<body>
    <span class="FormHeader">Place Your Order:</span>
</body>
</html>

External Java Script

In this example, a JavaScript file was uploaded under the name "functions". This example calls the verifyOrder function it contains.

<%@ taglib prefix="sr" uri="/staticresources" %>
<html>
<head>
    <script src='<sr:resource name="functions"/>'></script>
</head>
<body>
    <form name='mainform'>
        <input type='text' name='input' />
        <input type='button' onclick='javascript:verifyOrder();' />
    </form>
</body>
</html>

Compressed Files

In this example, an archive file (.zip, .tar, or .jar) containing all the files above was uploaded under the name "AcmeResources". The 'path' parameter must be specified in that case, to identify the file contained in that resource.

<%@ taglib prefix="sr" uri="/staticresources" %>
<html>
<head>
    <link href='<sr:resource name="AcmeResources" path="acmestyles.css"/>' 
          rel="stylesheet" type="text/css" />
    <script src='<sr:resource name="functions"/>'></script>
</head>
<body>
    <span class="FormHeader">Place Your Order:</span>
    <img src='<sr:resource name="AcmeResources" path="image1.gif"/>'/>
    <img src='<sr:resource name="AcmeResources" path="/img/image2.gif"/>'/>
    <form name='mainform'>
        <input type='text' name='inp'/>
        <input type='button' onclick='javascript:verifyOrder();'/>
    </form>
</body>
</html>