Import Resources

To add resources that you want to use in an App UI, you import individual files or ZIP archives by using the import option available when you right-click a resources folder or any artifact, or by dragging the file directly from your local file system onto a folder in the navigator.

You can import resource files to the Resources folder, its subfolders, or any other artifact in the tree view (though not pages). The location you select will determine the scope of the resources you import. The import location is also important to make sure you're importing the resource file where you can access it. For example, it's possible to import an image into the flows folder, but the expected location for an image is an images folder under Resources. Images that are not in an images folder will not appear in the Image Gallery, so you won't be able to apply the image you've imported to a UI component.

To import resources for use in an App UI:

  1. In the App UIs pane, locate the folder or artifact where you want to import the resource file.
  2. Right-click the folder or artifact and choose Import.

    For example, here's a combined screenshot showing the Import option when you right-click the js folder under an extension's global Resources folder (Label 1 in the image) and the js folder under the sampleappui's Resources folder (Label 2):
    Description of resources-right-click-import.png follows
    Description of the illustration resources-right-click-import.png

    Alternatively, drag a file from your local file system onto the folder or artifact in the tree view to open the Import Resources dialog box.

    Note:

    It's not recommended that you actually refer to imported css files in your App UIs at this time, as doing so can produce unpredictable results.
  3. In the Import Resources dialog box, choose the file or archive with the resources you want to import. You can drag the file into the drop target area or click the drop target area to navigate to the file on your local system.
    Description of resources-import-dialog.png follows
    Description of the illustration resources-import-dialog.png

    Optionally, edit the path in the Import location field to create new folders.

  4. Click Import.

    A confirmation appears and your resource file is added at the location you specified.

Tip:

To import an extension's resources into another extension or to share them with a team member, export the extension's resources as a ZIP archive.