21 Work With Resource Files

As you develop an App UI, you can import and export static resource files for use in your App UI's pages.

Resources are typically files that you import to support or add functionality to pages in your App UI. For example, when you want to use an image in a page, you can import the image as a resource into an images folder, then use an Image component on a page to reference the imported image.

By default, your extension includes a global Resources folder (shown on the left in the image) to store custom components, images, external JavaScript files, and other resource files that can be used by all App UIs in the extension. In addition, each App UI contains a Resources folder (shown on the right) to store resources that can be used in that App UI's pages alone.

Description of the illustration appui-resources.png

To reiterate, global resources are accessible to all App UIs in the extension, but a particular's App UI's resources are available only to that App UI.

Here are the folders created by default for the following types of resource files:

Folder	Description
actions	Location for custom actions that you might define in your extension. Right-click the folder to either create or import a custom action.
components	Location for custom web components that are installed to an extension. Web components are reusable pieces of UI code that you can embed as custom HTML elements (by clicking Get Components under Custom in the Components palette or the Components tab in the Navigator). Note: Importing web components to the resources/components folder or creating them there makes them a part of your extension. Because these components are not cached, you're likely to run into performance issues when they are downloaded each time you reload the Page Designer for preview, or at runtime when you publish an update for your App UI. As a best practice then, it helps to publish your components to a CDN (Content Delivery Network) or an external location that your browser can cache requests from. This is useful especially if you have multiple App UIs that use the same components. Talk to your administrator for site-specific information on how to publish these components externally.
css	Location for stylesheets linked from pages in an App UI when you want to add custom styling to page elements.
images	Default location for custom images that you want to add to an App UI's pages.
js	Location for external JavaScript files that you want to use in an App UI's pages.