     [:script {:type "text/javascript"}
      (str "
 var grid;
+var dv;
 
 function requiredFieldValidator(value) {
   if (value == null || value == undefined || !value.length) {

  url: '/api/tokens/" (url-encode app) "',
  type: 'GET',
  success: function(data) {
    dv.setItems(data, 'name');
  },
  error: function(req, status, message) {
    alert('Error loading data');
  }
});

  })"
)]]))

  {id: 'token', name: 'Token', field: 'name', width: 100, editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
  {id: 'description', name: 'Description', field: 'description', width: 200, editor: Slick.Editors.Text},
  {id: 'environment', name: 'Environment', field: 'environment', width: 200, sortable: true, editor: Slick.Editors.Text},
  {id: 'value', name: 'Value', field: 'value', width: 200, editor: Slick.Editors.Text},
  {id: 'source', name: 'Source', field: 'source', width: 400, sortable: true},
  {id: 'delete', name: 'Delete', field: 'delete', width: 200, formatter: deleteButtonFormatter}];


function deleteButtonFormatter(row, cell, value, columnDef, dataContext) {
  var button = \"<input class='del' type='button' id='\" + dataContext.name + \"' />\";
  return button;
}

  var options = {
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true,
    autoEdit: false,
    autoHeight: true
   };

var loadingIndicator = null;

$(function () {

dv = Slick.Data.DataView();
var gridSorter = function(columnField, isAsc, grid, gridData) {
    var sign = isAsc ? 1 : -1;
    var field = columnField
