ServiceNow uses a select field for reports that looks really cool:
A question came up on the community about how, exactly, you could create one. Digging into the elements of the field, we can find that it is a select2 field:
Select2 offers their code publicly: Select2 - The jQuery replacement for select boxes
So, this should not be too difficult a task to do. There are two paths you could take, downloading the scripts from select2 and adding them as global UI Scripts in your instance:
and calling them in UI stuff like:
<g:include_script src="select2.min.css.jsdbx" />
<g:include_script src="select2.min.js.jsdbx" />
or just calling them directly from the source:
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script></script>
Finally, your code would look something like:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script></script>
<body>
<script>
$j(document).ready(function() {$j(".js-example-basic-single").select2();});
</script>
<g:evaluate>
var table = new GlideRecord('sys_db_object');
table.orderBy('label');
table.query();
</g:evaluate>
<select class="js-example-basic-single">
<j:while test="${table.next()}">
<option value="${table.name}">${table.label}</option>
</j:while>
</select>
</body>
</j:jelly>
This just queries the tables of the system, like the report example, and adds all the results into options. The end result looks like this:
2 Comments
