Can tiles be used to present choices in ServiceNow (in Catalog builder)?

[Johan van den H]

Is it possible to create a form by using Catalog Builder that let's the client choose from a set of tiles containing different options?

I have provided an example below from a Dutch internet provider.
The client can choose the internet speed (internetsnelheid) and the possible options are presented in tiles.

Can something like that be realised in ServiceNow?
And if so, can it be realised in Catalog Builder so we can delegate the editting of the content of the tiles outside our ServiceNow development team?

[Dr Atul G- LNG]

Hi @Johan van den H 

Nice and interesting use case. As of now in OOTB these layouts are not possible, we can create individual catalogue items and users can order from them. Or might be a single catalogue item and this option can be a choice in that item, you can use the kind of order guide for this. Need to explore more but this is what is available now.

[ChrisBurks · Accepted solution]

Hi @Johan van den H 

It is possible to make the cards in your screenshot with OOTB (out of the box) components. The key to it though is using the variable type "Custom".  This could be a UI Macro (native UI), Widget ( service portal)  and possibly even a Macrocomponent that might be for UI Builder (not sure on the macrocompnent as I have never used that one).

The widget will talk to the actual catalog item so that the value gets captured. The widget can access the catalog variables via $scope.page.g_form

Reference: https://docs.servicenow.com/bundle/washingtondc-platform-user-interface/page/build/service-portal/co...

Here is a working mock of it in Service Portal. Okay, granted it's not as pretty as yours but I just put enough styling to show the concept.

That all said, for some reason in the Catalog Builder the "Custom" type isn't a choice so you would have to either get started with Catalog Builder and then modify in the regular way or just start with the regular way.

[Johan van den H]

Thank you @ChrisBurks for your complete info, we are going to look into this further.