Jelly, Javascript and html <select>ions

tobrien · ‎12-02-2016

Hi,

I am trying to understand how to dynamically add to a <select> from elements created in the Jelly -- here's the basics of my endeavor ==>

Extremely Simple Example for a single entry (one ID, and one NAME) :: I can use this in my UI PAGE html

<g2:evaluate var="jvar_some_name">

var id = '123456';

var name = 'tobtobtob';

//you may assume that the values were actually developed from some GlideRecord calls

</g2:evaluate>

<select>

<option value="$[id]">$[name]</option>

</select>

But suppose I need to add an "array of values" using a var id = [ ]; like so ...

<g2:evaluate var="jvar_some_name">

var id = [ ];

var name = [ ];

for (var k9=0;k9<10;k9++) {

id.push(k9);

name.push(k9.toString());

}

</g2:evaluate>

Trying to add the array contents as 'options' seems to be difficult for me. Below is one of many attempts ==>

I know this fails for a variety of reasons not the least which is:

(a) Mixing the <option> line between the <g2:evaluate> of the for loop is just nuts.

(b) the doubling of the square brackets doesn't get past the compiler.

<select>

<g2:evaluate>

for (var k9=0;k9<10;k9++) {

</g2:evaluate>

<option value="$[id[k9]]"> $[name[k9]] </option>

<g2:evaluate>

}

</g2:evaluate>

</select>

Any assistance you can offer would be greatly appreciated.

mike_allgire · ‎12-02-2016

When ever writing Jelly in a UI Page, I frequent the two pages often. I would keep them handy. In addition, there are other available jelly tags, that they don't provide, but you can "discover" after trial and error.

http://wiki.servicenow.com/index.php?title=Jelly_Tags#gsc.tab=0

Extensions to Jelly Syntax - ServiceNow Wiki

The first question would be; what are you getting the user ID/name from? Is it from the user table or from another query of values from a different table. If it is a direct look up, you can use the extension for Extensions to Jelly Syntax - UI Reference. This will allow you to use a similar reference look up (like a reference field). If you are querying information from a list of user values created from other table(s), then you would want to use the Jelly Tags - While jelly tag to loop through. In jelly, there isn't a "for" to be used directly in the contents of the scripting (Edit: or listen to ctomasi who knows more than I).

Below is an example of a bootstrap carousel that I created to reference some images from the db_image table.

<?xml version="1.0" encoding="utf-8" ?>

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

       <!--Query the image table to look for images that are active and start with 'test_slide'-->

<!--Retrieve the images in descending order by created date-->

       <g:evaluate var="jvar_gr" object="true">

               var gr = new GlideRecord('db_image');

               gr.addQuery('active',true);

               gr.addQuery('name','STARTSWITH','test_slide');

               gr.orderByDesc('sys_created_on');

               gr.query();

               gr;

       </g:evaluate>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

   <!-- Wrapper for slides -->

   <div class="carousel-inner" role="listbox">

           <div class="item active">

                       <center><img src="main_slide_0.png" alt="Main"/></center>

               </div>

<!--Using Jelly while test, loop through the retrieved images and display them in the carousel-->

           <j:while test="${jvar_gr.next()}">

               <div class="item">

                       <center><img src="${gr.name}" alt="TEST"/></center>

               </div>

           </j:while>

   </div>


   <!-- Left and right controls -->

   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

       <span class="sr-only">Previous</span>

   </a>

   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

       <span class="sr-only">Next</span>

   </a>

</div>

</j:jelly>

For your usage, you would just change the lines to be relevant to the select html tag.

<select>

         <j:while test="${jvar_gr.next()}">

                 <option value="${gr.id}">${gr.name}</option>

         </j:while>

</select>

Hope that helps some.

View solution in original post

tobrien · ‎12-05-2016

Thanks,

I am comfortable on the GlideRecord side of things, I was just wondering about how far you can take an exposed jelly variable's manipulation.

Also, thanks for the EQUAL sign catch !

regards,

tony

Chuck Tomasi · ‎12-02-2016

Create your list of options in the JavaScript, then use the <j2:forEach></j2:forEach> block to iterate over them. Your HTML needs to be outside the g2:evaluate block to be recognized by the XML parser.

<g2:evaluate var="jvar_options" object="true">

//Create array of option objects with label and value attributes

</g2:evaluate>

// add j2:forEach loop here to display each option tag with value and label

</select>

Check out episodes 1-3 here.

TechNow Episode List

tobrien · ‎12-02-2016

Thanks you Mr. Tomasi and Mr. Allgire ! Your suggestions are excellent.

I had seen the <j2> mechanisms before but failed to realize how they might be useful in my case. Your examples made it quite clear... thanks!

As I was reviewing the replies I had to wonder (and perhaps you might offer) what is the role of Line#11 ??

gr;

Would line #20 operate successfully without Line #11 ?

Thanks, again !

Chuck Tomasi · ‎12-02-2016

Line 11 "exposes" the object as jvar_gr (line 5) so line 20 can consume it.

tobrien · ‎12-02-2016

Thanks !