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

Mahathi Nalluri · ‎11-03-2020

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?

Ankur Bawiskar · ‎11-04-2020

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.

Output:

Regards
Ankur

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

View solution in original post

Ankur Bawiskar · ‎11-03-2020

Hi,

it is not possible if you are using iframe as it would directly render that record

But one thing you can try is this; not tested though

1) create onLoad client script on that table

2) when you are using URL in the iframe send an extra URL parameter in it

3) then in the onLoad client script check if the URL contains that parameter

4) if yes then use DOM manipulation to hide those

Note: DOM is not recommended

To allow DOM to work you need

1) Ensure Isolate Script field is set to false for your client script

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

Regards
Ankur

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

Mahathi Nalluri · ‎11-03-2020

I will try it out. Are there any other ways to load table form in UI page without using iframes? Like directly rendering form macro or something similar?

Ankur Bawiskar · ‎11-03-2020

Hi,

Not sure on that piece.

You can try the above approach and let us know if stuck

Regards
Ankur

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

Mahathi Nalluri · ‎11-04-2020

The main thing is to be able to render the form directly in a UI page without using iframe. I tried rendering form.xml macro in a UI page, but stuck at passing value to a ${ref} variable thats being used in the macro. This variable looks like it should be a gliderecord object based on its usage in the macro.

Any ideas on how to pass value to ${ref} variable thats used in macros?

Ankur Bawiskar · ‎11-04-2020

@Mahathi Nalluri

please share what you have tried so far

Regards
Ankur

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