HOW TO ATTACH UI PAGE TO THE SECTION IN THE FORM

reddy01 · ‎04-04-2017

Hi All,

I had a task to attach the UI page to section in the form.I have created a table in UI page ,i need to attach that UI page to the section in the form.

Thanks,

Reddy

Valor1 · ‎04-04-2017

For that you'll need a formatter.

Navigate to "Formatters" in the left nav and create a new record. in the "Formatter" field, specifify the name of your UI Macro (I don't think they work with UI Pages, but you can try) with ".xml" appended.

Example: your UI Macro is named "my_custom_ui_macro" would become "my_custom_ui_macro.xml"

Then, the formatter will show as an option when you configure the form layout for the table specified.

More documentation:

Creating a Formatter - ServiceNow Wiki

reddy01 · ‎04-04-2017

Hi Valor,

Thanks for replying.

I created a record in UI macro and formatter. i am unable to see that formatter in table layout.

Thanks,

Reddy

Valor1 · ‎04-04-2017

It will show up in the "Configure > Form Layout" area, left slush bucket.

Make sure that you've set the table appropriately and named the formatter something you'll remember. When you're configuring the form layout, what shows in the "Available" bucket is the Formatter name, not the UI Macro name.

reddy01 · ‎04-04-2017

Hi Valor,

i got it , but i have written in java script for creating table in ui macros. The same html,java script code is working in ui page,when i attached that in form that code is not working.

<html>

<head>

<style>

.table_list{

margin: 0;

padding: 0;

list-style-position: inside;

}

.table_list_item{

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<tr>

<th>Type Of Infrastructure</th>

<th>Quantity</th>

</tr>

<tr>

</tr>

</table>

</ol>

</div>

var nextRowIndex = 0;

function edit_row(no)

{

document.getElementById("edit_button"+no).style.display="none";

document.getElementById("save_button"+no).style.display="block";

var s=document.getElementById("s_row"+no);

var type=document.getElementById("type_row"+no);

var qun=document.getElementById("qun_row"+no);

var s_data=s.innerHTML;

var type_data=type.innerHTML;

var qun_data=qun.innerHTML;

s.innerHTML="<input type='text' id='s_text"+no+"' value='"+s_data+"'/>";

type.innerHTML="<input type='text' id='type_text"+no+"' value='"+type_data+"'/>";

qun.innerHTML="<input type='text' id='qun_text"+no+"' value='"+qun_data+"'/>";

}

function save_row(no)

{

var s_val=document.getElementById("s_text"+no).value;

var type_val=document.getElementById("type_text"+no).value;

var qun_val=document.getElementById("qun_text"+no).value;

document.getElementById("s_row"+no).innerHTML=s_val;

document.getElementById("type_row"+no).innerHTML=type_val;

document.getElementById("qun_row"+no).innerHTML=qun_val;

document.getElementById("edit_button"+no).style.display="block";

document.getElementById("save_button"+no).style.display="none";

}

function delete_row(no)

{

document.getElementById("row"+no+"").outerHTML="";

}

function add_row()

{

var new_s=document.getElementById("new_s").value;

var new_type=document.getElementById("new_type").value;

var new_qun=document.getElementById("new_qun").value;

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

var table_len=(table.rows.length)-1;

var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='s_row"+table_len+"'><li class=\"table_list_item\"></li></td><td id='type_row"+table_len+"'>"+new_type+"</td><td id='qun_row"+table_len+"'>"+new_qun+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'/></td> <td> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'/> </td><td> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'/></td></tr>";

document.getElementById("new_s").value="";

document.getElementById("new_type").value="";

document.getElementById("new_qun").value="";

}

</script>

</body>

</html>

When try it clicking in ui page add row button is working,in form its not working