UI Page in catalog item

[attanhes]

I have a requirement to create new Catalog item for finance team for expense reimbursement. One of the requirement is to create a table for users to complete their expenses in a table format.

I was able to create UI page and added into the catalogue item successfully, but really don’t know how update the ‘processing script’ to get this working. As a result of that when record submitted all the values disappear.

Can someone please help me to work this out? I read so many article but still do not know how to make this working.

We are on 'Kingston'

UI Page

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">
<p>Valid entry examples:</p>
<ul>
<li>GL-895467</li>
<li>GL-345678</li>
</ul>
<p>Click "Add Row" to begin.&#160;&#160;   All fields must be filled in.&#160;&#160;   Remove any unused rows using the "Remove Row" button.&#160;&#160;   When finished, click the "Finalize" button.</p>
<g:ui_form id="nccr_form">
   <table id="expense" width="100%" border="1">   
         <TR>
     <th>Company Name</th>
     <th>GL-Item Description:</th>
     <th>Amount(Ex GST):</th>
     <th>GST:</th>
   
         </TR>   
     </table>
</g:ui_form>
<div></div>
   <input type="button" id="add" value="Add Row" ONCLICK="addRowToTable();"/>
   <input type="button" id="remove" value="Remove Row" ONCLICK="removeRowFromTable();"/>
   <input id="finalize" value="Finalize" type="submit"/>
</j:jelly>

Client script

function addRowToTable() {   

           var tbl = document.getElementById('expense');   
           var lastRow = tbl.rows.length;   
           var iteration = lastRow;   
           var row = tbl.insertRow(lastRow);   

	//*****Customer name**********
           var cellsource = row.insertCell(0);   
           var source = document.createElement('input');
           source.type = 'text';
           source.size = '15';
           source.style="width: auto; height: auto;"; 
         cellsource.appendChild(source); 
	
         
		// **********GL-Item Description************
           var cellsource = row.insertCell(1);   
           var source = document.createElement('input');
           source.type = 'text';
           source.size = '50';  
           source.style="width: auto; height: auto;"; 
         cellsource.appendChild(source);

//********Ammount***************
	var cellsource = row.insertCell(2);   
           var source = document.createElement('input');
           source.type = 'text';
           source.size = '25';  
           source.style="width: auto; height: auto;"; 
         cellsource.appendChild(source);

// **********GST*************	
	var cellsource = row.insertCell(3);   
           var source = document.createElement('input');
           source.type = 'text';
           source.size = '25';  
           source.style="width: auto; height: auto;"; 
         cellsource.appendChild(source);

       }

function removeRowFromTable() {   
         var tbl = document.getElementById('expense');   
         var lastRow = tbl.rows.length;   
         if (lastRow > 2) {   
               tbl.deleteRow(lastRow - 1);   
             }   
       }


function setfinalized() {
   g_form.setValue('reqs_submitted', 'Yes');
}

Processing script

non

[Ajaykumar1]

Hi Attanhes,

Please check the share link : Catalog table variable

                                           Tabular format in service catalog

Mark if Correct/Helpful

Regards,
Ajay

[attanhes]

Thanks Ajay.

I already tried both options before but it did not help me in here.

[attanhes · Accepted solution]

Hi,

Just found out that multi-row variable set is now available in London. Please refer doc article for further information.

https://docs.servicenow.com/bundle/london-it-service-management/page/product/service-catalog-managem...

I tried it my personal instance and work perfect.

[akshaya_bmg]

How did you implement it in Kingston? The accepted solution is for London release.