Adding multiple rows for a field

prakashchandra · ‎05-10-2013

Hi,

Is it possible to add multiple rows for a field in a ServiceNow form?
The requirement is there should be a (+) sign next to a form field , clicking on which should dynamically generate a new row in the form for inputs.
How the data thus entered will be retrieved?
Or is there any other way to achieve this?

Any help , appreciated.

Regards/Prakash

adiddigi · ‎05-10-2013

Are you talking about Service Catalog form?
Then -> Yes, You can do it by including a UI Page/UI Macro variable, with code from any of the below links/code.

No, are you taking about something else?
Then -> Yes you can do it by having a GlideDialogWindow calling the UI page with the code from the below.

Its been discussed many times here on community. One of my links: Dynamic Reference fields

If you want to reduce the complexity of the above link then:
A UI page i wrote recently:
( this uses jQuery for DOM manipulation, a rough draft,but does what you want it to do.as I cannot give you the actual UI page)



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

<!--                                       THE JELLY RETRIVAL PART

                                    ****************************************

-->
<g:evaluate var="jvar_pass_value" jelly= "true"
     expression= "RP.getWindowProperties().get('pass_value')" />

<!-- Getting the passValue -->
<g:evaluate var="jvar_pass_value_one" jelly= "true"
     expression= "RP.getWindowProperties().get('pass_value_one')" />


<input id="act" type="hidden" value="active"></input>


<!--                                     END OF JELLY RETRIEVAL PART
                                       ***************************************


    -->



<!--                                               Including jQUery
                                          **********************************
-->


<script> </script>

                                                  <!-- Ending jQuery inclusion-->


<!--                            Script to add a row in the table
                              ************************************

-->
<script>


$j(document).ready(function(){

var x = $j("img[src$='reference_list.gifx']");
var par = $j(x).parent();
$j(par).attr("onClick","clickRef()");



});

function clickRef(){
popupOpenStandard("/cmdblist.do?sysparm_act="+$j('#val').val());
}
//addLoadEvent();


function addRowToTable(){
var input = $j('#refUI').children().eq(0).val();

//Getting the count
var cmdbObj = getDetails(input);
var count  = $j('#cou').val();
//cloning the header
var cdum = $j('#dummy').clone(true,true);

var $dum = $j(cdum);
     $dum.attr('id',input)
                  .removeClass("used")
                  .addClass("new")
                  .attr("style",'');
      var $chil = $dum.children();
     $chil.eq(0).find('input').attr('style','display:block').addClass('checkBoxes');
     $chil.eq(1).html(cmdbObj.name).attr('style','');
     $chil.eq(2).html('Place Holder').attr('style','');
     $chil.eq(3).html('Place hOlder').attr('style','');
$dum.appendTo('#equipment');

}


function removeRowFromTable(){

var removeParent= [];

$j('.checkBoxes').each(function(){if(this.checked){ $j(this).parents('tr').fadeOut(600, function() { $j(this).remove(); }); }});


}

function getDetails(sysID){
var gr = new GlideRecord("cmdb_ci_hardware");
gr.get(sysID);
return gr;
}

</script>
                                     

                                      <!-- End of adding a row -->







<!--                                   THE HTML
                               *************************

-->
<form>
<input type="text" id="cou" value="0"></input> <!-- Input count - Used for counting - Initially zero -->
<table id="equipment" width="100%" align ="center" >
  <TR style="background-color:#64AFEB; border :1px solid white; width : 75px; height:30px" class="used" id="dummy">
      <td style="color :white"><B>  * <input type ="checkbox" style="display:none"></input> </B></td>
      <td style="color :white"><B>CI Type </B></td>
      <TD style="color :white"><B>Hardware</B></TD>
      <TD style="color :white"><B>Status(state)</B></TD>
     </TR>
 </table >
<br></br><br></br>

<table id="equipmentReference" width ="100%" align = "center">

<tr>
<td width ="21%">
</td>

<td><label for="equipmentReference"><b>Hardware</b></label></td>
<td id="refUI"> <g:ui_reference name= "_ref_" table="cmdb_ci_hardware" id= "_ref_" ></g:ui_reference>


</td>
<td width = "24%"><INPUT TYPE="hidden" VALUE="${jvar_die}" name= "date" id = "date"></INPUT></td>
<td width = "10%">
</td>
</tr>



<tr><td><div style="height:50px;"></div></td></tr>





<tr>
<table style="margin-left:250px">
<tr>

<td width = "24%"><INPUT TYPE="button" VALUE="Add Equipment" ONCLICK="addRowToTable();" onload="addRowToTable();" style="background-color:#64AFEB; color: white; border :1px solid white; width : 100px ; height:30px;white-space: nowrap"></INPUT></td>
<td width = "24%"><INPUT TYPE="BUTTON" VALUE="Remove" ONCLICK="removeRowFromTable();" style="background-color:#64AFEB; color: white; border :1px solid white;width : 100px ; height:30px;white-space: nowrap"></INPUT></td>
<td width = "24%"><INPUT TYPE="button" VALUE="Save and Close" ONCLICK="fnOk();" style="background-color:#64AFEB; color: white; border :1px solid white; width : 100px ; height:30px;white-space: nowrap"></INPUT></td>

