UI Macros are superheroes when it comes to have intuitive UI on Servicenow platform on fulfiller view. Let’s accept it, we all have created UI macros sometimes, somewhere 😊
Now, Service Portal brought the power of angular JS and things changed for good. However, Service Portal don’t support XHTML/Jelly. So, what happens to all Macros we build on catalog item/record producers and forms?
For catalog items/record producer Servicenow recommends developing alternate solution as widget and embed it on variable type UI macro/UI page. This is well documented here https://docs.servicenow.com/bundle/jakarta-servicenow-platform/page/build/service-portal/task/ui-mac...
However, rendering UI macros/formatters are still a problem for portal. Below steps let you render UI macro/formatters on form without any customization to form widget.
- Create a UI macro named “demo” with below content(this can be any content)
<?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 jelly="true">
var username = gs.getUserName();
username;
</g:evaluate>
<p id="printme">Hello ${username}</p><br/>
<button class="success" onclick="printElem(event);">Print me</button>
<script>function printElem(event) {
event.preventDefault()
var content = document.getElementById("printme").innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus()
mywindow.print();
return false;
}
</script>
</j:jelly>
- Create a formatter like below
- Add formatter on Form
- Create a widget with below
HTML
<div>
<p>Hello {{data.username}}</p><br>
<button class="success" onclick="window.print();">Print me</button>
</div>
Server
data.username = gs.getUserName();
- Navigate to sp_ui_formatter table and map widget and UI macro as shown below
Above steps will result you the widget rendering on portal and UI macro rendering on native/fulfiller view
Portal view
Native/fulfiller view
Hope this will help you 😊
