How can we create a table using ui macro?

anjiadmin · ‎10-08-2017

How can we create a table using ui macro as shown below.

I want to pass the values from the table to short description field of incident.

How can we achieve this?

Thanks,

Y Anjaneyulu

Vignesh11 · ‎10-08-2017

Hi Anji,

I have done this for worknotes(Journal field), this will help you out, modify this code to create a dynamic table and pass your field values.

To put table inside worknotes/activity log use [CODE] tag.

Script include:

updateWorknotes : function (servers,bounce_status,application)

{

var dynamic_table = '';

dynamic_table = '[code]<html><body><table border=1><tr><td><b>Server Name &nbsp&nbsp</td><td><b>Application Name &nbsp&nbsp</td><td><b>Bounce Status &nbsp&nbsp</td></tr>';

var bounce_stats = bounce_status.split(',');

var server_name= servers.split(',');

for(var i=1;i<server_name.length;i++)

{

dynamic_table = dynamic_table + '<tr><td>'+server_name[i]+'&nbsp&nbsp</td><td>'+application +'&nbsp&nbsp</td><td>'+bounce_stats[i]+'&nbsp&nbsp</td></tr>';

}

var work_notes = "Application Bounce Status<br/><br/>" + dynamic_table + '[/code]';

return work_notes;

},

Screenshot:

