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

MG Casey · ‎04-23-2014

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 · ‎04-25-2014

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);

Blog: https://sys.properties | Telegram: https://t.me/sys_properties | LinkedIn: https://www.linkedin.com/in/slava-savitsky/

View solution in original post

johnram · ‎09-21-2017

The ServiceNow Wiki content is no longer supported. Updated information about this topic is located here: UI Pages

Visit http://docs.servicenow.com for the latest product documentation

Justin90 · ‎06-09-2022

Hi Slava,

Very helpful answer. There is a problem when I create a Widget based on UI page. On the Dashboard when I click the OK button it redirects to the analyst_stats.do page instead of reloading the Dashboard page. Is there any way to fix it?

Thanks

Slava Savitsky · ‎06-27-2022

Hi Justin, would you be able to share a couple of screenshots of what you have already configured and what the issue looks like?

Blog: https://sys.properties | Telegram: https://t.me/sys_properties | LinkedIn: https://www.linkedin.com/in/slava-savitsky/