From time to time there are real gems waiting to be discovered in the deep abyss of smartUI. Today we’ll take a look on the Wizard control.
Example
Lets look at an example.
Hidden inside the permission explorer, there is an option to assign a new user with some permissions to a document.
When you select a document, you can select a user or a group to add to this document. This is the first page of our wizard. This control directly calls the MemberPickerWizard with this two steps.
Step 1: Select user or group
Step 2: Assign permissions
Nice thing.
The code definition
Lets look at the member picker wizard:
var membersPickerDialog,
dialogClass = "cs-permission-group-picker",
dialogTitle = "Add users or groups",
displayName = "Users and Groups",
context = new PageContext(),
connector = context.getObject(ConnectorFactory),
node = new NodeModel({id: 37474}, {connector: connector}),
startLocations = ['all.members', 'member.groups'];
membersPickerDialog = new MembersPickerDialog({
command: 'adduserorgroup',
context: context,
connector: connector,
dialogClass: dialogClass,
displayName: displayName,
dialogTitle: dialogTitle,
startLocation: 'all.members',
adduserorgroup: true,
addButtonLabel: lang.AddButtonLabel,
startLocations: startLocations,
nodeModel: node,
});
membersPickerDialog.show();
Almost immediately the memberPickersDialog is instantiated and shown:
As we can see, here is our wizard.view.js used as reference.
The wizard itself is wired inside the prototyype:
First, the steps are created in _createWizardSteps (see below).
All of these steps are used as argument on instantiating the wizard. Then the wizard listens to some events (“save:result” and “add:member”) and processes them.
Thats all. Easy.
The Step Defnitions
Steps are defined inside the _createWizardSteps method:
The object step1 defines the selection of the users, the object step2 (below) defines the permission level.
All steps have in common:
- a title
- headers (with the NLS language sting, a class and an id)
- a next Button (with next button label)
- and, of course, a view defining the content of the wizard step.
At the end, the defined steps are returned as array:
return [step1, step2, step3];
So you`ll find that under
csui/controls/wizard/wizard.view
Happy wizarding