Static Assets Guide

Overview

This document provides an overview of all static assets used in the Optave integration project, including their purpose, usage, and how to modify them.

Static assets are stored in the Salesforce static resources and include:

• Icons
• Images
• JavaScript libraries
• CSS frameworks

JavaScript Libraries

Resource Name	Description	Usage
Chart.js	Charting library	Used for data visualization in insights component
OptaveJavascriptSDK.js	Optave SDK	Core functionality for Optave integration

How to Add or Update Static Resources

1. Prepare your file: Ensure your file meets these requirements:

   • Icons: 24x24px, transparent PNG
   • Images: Optimized for web (compressed)
   • JS libraries: Minified for production

2. Upload through Salesforce Setup:

   • Navigate to Setup > Custom Code > Static Resources
   • Click "New" button
   • Upload your file and provide a name
   • Set cache control (usually "Public")

3. Via SFDX Command:

   sfdx force:staticresource:create -n ResourceName -p path/to/file.png -d force-app/main/default/staticresources/

4. Update resource metadata:

   • Create a corresponding .resource-meta.xml file
   • Example:

     <?xml version="1.0" encoding="UTF-8"?>
     <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
         <cacheControl>Private</cacheControl>
         <contentType>image/png</contentType>
     </StaticResource>

Referencing Static Resources in Components

In LWC Components

// Import the static resource
import myIcon from '@salesforce/resourceUrl/myIcon';

// In your JS file
export default class MyComponent extends LightningElement {
    iconUrl = myIcon;
}

<!-- In your HTML template -->
<img src={iconUrl} alt="My Icon">