UI page

[newbiedeveloper]

H All,

This is my Html code from ui page

How to show dropdown choices in a Html script in Ui page?

<g:ui_form>

<input type="hidden" id="cancelled" name="cancelled" value="false"/>

<input type="hidden" id="incidentSysID" name="incidentSysID" value="${sysparm_sysID}"/>

<table width="100%" cellpadding="0" cellspacing="0">

<g:ui_input_field name="name" id="server_name" label="Name"

                      value="${jvar_comments_text}" mandatory="true" />

        <g:ui_input_field name="ost" id="ost" label="OST"

                      value="Linux" mandatory="true" />                 // this one i want it to show dropdown choices 1 and 2. How to write this?

</table>

<table width="100%" cellpadding="0" cellspacing="0">

<tr><td align="left" nowrap="true"><br /><g:dialog_buttons_ok_cancel ok="return validateForm();" cancel="return onCancel();"/></td></tr>

</table>

</g:ui_form>

[Daniel A-C]

You haven't explained whether you just want some HTML displaying a basic dropdown list or whether you are looking for it to replicate a choice list and entries from the dictionary. If it's just basic HTML have you considered using <select> and <options> tags?   i.e...

<select   name="operating_system" id="operating_system">

        <option value="">--None--</option>

        <option value="1">Linux</option>

        <option value="2">Microsoft</option>

</select>

There are plenty of articles for extending this further. See:

Onchange select option in UI page

Re: UI Page Lookup Select Box

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

UI Page Select Box driving &lt;g:reference&gt; Query  

[Daniel A-C]

You could also take a look at the UI page called 'prompt_for_list_selection' which has a cleanly laid-out example of how to work with a choice list in a UI page

https://<instancename>.service-now.com/nav_to.do?uri=sys_ui_page.do?sys_id=3d722e211b010100adca1e094...

and this is the UI action which calls it, so you can see how the params are passed and the result processed...

https://<instancename>.service-now.com/nav_to.do?uri=sys_ui_action.do?sys_id=dc527da51b410100adca1e0...

[newbiedeveloper]

Hi Daniel,

I just needed HTML tags. The above code which you have pasted here for adding options works good. But my previous line for Name is Bold and towards right side where as Next line using a label is left side and not bold.

<table width="100%" cellpadding="0" cellspacing="0">

<g:ui_input_field name="server_name" id="server_name" label="Server Name"

                      value="${jvar_comments_text}" mandatory="true" />

                        <label for="os" > Operating System

                              </label>

                          <select   name="os" id="os"   label="Operating System">

        <option value="">--None--</option>

        <option value="Linux SuSE">Linux</option>

        <option value="AIX">AIX</option>

</select>

</table>

Can you please tell me what to do so it is uniform?

[Daniel A-C · Accepted solution]

your <g:ui_input_field tag will actually render the following HTML:

<table>
   <tbody>
   <tr>
   <td id="label.server_name" type="string" choice="0" class="label" height="23px" nowrap="true">
   <label for="server_name" dir="ltr" class="   control-label" onclick="">
   <span id="status." mandatory="true" class="mandatory required-marker" oclass="mandatory"></span>
   <span class="label-text" data-html="false">Server Name</span>
   </label>
   </td>
   <td style=";" nowrap="true">
   <input autocorrect="off" size="" maxlength="" autocomplete="off" onkeyup="" name="server_name" onchange="onChange('server_name');" style="" id="server_name" type="text">
   </td>
   </tr>
   </tbody>
</table>

I'm not aware of a <g:> tag which will do the same for choice/dropdown lists, so unless anyone can point out a better way, I'd do the following:

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

   <!-- render a text field using a <g:ui_input_field> tag -->
   <g:ui_input_field name="server_name" id="server_name" label="Server Name" value="${jvar_comments_text}" mandatory="true" />

   <!-- the following is to render a choice list with the same label & spacing format as the above <g:ui_input_field -->
   <table>
             <tr>
                       <td id="label.os" type="string" choice="0" class="label" height="23px" nowrap="true">
                                 <label for="os" dir="ltr" class="   control-label" onclick="">
                                           <span class="label-text" data-html="false">Operating System</span>
                                 </label>
                       </td>
                       <td style=";" nowrap="true">
                                 <select name="os" id="os">
                                           <option value="">--None--</option>
                                           <option value="Linux SuSE">Linux</option>
                                           <option value="AIX">AIX</option>
                                 </select>
                       </td>
             </tr>
   </table>

</j:jelly>

which then looks like this...