Maybe you’ve run into this before. You move an email process to ServiceNow. You build your own app with record producers to collect structured input from requesters, and a workspace where fulfillers handle the requests.
Then a new requirement pops up: while working on a request, the fulfiller needs to start a new request using data from the current one. Sometimes the wrong record producer was chosen by the requester. Other times, it’s an add-on to the first request. Either way, the fulfiller wants to open a different record producer directly in the workspace, see it in a modal, and have common fields prefilled with values from the original request.
And here’s the problem.
ServiceNow has a Catalog Item component that can show a record producer on a Next Experience page. But there’s no built-in way to pass variable values into that component. You can hack your way around it if you dig deep enough, but that’s not a good or supported approach. So, realistically, there’s no proper way to do it.
If this situation sounds familiar, here’s the good news: there is a solution. Upgrade to Zurich.
With the Zurich release, the Catalog Item component has been improved and now includes some new properties. One of them is variableValues, which lets you pass variable values directly into the component.
At the time of writing, the developer site doesn’t yet mention this update, and the Horizon design system site doesn’t list the Catalog Item component at all. But you can find some information about this new feature in the docs. https://www.servicenow.com/docs/bundle/zurich-servicenow-platform/page/product/service-catalog-manag...
Let’s jump straight into UI Builder and look at an example. I created a new empty page and added the Catalog Item component.
And there it is, on the component’s configuration tab you can now see the new variableValues property.
For this example, I used the Apple iPhone 13 Pro catalog item from the demo data.
To set a variable’s value, you need its name. In this case, there are five variables available.
To test it with the replacement option I used the name “is_this_a_replacement_for_a_lost_or_broken_iphone” as key. For the value I set “yes”.
After applying this configuration, you can immediately see the variable value change in the catalog item preview inside UI Builder.
But we’re not done yet. Right now, this is a static setup. What we really need is a dynamic one. To make it dynamic, we have to use data binding to pass the data into the component.
For this demo, I added a Textarea component to the page. Whatever you type into the textarea should then be stored in a client state parameter.
This client state parameter is then used in the data binding for the variableValues property.
Finally, I added an event handler to the textarea.
It listens to the Text entered event and updates the client state parameter with the input.
The Set client state parameter event handler populates the variables parameter with the fieldValue from the event payload.
That’s it. Text entered in the textarea is passed to the Catalog Item component, and the variables are populated with the provided values. At least, as long as the syntax is correct and the variables exist.
Of course, the initial use case is a bit different from this example. But with what we’ve covered here, you can build that scenario without much trouble. Maybe I’ll cover it in another article.
The key takeaway is this: with the Zurich release, we can now use the Catalog Item component and dynamically populate variable values. It doesn’t matter if the data comes from the user or from a record, it works the same way.
