The samples below will get you started using the JavaScript API to create enhanced HTML pages and visualizations of data

Other JavaScript API Samples

Show a QueryWebPart

Displays a query in the home/ProjectX folder. The containerFilter property broadens the scope of the query to pull data from all folders on the site.

<div id='queryDiv1'/>
<script type="text/javascript">
var qwp1 = new LABKEY.QueryWebPart({
renderTo: 'queryDiv1',
title: 'Some Query',
schemaName: 'someSchema',
queryName: 'someQuery',
containerPath: 'home/ProjectX',
containerFilter: LABKEY.Query.containerFilter.allFolders,
buttonBarPosition: 'top',
maxRows: 25

Files Web Part - Named File Set

Displays the named file set 'store1' as a Files web part.

<div id="fileDiv"></div>

<script type="text/javascript">

// Displays the named file set 'store1'.
var wp1 = new LABKEY.WebPart({
title: 'File Store #1',
partName: 'Files',
partConfig: {fileSet: 'store1'},
renderTo: 'fileDiv'


Inserting a Wiki Web Part

Note that the Web Part Configuration Properties covers the configuration properties that can be set for various types of web parts inserted into a wiki page.

<div id='myDiv'>
<script type="text/javascript">
var webPart = new LABKEY.WebPart({partName: 'Wiki',
renderTo: 'myDiv',
partConfig: {name: 'home'}

Retrieving the Rows in a List

This script retrieves all the rows in a user-created list named "People." Please see LABKEY.Query.selectRows for detailed information on the parameters used in this script.

<script type="text/javascript">
function onFailure(errorInfo, options, responseObj)
if(errorInfo && errorInfo.exception)
alert("Failure: " + errorInfo.exception);
alert("Failure: " + responseObj.statusText);

function onSuccess(data)
alert("Success! " + data.rowCount + " rows returned.");

schemaName: 'lists',
queryName: 'People',
columns: ['Name', 'Age'],
success: onSuccess,
error: onFailure,

The success and failure callbacks defined in this example illustrate how you might manage the fact that JavaScript requests to LabKey server use AJAX and are asynchronous. You don't get results immediately upon calling a function, but instead at some point in the future, and at that point the success or failure callbacks are run. If you would like to ensure a certain behavior waits for completion, you could place it inside the success callback function as in this example:

var someValue = 'Test value'; 
schemaName: 'lists',
queryName: 'People',
columns: ['Name', 'Age'],
success: function (data)
alert("Success! " + data.rowCount + " rows returned and value is " + someValue);
failure: onFailure

Displaying a Grid

Update Issues via the API

The following form is filled out to Resolve an issue to the Completed state.

The HTML form to submit the update:

<form id='my-form' name="my-form" onsubmit='dosubmit();return false;'>
Issue Tracker Name: <input name='issueDefName' type="text" value='moreissues'><br>
Issue ID: <input name='issueId' type="number" value="116"><br>
Resolution: <input name='resolution' type="text" value='Completed'><br>
action: <input name='action' type="text" value='org.labkey.issue.IssuesController$ResolveAction'><br>
comment: <input name='comment' type="text" value='this is the comment'><br>
title: <input name='title' type="text" value='this is the title'><br>
priority: <input name='priority' type="text" value='3'><br>
related: <input name='related' type="text" value=''><br>
notifyList: <input name='NotifyList' type="text" value=''><br>
containerId: <input name='containerId' type="text" value='long-container-id-string-thingy'><br>
<input type="submit">

The JS API Function:

<script type='text/javascript'> 
function dosubmit() {
var f = document.getElementById('my-form');
url: LABKEY.ActionURL.buildURL('issues', 'resolve.view'),
form: f,
success: function (data) {
console.log("success", data);
failure: function (data) {
console.log("failure", data);


Was this content helpful?

Log in or register an account to provide feedback

expand all collapse all