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
});
</script>
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'
});
wp1.render();
</script>
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'}
});
webPart.render();
</script>
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);
else
alert("Failure: " + responseObj.statusText);
}
function onSuccess(data)
{
alert("Success! " + data.rowCount + " rows returned.");
}
LABKEY.Query.selectRows({
schemaName: 'lists',
queryName: 'People',
columns: ['Name', 'Age'],
success: onSuccess,
error: onFailure,
});
</script>
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';
LABKEY.Query.selectRows({
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