Note: Instead of server name, Application name, Bounce status, use your column names(PO#, Article#, Quantity) and pass their values.

anjiadmin · ‎10-10-2017

I am able to get the above table using ui macro with the below script.

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

<html>

<head>

<style>

table, td {

border: 1px solid black;

}

</style>

</head>

<body>

<p>Click the button to add a new row at the last position of the table and then add cells and content.</p>

<tr>

<td>ARTICLE#</td>

<td>QUANTITY</td>

</tr>

</table>

<br>

function myFunction() {

var table = document.getElementById("myTable");

var row = table.insertRow(-1);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

var cell2 = row.insertCell(2);

cell1.innerHTML = "''";

cell2.innerHTML = "''";

cell3.innerHTML = "''";

}

</script>

</br>

</body>

</html>

But I am having few issues mentioned below:

1.I am able to get the table on the catalog form on instance but not on the portal.

2.I am not able to enter the data into cells.

3.I am not able to add empty cells.

Thanks,

Y Anjaneyulu

anjiadmin · ‎10-24-2017

Yes Vignesh.

I want to pass the table to the description filed of incident form from the portal.

I have few doubts on above script you posted.

1.what is the code tag.

2.from where we care calling the script include.

Thanks,

Y Anjaneyulu

Vignesh11 · ‎10-10-2017

Hi Anji,

Initially i thought you are trying to bring a table in a short description of incident form,

If this is for a catalog item, then best way is to create a UI page, and call that UI Page as a catalog variable.

I will give you a sample code for creating table in service catalog (UI page), put this in a UI page and give Try it then you will able to understand how this works.

you can easily modify this with your above fields, this will resolve all your issues

1.I am able to get the table on the catalog form on instance but not on the portal. - use the table as a variable like UI page

2.I am not able to enter the data into cells. - you havent created ID for those fields to manipulate data into it.

3.I am not able to add empty cells. - Add rows is missing.

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">

<th bgcolor="#EEEEEE">Device Name</th>

<th bgcolor="#EEEEEE">Device Comment</th>

<th bgcolor="#EEEEEE" >IP Address</th>

<th bgcolor="#EEEEEE" >Valid Name Resolution (DNS)</th>

<th bgcolor="#EEEEEE" >Technician Comments</th>

<tbody>

<tr>

</select></td>

</tr>

</tbody>

</table>

</table>

</j:jelly>

Client Script :

var ansA = '';

var loc = '';

var s = 0;

function __saveA()

{

if(s<5)

{

if(!ipvalidation())

return;

var vname = $j('#protocol').val();

if (vname == '')

{

alert('Please select a Valid Name Resolution(DNS) Yes or No');

return;

}

var arr = [];

arr.push(document.getElementById('sys_display.source').value);

//arr.push(g_form.getValue("source"));

arr.push($j('#destination').val());

arr.push($j('#port').val());

arr.push($j('#protocol').val());

arr.push($j('#comments').val());

adr(arr);

document.getElementById('sys_display.source').value='';

$j('#destination').val('');

$j('#port').val('');

$j('#protocol').val('');

$j('#comments').val('');

s++;

}

else

{

alert('You can add only 5 entries');

}

function adr(arr)

{

var rowTo = '<tr>'+

'<td><input type="checkbox" /> </td>'+

//'<td>'+document.getElementById('source')+'</td>'+

'<td>'+document.getElementById('sys_display.source').value+'</td>'+

'<td>'+$j('#destination').val()+'</td>'+

'<td>'+$j('#port').val()+'</td>'+

'<td>'+$j('#protocol').val()+'</td>'+

'<td>'+$j('#comments').val()+'</td></tr>';

$j('#test > tbody:last').append(rowTo);

var storeDet = g_form.getValue('storeDetails');

if(storeDet == '')

{

storeDet = arr.join(',');

}

else{

storeDet =storeDet +'&'+arr.join(',');

}

g_form.setValue('storeDetails', storeDet);

}

function ipvalidation(){

var newValue = document.getElementById("port").value;

if(newValue == '')

{

alert("IP address can't be empty");

return false;

}else{

newValue=newValue.trim();

var qualifiers = newValue.split(".");

if(qualifiers.length!=4)

{

alert("Invalid IP address format!!!");

return false;

}

for(var ind=0;ind<qualifiers.length;ind++)

{

var numbers = /^[0-9]+$/;

if(qualifiers[ind].match(numbers))

{

if(parseInt(qualifiers[ind])>255 || parseInt(qualifiers[ind])<0)

{

alert("Invalid IP address format!!!");

return false;

}

}else{

alert("Invalid IP address format!!!");

return false;

}

return true;

}

function addRowEnt1(detVal)

{

var _val = '';

var i=0;

var detValue= detVal.split('&');

//alert('detvalue is '+detValue);

while(detValue[i])

{

_val = detValue[i];

var arr = _val.split(',');

//alert('array is '+ arr);

var rowTo = '<tr>'+

'<td><input type ="checkbox"/></td>'+

'<td>'+arr[0]+'</td>'+

'<td>'+arr[1]+'</td>'+

'<td>'+arr[2]+'</td>'+

'<td>'+arr[3]+'</td>'+

'<td>'+arr[4]+'</td></tr>';

//paint the row back

$j('#test > tbody:last').append(rowTo);

i++;

}

function deleteRow()

{

var table = document.getElementById('test');

var rowCount = table.rows.length;

var arrr=[];

var storeDet="";

for(var p=2; p<rowCount; p++)

{

//alert("inside for loop");

var row = table.rows[p];

var j = 0;

var chkbox = row.cells[0].childNodes[0];

if( chkbox.checked == true)

{

/*arrr[0]= row.cells[1].innerHTML+','+ row.cells[2].innerHTML+','+row.cells[3].innerHTML+','+row.cells[4].innerHTML+','+row.cells[5].innerHTML;

var storeDet2 = g_form.getValue('storeDetails2');

if(storeDet2 == ''){

storeDet2 = arrr[0] ;

}

else{

storeDet2 = storeDet2 +'&'+arrr[j];

}

g_form.setValue('storeDetails2', storeDet2);

*/

table.deleteRow(p);

rowCount--;

s--;

p--;

j++;

}else{

var temp= row.cells[1].innerHTML+','+ row.cells[2].innerHTML+','+row.cells[3].innerHTML+','+row.cells[4].innerHTML+','+row.cells[5].innerHTML;

if(storeDet == ''){

storeDet = temp ;

}

else{

storeDet = storeDet +'&'+temp;

}

g_form.setValue('storeDetails', storeDet);

}