Creating a Wizard for a Module in SugarCRM 7

Continuing on our journey of creating a module from scratch in SugarCRM 7, we left off last week with getting the skeleton structure in place. Basically it was a "Hello World" implementation. This week we will start to build out the controller to handle stepping through various steps of a wizard.

Defining the Steps

For the purpose of figuring out how to step through a wizard we will create 3 steps similar to:

Creating a Header and Footer

Notice the "{{> setup.header}}" line. This is a Handlebars partial which allows us to basically embed templates within another template. We will register the header and footer partials in our controller. First, here is what those partials look like:

A Basic Wizard Controller

Rather than break down each code chunk, I'll just post the whole controller up to this point.

We start with the a variable to track which step that we are currently on. Then our events are defined which tell the controller which function to call when our buttons are clicked. Next up, the header/footer get registered when the page loaded. In the _render() function we define what to do each time we click through to the next step. Right now, just the status bar gets updated and the current step displayed.

The rest of the controller handles stepping through the wizard. If an .hbs doesn't exist it'll display an error. If there isn't a previous or next step defined in the steps object then it doesn't move the user on.

Not all wizards are simple 1-2-3 step processes. Many times there will be a need for branching based on some user input. For example, you may want to allow a user to skip several steps in the process. We will cover in the next post how to handle such a scenario.

Update

Jeff Bickart put together a nice video about how to do this: