UI Page - How to programmatically create 10 input fields

[Jim Coyne]

I'll prefix this by saying I know just enough about Jelly to be dangerous.   I'm trying to add some text input fields on a UI Page.   Right now it's limited to 10 fields, but it may change to another number and I'm planning on switching it to a property later on, but just want to get this to work as is with a hard coded 10 items:

<j2:set var="jvar_serialnumbers" value="1" />
<j2:while test="$[jvar_serialnumbers != 10]">
       <tr class="item" id="extra_lines2_$[jvar_serialnumbers]">
               <td colspan="6"></td>
               <td colspan="2">
                       <label>Serial Number</label>
                       <input type="text" size="14"
                               name="serial_$[jvar_serialnumbers]"
                               id="serial_$[jvar_serialnumbers]"
                               value="serial_$[jvar_serialnumbers]"/>
               </td>
       </tr>
       <g2:evaluate var="jvar_serialnumbers" expression="jvar_serialnumbers=jvar_serialnumbers+1;" />
</j2:while>

I thought this should work, but only 1 field is being added.   I originally tried:

<j2:while test="$[jvar_serialnumbers ${AMP}lt; 10]">

on line 2 but it gives me the following error: Error at (125, 53): null:-1:-1: <null> Unable to create expression: jvar_serialnumbers < 10

Any help would be appreciated.

[ChrisBurks · Accepted solution]

Within the while loop the g2:evaluate should instead be another j2:set

<j2:set var="jvar_serialnumbers" value="$[jvar_serialnumbers + 1]"/>

[ChrisBurks]

If you really want to use the g2:evaluate, it has to be set to use jelly to interact with the jelly variable previously set. Do that by adding the jelly attribute on the g2:evaluate tag. Then use the jelly object to dot-walk to the previously set variable.

Ie:

<g2:evaluate   jelly="true" var="jvar_serialnumbers" expression="jelly.jvar_serialnumbers = parseInt(jelly.jvar_serialnumbers) +1; " />

Hope that helps

[ChrisBurks]

Also there is another way you could do this if your list were to be in an array of some sort.

<g2:evaluate jelly="true" object="true" var="jvar_serialnumbers">
         var serialnumbers = [{num:1},{num:2},{num:3},{num:4},{num:5},{num:6},{num:7},{num:8},{num:9},{num:10}];
         serialnumbers;
</g2:evaluate>
<table>
         <j2:forEach var="jvar_number" items="$[jvar_serialnumbers]">
         <tr class="item" id="extra_lines2_$[jvar_number.num]">
                   <td colspan="6"></td>
                   <td colspan="2">
                             <label>Serial Number</label>
                             <input type="text" size="14" name="serial_$[jvar_number.num]" id="serial_$[jvar_number.num]" value="serial_$[jvar_number.num]"/>
                   </td>
         </tr>
         </j2:forEach>
</table>

One other thing you might consider is using the default bootstrap classes that come with ServiceNow. In the UI page if the "Direct" field is NOT checked, the page will load ServiceNow's version of bootstrap by default. This enables you to use more modern markup in case the table thing doesn't work out UI/UX wise. If you tag this: "styles/heisenberg/styleguide/docs/index.html" at the end of any instance base url you will see the ServiceNow Styleguide.

Hopefully I didn't give you too much spam but I thought I would add just in case.

[Jim Coyne]

That definitely worked.   I thought I tried it, but after a full day of training, probably should not have been working on this too late.  

Thanks