- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-03-2020 04:58 AM
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?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-04-2020 07:15 AM
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&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
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-04-2020 02:59 PM
It looks like if you are hiding the header and footer that this view shouldn't be updated as the save/update buttons wouldn't be visible.
If that is the case then the one possible way is to just use the UI Element macro to make your UI page.
The UI Element macro would take the table, field name, and the sys_id of the record you want to display values from.
For example:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div class="container" style="margin-top: 50px">
<g:ui_form>
<div class="form-group">
<span class="col-sm-10 form-field">
<label for="incident.number" class="control-label col-sm-2">Number</label>
<g:ui_element table="incident" field="number" id="9d385017c611228701d22104cc95c371"/>
</span>
</div>
<div class="form-group">
<span class="col-sm-10 form-field">
<label for="incident.short_description" class="control-label col-sm-2">Short Description</label>
<g:ui_element table="incident" field="short_description" id="9d385017c611228701d22104cc95c371"/>
</span>
</div>
</g:ui_form>
</div>
</j:jelly>
NOTE: I used hard-coded values for this example. They can be made into variables taking information from url parameters
Rendered:
The above example pulled from an existing incident record. But again it could be from any record as long as you feed the correct info.
And you may have to use some CSS to style the way you want it.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-22-2023 08:53 AM
In case anyone finds themselves here in the future, here is the magic that GlideModalForm uses to remove the top banner:
sysparm_titleless=true
It would still entail using an iframe to load the form, but you wouldn't need the DOM manipulation.