Saving Catalog Widget Data Automatically

A while ago I wrote an article on how to make better UI macros by adding an input element on the form with certain attributes.

Now that we are moving more and more to the new Service Portal, we need a new way to do the same trick on the portal with widgets (UI Macros are not supported on the portal). The good news is it’s still possible with relatively little code.

Firstly, in your HTML section of your widget add the line:

<input id="sp_formfield_IO:{{c.variable_sys_id}}" value="{{c. variable_data}}" style="width:50%" name="IO:{{c.variable_sys_id}}" class="form-control ng-scope"/>  

As you can see there’s a few of handlebars {{ }} in there, so to support this, you’ll need to add a few of lines in your client script portion of the widget.

Firstly, add this line right at the top of the client script function to create the variable c.variable_sys_id. This is an out of the box property which stores the variable sys_id and is required to be used as the input field ID and name attribute.

c.variable_sys_id = $;

Secondly, we need to set the value of variable and the field. To do this, these two lines of code will need to be added wherever you’re updating the data that you want to save it back to the form:

c.variable_data = "This is the data that will be stored"
$"variable name", c.variable_data);

And that’s all there is to it. What you’ll notice is now you can use g_form.getValue and g_form.setDisplay functions on the widget as if it was a normal variable. You can also use UI policies to show/hide the widget without complex scripting.

What you’ll also notice is the value will automatically be stored to the relevant variable table on submission (question_answer for record producers and sc_item_option for catalog items). This is very useful as it doesn’t need an additional variable created to store the value. Also, you can then reference this data in business rules using the standard current.variables…


  1. Hello! Nice article. I am wondering though if there is a missing section of code between the following text on your article:
    “Firstly, in your HTML section of your widget add the line:
    As you can see there’s a few of handlebars {{ }} in there, so to “


  2. This is great Ahmed. Another good tip is that if you use ng-blur events on your widget inputs, those run before an onSubmit function (even if the thing that takes your focus off an input is clicking Submit). So you can always convert your widget data object to JSON and store the value before an onSubmit happens.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.