Accessing Resource Files from a WebVI

You can include CSS, JavaScript, images, and other types of files in your web application and access them from a WebVI.

Note For information about including JavaScript files for a JavaScript Library Interface document, refer to the Integrating a JavaScript File Into a Web Application help topic.
Before you begin, create or open a web application project.
  1. In the Project Files tab, right-click the application document file (.gcomp) and select Import files.
    Note You must save the application document before you can import files.
  2. Navigate to the file you want to add and click Open.
  3. Open the WebVI you want to reference the resource file from, and choose one of the following options based on file type.
    Type of fileHow to reference the file from your WebVI
    CSS

    In the <head></head> tags, add the following lines of code: 

    <link rel="stylesheet" href="my-style-sheet.css" />

    Refer to the Mozilla Developer Network for more information on using CSS to customize the appearance of your UI.

    JavaScript

    In the <head></head> tags, add the following lines of code: 

    <script src="my-script.js"></script>

    Refer to the Mozilla Developer Network for more information on using JavaScript to add custom functionality to your web application.

    Image
    • For images that are hosted externally, complete the following steps:
      1. Switch to the panel and add a URL Image control to the panel.
      2. On the Item tab, enter the path to your image file in the Source URL field.
    • For images on disk, complete the following steps:
      1. Import the image into your application document file (.gcomp).
      2. Switch to the panel and drag the image from the Project Files tab onto the Panel.