Modules: JavaScript Libraries

2024-03-29

To use a JavaScript library in your module, do the following:
  • Acquire the library .js file you want to use.
  • In your module resources directory, create a subdirectory named "web".
  • Inside "web", create a subdirectory with the same name as your module. For example, if your module is named 'helloworld', create the following directory structure:
helloworld └───resources     └───web         └───helloworld

  • Copy the library .js file into your directory structure. For example, if you wish to use a JQuery library, place the library file as shown below:
helloworld └───resources     └───web         └───helloworld                 jquery-2.2.3.min.js

  • For any HTML pages that use the library, create a .view.xml file, adding a "dependencies" section.
  • For example, if you have a page called helloworld.html, then create a file named helloworld.view.xml next to it:
helloworld └───resources     ├───views     │ helloworld.html     │ helloworld.view.xml     └───web         └───helloworld                 jquery-2.2.3.min.js

  • Finally add the following "dependencies" section to the .view.xml file:
<view xmlns="http://labkey.org/data/xml/view" title="Hello, World!"> 
<dependencies>
<dependency path="helloworld/jquery-2.2.3.min.js"></dependency>
</dependencies>
</view>

Note: if you declare dependencies explicitly in the .view.xml file, you don't need to use LABKEY.requiresScript on the HTML page.

Remote Dependencies

In some cases, you can declare your dependency using an URL that points directly to the remote library, instead of copying the library file and distributing it with your module:

<dependency path="https://code.jquery.com/jquery-2.2.3.min.js"></dependency>

Related Topics