How to pull the current value of a dropdown box in a UI Page

[MG Casey]

I want to have a dropdown box on a UI Page, and then be able to pull what the selected value of that dropdown box is (perhaps to use as a filter for a GlideRecord query).

What I have so far:

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<select id="analyst" style="width: 160px;" name="analyst">  

          <option value="AGILLI5">Aaron G</option>  

          <option value="AHALLE3">Abbey H</option>  

      </select>

<g2:evaluate>  

        var dropdownanswer = document.getElementById("analyst");

        var strUser = e.options[e.selectedIndex].value;

</g2:evaluate>

$[dropdownanswer]

</j:jelly>

Section in bold is most likely completely wrong. How do I create a simple variable that tells me what the current selection is of my dropdown box on the UI Page?

[Slava Savitsky]

It would help a lot if you could give me a rough idea of what you are actually trying to implement. What are you going to do with the retrieved dropdown list value? Do you need it to change dynamically when selection changes in the dropdown list? There is a Client script field in UI Page records where you can use client-side JavaScript like this:

var myBox = document.getElementById('analyst');

var myValue = myBox.options[myBox.selectedIndex].value;

alert(myValue);

Give me some more background information on what you are trying to achieve and I will do my best to help you out.

[MG Casey]

I want to use the dropdown box to change a query filter.

Continuing with the example above, you would have the ability to choose a "analyst" in the dropdown, then below, the associated queries would change to have that analyst as the filter.

Ex: This page shows a single analyst's incident stats. If I change the dropdown to Abbey, her stats appear. If I change it back to Aaron, his stats appear.

[Slava Savitsky]

If you want to do it without reloading the page, you will need retrieve the value of the select box like I showed in the previous comment, then make an AJAX call to the server to fetch the analyst's stats, and then manipulate the page's document object model (DOM) from your client script to actually display this information in the right place. This sounds like a complex solution to me.

An easier way to do it (if you are not concerned about reloading the page) is to use a processing script to reload the page and pass the selected value as a parameter in the URL.

[Slava Savitsky · Accepted solution]

For every URL parameter with "sysparm_" prefix,   a corresponding Jelly variable prefixed with "jvar_" is automatically created and is available for processing in the HTML field of the UI page. You can read more about it here:

UI Pages - ServiceNow Wiki

Below is a sample UI page you can use an example. Is it similar to what you were looking for?

Name:

analyst_stats

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


<j:set var="jvar_analyst" value="${sysparm_analyst}" />
<j:set var="jvar_analysts_list" value="Alice,Bob,Charlie" />


<g:tokenize var="jvar_people" delim=",">
       ${jvar_analysts_list}
</g:tokenize>


<g:ui_form>
       <select id="analyst" name="analyst">
               <option value="">-- Select --</option>
                       <j:forEach var="jvar_choice" items="${jvar_people}">
                               <j:if test="${jvar_choice == jvar_analyst}">
                                       <option value="${jvar_choice}" selected="selected">${jvar_choice}</option>
                               </j:if>
                               <j:if test="${jvar_choice != jvar_analyst}">
                                       <option value="${jvar_choice}">${jvar_choice}</option>
                               </j:if>
                       </j:forEach>
       </select>
       <g:ui_spacer />
       <g:dialog_button_ok ok_id="ok_button" />
</g:ui_form>
 

<j:if test="${!empty(sysparm_analyst)}">
       <p>Displaying personal stats for ${sysparm_analyst}</p>
</j:if>
 

</j:jelly>

 

Processing script:

if (analyst != '') {
       my_target = 'analyst_stats.do?sysparm_analyst=' + analyst;
} else {
       my_target = 'analyst_stats.do';
}

response.sendRedirect(my_target);