Custom buttons can add specialized actions to your grids. For details on adding a custom button bar, see
Custom Button Bars.
By having a custom button invoke a JavaScript action, you can perform more complex actions, including bulk update of all selected rows. In this example, we use the LABKEY.Query API to update several columns of a list. As an example, custom buttons could be used in a dashboard for managing the training needs of a set of technicians when new equipment was delivered to a lab.
You must have "Developer" access on your server to create buttons that invoke JavaScript.
Example Code for Custom Button Bar
This example creates a pair of buttons to request retraining, then record when that training has been completed.
You can retrofit this button code to fit other tables and needs, mainly using search/replace on the schema and field names.
<tables xmlns="http://labkey.org/data/xml">
<table tableName="Technicians" tableDbType="NOT_IN_DB">
<columns>
<column columnName="Key">
<isUserEditable>false</isUserEditable>
</column>
<column columnName="RequestRetraining">
<columnTitle>Retraining Requested</columnTitle>
<formatString>yyyy-MM-dd HH:mm</formatString>
<conditionalFormats>
<conditionalFormat>
<filters>
<filter operator="isnonblank" value="true"/>
</filters>
<textColor>B22222</textColor>
<backgroundColor>FFDAB9</backgroundColor>
</conditionalFormat>
</conditionalFormats>
</column>
<column columnName="TrainingCompleted">
<formatString>DATE</formatString>
</column>
</columns>
<buttonBarOptions position="both" includeStandardButtons="true">
<item text="Needs Retraining" requiresSelection="true">
<onClick>
var checked = dataRegion.getChecked();
var sql = 'SELECT Key FROM lists.Technicians WHERE Key IN (';
var separator = '';
for (var i = 0; i < checked.length; i++) {
sql += separator + checked[i];
separator = ', ';
}
sql += ')';
LABKEY.Query.executeSql({schemaName: 'lists', sql: sql, success: function(data) {
var updateRows = [];
for (var j = 0; j < data.rows.length; j++) {
updateRows.push({Key: data.rows[j].Key, requestRetraining: new Date(), trainingCompleted: '' });
}
LABKEY.Query.updateRows({ schemaName: 'lists', queryName: 'Technicians', rows: updateRows, success: function() { location.reload(); }});
}});
</onClick>
</item>
<item text="Training Completed" requiresSelection="true">
<onClick>
var checked = dataRegion.getChecked();
var sql = 'SELECT Key FROM lists.Technicians WHERE Key IN (';
var separator = '';
for (var i = 0; i < checked.length; i++) {
sql += separator + checked[i];
separator = ', ';
}
sql += ')';
LABKEY.Query.executeSql({schemaName: 'lists', sql: sql, success: function(data) {
var updateRows = [];
for (var j = 0; j < data.rows.length; j++) {
updateRows.push({Key: data.rows[j].Key, requestRetraining: '', trainingCompleted: new Date().toDateString() });
}
LABKEY.Query.updateRows({ schemaName: 'lists', queryName: 'Technicians', rows: updateRows, success: function() { location.reload(); }});
}});
</onClick>
</item>
</buttonBarOptions>
</table>
</tables>
Set Up the Demo (Optional)
To install this example locally, follow these steps:
- Download the following list archive file, but do not unzip it: Technicians.lists.zip
- Navigate to, or create, a folder where (1) you have administrator access and (2) where it is appropriate for you to do testing work. A tutorial folder is a good option.
- In that folder, select > Manage Lists.
- In the Available List grid, if you already have a "Technicians" list, either choose a different location or confirm that you can overwrite the list with this demo.
- Click Import List Archive.
- Click Choose File and select the archive file you downloaded.
- Click Import List Archive.
- The list Technicians has been added to the folder.
Next add the example JavaScript to the XML Metadata for this list:
- Select > Go To Module > Query.
- Click lists to open the schema, then Technicians.
- Click Edit Metadata, then Edit Source.
- Paste the example button code above onto the XML Metadata tab.
- Click Save & Finish.
Your list now includes the new buttons. Select one or more rows to activate them. To see them in action, first select all rows, then click
Needs Retraining. You'll see all rows updated with the current date and time, with alert highlighting.
Next, select 2 of the three rows, simulating a scenario where technicians have a training day, but one is out sick. Click
Training Completed. Now you see the alert was removed for the technicians trained, and you can see at a glance how current their training is.
Variation for Samples
When working with Samples, you cannot use the row ID and instead must retrieve the lsid for that row. This snippet shows the different method required when building your call to the query API.
<onClick>
var checked = dataRegion.getChecked();
var sql = 'SELECT RowId, LSID, Name FROM samples.MySamples WHERE RowId IN (';
var separator = '';
for (var i = 0; i < checked.length; i++) {
sql += separator + checked[i];
separator = ', ';
}
sql += ')';
LABKEY.Query.executeSql({schemaName: 'samples', sql: sql, success: function(data) {
var updateRows = [];
for (var j = 0; j < data.rows.length; j++) {
updateRows.push({lsid: data.rows[j].LSID, name: data.rows[j].Name, receivedDate: new Date().toDateString() });
}
LABKEY.Query.updateRows({ schemaName: 'samples', queryName: 'MySamples', rows: updateRows, success: function() { location.reload(); }});
}});
</onClick>
More Examples
Related Topics