<td width = "14%">
</td>
</tr>
</table>

</tr>



</table>
</form>

<!--

                                 END OF HTML
                            *********************
-->





</j:jelly>

Ninja Edit: If you aren't okay with mixing your DOM with your data, I have recently blogged how to seperate them using Backbone.js doing the exact thing. You can have a look at the code here : http://community.servicenow.com/blog/adiddigi/single-page-cms-appsui-pages-backbonejs-service-now

Take your pick, Let me know if it works!

prakashchandra · ‎05-13-2013

Thanks Abhi for the inputs, let me go through it and will let you know if in case stuck up with something!!

sappidi · ‎02-23-2016

Hi abhiram I have this code in demo instance of fuiji it is working fine but not working in eureka instance. I have changed reference pointing to sys_user table as per my requirement as i needed to multiple user to table row. it was working fine in fuiji but when i tried in my dev instance which is in eureka, it is poining to user table list with UserId field first when i click on that it is opening that user record not fetching value to reference field used in macro. when i update that user record it is opening catalog item form in same window. please help me what could be the reason.

In url of window opened sysparm_act = undefined. in fuiji. I am attaching screen shot of my code.

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

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

<!-- THE JELLY RETRIVAL PART

****************************************

-->

<g:evaluate var="jvar_pass_value" jelly= "true"

expression= "RP.getWindowProperties().get('pass_value')" />

<g:evaluate var="jvar_pass_value_one" jelly= "true"

expression= "RP.getWindowProperties().get('pass_value_one')" />

<!-- END OF JELLY RETRIEVAL PART

***************************************

-->

<!-- Including jQUery

**********************************

-->

<!-- Script to add a row in the table

************************************

-->

$j(document).ready(function(){

var x = $j("img[src$='reference_list.gifx']");

var par = $j(x).parent();

$j(par).attr("onClick","clickRef()");

});

function clickRef(){

popupOpenStandard("/sys_user.do?sysparm_act="+$j('#val').val());

}

//addLoadEvent();

function addRowToTable(){

var input = $j('#refUI').children().eq(0).val();

//Getting the count

var cmdbObj = getDetails(input);

var count = $j('#cou').val();

//cloning the header

var cdum = $j('#dummy').clone(true,true);

var $dum = $j(cdum);

$dum.attr('id',input)

.removeClass("used")

.addClass("new")

.attr("style",'');

var $chil = $dum.children();

$chil.eq(0).find('input').attr('style','display:block').addClass('checkBoxes');

$chil.eq(1).html(cmdbObj.name).attr('style','');

$chil.eq(2).find('select').attr('style','display:block').addClass('select');

$dum.appendTo('#equipment');

}

function removeRowFromTable(){

var removeParent= [];

$j('.checkBoxes').each(function(){if(this.checked){ $j(this).parents('tr').fadeOut(600, function() { $j(this).remove(); }); }});

}

function getDetails(sysID){

var gr = new GlideRecord("sys_user");

gr.get(sysID);

return gr;

}

</script>

<form>

<TD style="color :white"><B>Access Level </B>

<select><option value="access">Select One</option>

<option value="change">Change</option>

<option value="remove">Remove Access</option>

<option value="contributor">Contributor w/o Delete</option>

</select> </TD>

</TR>

</table >

<tr>

</td>

<td><label for="equipmentReference"><b>Search and Selet Users</b></label></td>

</td>

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</tr>

</table>

</form>

<!--

END OF HTML

*********************

-->

</j:jelly>

geoffcox · ‎05-10-2013

Just in case you were looking for a simpler answer (using built-in features):

Having multiple rows for a field implies that there is at least a one to many relationship between the form's object and the field's objects, and possibly a many-to-many relationship. This in turn means that the field's records are actually pointers to records in another table in Service Now. There are two easy ways to have multiple rows for related lists.

For example, a change request can have many tasks. This is a one-to-many relationship.

For another example, a group can have many members. But those members can also be members of other groups. This is a many-to-many relationship.

For the moment, I'll assume you're talking about a one-to-many circumstance. If you haven't already, define the table that you want to get to from the form. It will need a reference field to original form's table. Then you can either:

1) Personalize Related Lists: Right click at the top of the form and choose Personalize->Related Lists. Then select the appropriate list and add it to your form. When you have done this it will appear as a related list at the bottom of your form. You can add additional rows with the "New" button. You can optionally enable an "Edit" button.

2) Personalize Form Layout: Right click at the top of the form and chose Personalize->Form Layout. The available related lists will be shown in red on the left side of the slushbucket. Select the one referencing the table you defined above and put it anywhere on the form you wish.

To retrieve this information in a script, you would use a GlideRecord to query your new table for records that reference the sys_id of the record you were concerned about.

I hope this helps!

Cheers,
Geoff.