How to Create a Wizard-Style Multi-Step Form in Service Catalog with Next/Previous Buttons?

[HarikaNakhate]

Hi everyone,
I'm working on enhancing the user experience in the Service Catalog by creating a wizard-style form where users can navigate through questions step-by-step using Next and Previous buttons.
To achieve this, I created a custom widget in the Service Portal and tried embedding it into the catalog item using a variable of type "Custom" and "Custom with Label". However, the widget is not rendering or functioning as expected within the catalog item.

Any guidance, examples, or best practices would be greatly appreciated!

[Omkar Kumbhar]

Hello @HarikaNakhate ,

You can try using UI macro.

Add Widget to a catalog item using a Macro variable.

Below is sample script which you can write in UI macro

<g:ui_macro name="wizard_form_macro">
<div id="wizard-form">
<div ng-show="step === 1">


<button ng-click="nextStep()">Next</button>
</div>
<div ng-show="step === 2">
<h3>Step 2</h3>

<button ng-click="prevStep()">Previous</button>
<button ng-click="submitForm()">Submit</button>
</div>
</div>

<script>
var c = $scope;
c.step = 1;
c.formData = {};

c.nextStep = function() {
c.step++;
};
c.prevStep = function() {
c.step--;
};
c.submitForm = function() {
alert("Submitted: " + JSON.stringify(c.formData));
};
</script>
</g:ui_macro>

[HarikaNakhate]

Thank you for your guidance on using a UI Macro with a catalog item. I followed the steps and created a variable of type Custom, added the macro name, and tested it in the Service Portal. However, I'm still not able to get it working as expected.

I might be missing something in the setup or the macro configuration. Could you please help me understand what I might be doing wrong or guide me through the correct steps?

[JackieZhang]

Try Playbook model

[HarikaNakhate]

Can you provide me more details.