Render UI macro on Service Portal form

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