https://serviceportal.io/embedding-widgets-in-service-catalog/


In Service Catalog you have the ability to embed a UI Macro as a variable in your catalog items or record producers. UI Macros are based on Jelly and as such they will not render in Service Portal. To work around this, you can now embed a widget for your UI Macro variables when displaying your catalog in Service Portal.

In this example, we’re going to create three variables, and make the third variable a widget that will display the sum of the other variables. Create a catalog item with the following variables:

  • Single Line Text: “value1”

  • Single Line Text: “value2”

  • Macro: “results”

On the “results” variable record, you will see a “Default Value” tab, with a reference to the Widget. Create and select a new widget called “Embedded Results”, and use the following values:

HTML:

Client Script:

Now when you view this catalog item in the portal, the embedded widget will display the results of the two variables:

screenshot-2016-10-28-12-14-31

Note, that the “field.change” event fires when the field loses focus, so you will have to tab or click out of the field to see the results.