The CreatorCon Call for Content is officially open! Get started here.

How to render table form without the header and footer in a UI page

Mahathi Nalluri
ServiceNow Employee
ServiceNow Employee

We are trying to render the platform form view in a UI page. We just want the fields with in the form to be displayed without the header and footer section that has the UI actions.

One approach that we tried is to render it in an iframe, and using jQuery added CSS to hide the header and footer.

Are there any other recommended ways to do it?

 

1 ACCEPTED SOLUTION

Hi,

The above approach mentioned by me worked well when I created

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

	<g:evaluate var="jvar_URL" object="true">
		
		var url = '/incident.do?sys_id=4f686e91dbc42010224a2a9a4896193d&amp;sysparm_sysparm_extraParameter=testing';
		url;
	</g:evaluate>

	<iframe src="${jvar_URL}" scrolling="yes" width="800" height="600"/>

</j:jelly>

2) Client Script

function onLoad() {
	//Type appropriate comment here, and begin script below
	var url = top.location.href;

	// give here the UI page sys_id
	if(url.indexOf('fc19b095dbd42010224a2a9a489619ed') > -1){
		var z = this.document.getElementsByClassName("container-fluid");
		z[0].style.display = 'none';
		var k = this.document.getElementsByClassName("form_action_button_container");
		k[0].style.display = 'none';
	}
}

Ensure Isolate Script field is set to false so that it allows DOM

This field is not on form but from list you can make it false.

find_real_file.png

Output:

find_real_file.png

find_real_file.png

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

31 REPLIES 31

Hi,

It worked well for me.

please share your scripts

Also did you ensure Isolate Script field is False for your onload client script

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

yes, Isolate Script field is set to false.

 

This is the client script

function onLoad() {
	//Type appropriate comment here, and begin script below
	var url = top.location.href;

	// give here the UI page sys_id
	if(url.indexOf('sn_csm_ec_test4') > -1){
		var z = this.document.getElementsByClassName("container-fluid");
		z[0].style.display = 'none';
		var k = this.document.getElementsByClassName("form_action_button_container");
		k[0].style.display = 'none';
	}
}

 

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

	<g:evaluate var="jvar_URL" object="true">
		
		var url = '/incident.do?sys_id=552c48888c033300964f4932b03eb092&amp;sysparm_sysparm_extraParameter=testing';
		url;
	</g:evaluate>

	<iframe src="${jvar_URL}" scrolling="yes" width="800" height="600"/>

</j:jelly>

 

In console there is an error

"Cannot read property 'document' of null" on the line this.document.getElementsByClassName("container-fluid");

Hi,

you should be using the ui page sys_id here

if(url.indexOf('UI page sys_id') > -1){

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Hi Ankur,

The url that we are hitting is ui page name.do which is sn_csm_ec_test4.do, we dont have ui page sysid in the URL

Hi,

you must have create UI page right for this.

Use that ui page sys_id in here

if(url.indexOf('fc19b095dbd42010224a2a9a489619ed') > -1){

go to your UI page

Copy sys_id

Use in the above line

find_real_file.png

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader