Add SP widget to UI 16 form

Stefan Reichelt
Tera Guru
Tera Guru

Hi Community,

I'd like to implement a Service Portal widget into a native UI form (Incident, for example). I already created a dummy UI macro + formatter as described in the documentation, but now I'm stuck because I have no idea how the UI Macro should look like. I have no experience with Jelly.

Can please anyone give me a hint?

In the end, I want to get the advanced attachment widget into the form as shown here (last picture):

https://medium.com/@pishchulin/advanced-attachment-management-in-servicenow-f15246e7f785

Best regards,

Valen

1 ACCEPTED SOLUTION

I found it! The solution is surprisingly simple yet impressive. The author even refers to the widget mentioned above.

https://jace.pro/post/2020-03-25-sp-widget-on-ui16/

View solution in original post

3 REPLIES 3

Geetanjali Khy2
Mega Guru

Hi Valen,

 

Basically Jelly scripting is a kind of HTML tags. It is easy to understand.

 

Please refer below link, it will help you to understand how UI macro looks like.

It will also help you, how to use the UI macro on incident form.

https://dxsherpa.com/blogs/ui-macro-in-servicenow/

 

OR you can refer below video, it shows one simple example of how to do Jelly scripting in UI Macro.

https://www.youtube.com/watch?v=yaXQ_irlkYI

 

Kindly mark the answer as Correct and Helpful if this answers your question.

Thank You.

 

Regards,

Geetanjali Khyale

Thanks! These sources will definitely help me with my first steps. It looks really easy, indeed, but now I have to understand some ServiceNow UI specifics.

Do you also know a link where they explain how to embed a SP widget in particular? I'm not sure how the reference should look like. Do I need an iframe? And how should the URL look like?

I found this link, but I think I'm missing out something very fundamental.

With some dummy text, I can at least see that my macro is embedded. But it doesn't load the widget:

<?xml version = "1.0" encoding = "utf-8" ?> 
 <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> 
 <tr> 
    <td colspan="2">
		<widget id="elin-file-manager-v1">Dummy text</widget>
    </td> 
 </tr> 
 </j:jelly>

Result:

find_real_file.png

I found it! The solution is surprisingly simple yet impressive. The author even refers to the widget mentioned above.

https://jace.pro/post/2020-03-25-sp-widget-on-ui16/