Wizard navigation via javascript in skuid V2 12.1.1

Hi Spencer! In V2, we’ve transitioned to having all supported / public Component API’s be exposed through each component’s “CPI” (component programming interface — cause they’re not applications, they’re components :) 

For all V2 Components, supported API’s can be found by calling “getCPI()” on a Component. This returns an object containing supported methods that can be invoked on a given component instance.

So the first step is, as in V1, to get a reference to the Component that you’re trying to interact with, in your case, a Wizard. Once you’ve got the Wizard’s Unique Id (which can be found and modified by going to the Wizard’s Properties), you can then navigate to steps using the “navigate” CPI method:

skuid.component.getById("MyWizard").getCPI().navigate("step2");


Or you can use the shortcut method, skuid.$C, for accessing a component by it’s id:

skuid.$C("MyWizard").getCPI().navigate("step2");


This will work from within JavaScript Resources defined in your V2 Page, e.g. from a Snippet.

If you want to perform this from the Chrome JavaScript Console, e.g. for testing / development, you can use the Debug API (Do NOT use this in Snippets — this is ONLY for use in the JavaScript Console in your browser!)

skuid.debug.component(“MyWizard”).getCPI().navigate(“step2”);