Service Catalog Item Wizard in Service Portal

We’ve had a number of clients ask about structuring catalog item forms as more of a “wizard” that only renders one section at a time. After thinking about it for a while, I realized that I could use the GlideForm API to programmatically hide and show the different sections (containers). So over the past couple of weeks, I’ve been working on a new widget that simply interacts with the out-of-box catalog item widget, and uses the API’s to add all of the wizard-like capabilities.

I think it turned out pretty cool, it’s fully themeable, and best of all, it does not require cloning of any widgets. I still have a few more features to add, and I’m also considering adding an accompanying library of Variable Sets that provide a more graphical UI than the out-of-box catalog variables.

If all goes well, I may end up including the widget in our RocketFuel library of widgets, so if you’re interested in adding some wizard-like capabilities to your portal, feel free to contact me and we can schedule a demo.

I’d love to hear what you guys think in the comments below. Is this a useful widget? Does this improve the user experience of the service catalog item form?

26 comments

  1. This looks amazing. I really like the drag and drop attachment functionality. Was the custom widget difficult to make?

  2. Does the attachment widget also support pasting image from clipboard by ctrl+v?
    If yes, how is it done?

    1. We have that on the list of features to add. I don’t think it should be that difficult to add, but not sure about cross-browser support.

  3. Very nice Nathan, and definitely a user experience that would work really well for a number of our current Catalog Items. Can you use multiple containers within each step, or is strictly one container per step?

    1. Since we’re just leveraging the API’s, we have to work within the confines of the form variables. However, if ServiceNow adds support for nested containers, then we would be able to support it.

      1. It wasn’t really nested containers that I was thinking of, It was a case of wanting multiple containers within a single step of the wizard (e.g. if I needed to use both a single column layout and a 2-column layout within the same step)

  4. Very nice widget, we have the same need in our portal implementation, would be great to see it when missing features will be added, it seems a ver good work and a useful widget.

  5. Hi, I know I’m missing something small, but how are you driving the record producer with the previous and next buttons?

  6. Hey Nathan,

    Great article. Thank you very much for it. I’m very inspired by your insights on Portal.

    About this wizard, I’ve been wondering how you dealt with the mandatory fields. Do you need to keep setting Mandatory false and true whenever you want to hide a particular section?

    Keep up the awesome work.

    Cheers,
    Felipe

    1. Hi Felipe. Correct, the script keeps track of all mandatory fields and state changes, and then temporarily sets mandatory to false in order to hide the section.

      1. Hi Nathan .. great article, especially interested in how you managed to control the mandatory fields specifically for the individual sections .. any insights would be very much appreciated. Thanks Robin

    1. I’m sure it can, but there are many use-cases where an interactive form is going to be a superior experience over a conversational chatbot that can only ask one question at a time. The virtual agent is great for very simple requests, but struggles for more complicated tasks.

Leave a Reply to Robin Cancel reply

Your email address will not be published. Required fields are marked *