Render UI macro on Service Portal form

rahulpandey · ‎12-13-2019

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 😊

Biddaum · ‎11-25-2020

@rahulpandey Thanks for this, it is exactly what I need to do, however there are a few steps that I can't follow with my limited understanding.

Can you advise where the xml file comes from (x_9997_demo_demo.xml)?

If this is something I need to create can you advise where it goes? How to create it?

Where exactly is it I need to go to map the widget and UI macro? (when I go to the tables and find the sp_ui_formatter table it doesn't seem to have anything that looks like your screenshot and I can't figure how to find it.

I'm on Orlando if that makes a difference.

Thanks for your help with this.

rahulpandey · ‎11-25-2020

Hi Bidduam,

1- x_9997_demo_demo.xml is name of ui macro with suffix .xml. You need to create a UI macro for things to work on native. you can choose not to put any code in UI macro and, use it as dummy.

2- You need to create a record in "sp_ui_formatter" table and map widget and UI macro.

Biddaum · ‎11-29-2020

@rahulpandey Thank you for the response, I still have no idea how you have got to the point where you have the screenshot of the linking of the widget and macro?

When I go to the table and click on new nothing like what you show comes up.

Sorry to be a pain but can you explain how you get to the point where you can add the widget name and the formatter?

Biddaum · ‎12-07-2020

Sorry to be annoying @rahulpandey do you have any answers for me? I really cannot find in the table where to add a record that allows me to link the macro and widget

Oleg · ‎12-08-2020

You can type sp_ui_formatter.list in menu and press "Enter" to open table sp_ui_formatter.

Alternatively you can open menu "System Definition" > "Tables", filter for the Name =sp_ui_formatter, open it, scroll on the bottom till "Related Links" and click on "Show List" link.

One more way to open list view of the table would be opening URL https://<instance>.service-now.com/sp_ui_formatter_list.do

Biddaum · ‎12-14-2020

Thanks for trying to help on this, I know how to get to the table and I can select "new" in the table, but it doesn't come up the same as shown in the original post and I can't see where to link the two.

Surabhi5 · ‎07-12-2021

Hi Rahul,

I have a similar requirement where i have created a button on a catalog item. I can create a widget but how and where to add the functionality of the button in that widget. I am using a script include and UI Macro script to fetch the data from an attachment(.csv file) and get it displayed in multirow variable set. where do i define that functionality in the widget.

Have posted the question on below thread, please see if you can check it once and suggest how should i proceed with it. Any suggestions would be really helpful.

https://community.servicenow.com/community?id=community_question&sys_id=aece357cdbd1f850030d443039961908

Regards,

Surabhi

Surabhi5 · ‎07-12-2021

Hi Bidduam,

Were you able to get a solution for this. I have a similar requirement and any help would be really appreciated.

Regards,

Surabhi