This post applies to Sitecore 5.3
It's really quite logical -
if you're writing your own wizards for sitecore they always look better if they are real sitecore wizards, so here's a quick tutorial on how to make your own.
We're gonna go thru this in
5 steps:
- Create a custom wizard sheer ui / xaml code
- Create the CodeBeside class for our wizard
- Create a Command that we can later use to launch it with
- Edit the Web.Config and Commands.Config file
- Create a context menu extension that launches our wizard
Still interested? well, let's start then!
Step 1: Wizard XML code
Create a folder somewhere beneath
\sitecore modules\shell where you're going to store the code to your new wizard. The sheer ui / xaml code for the wizard is built using Sitecores
WizardForm, WizardFormFirstPage, WizardFormPage & WizardFormLastPage controls so it'll look great and take advantage of all the existing features they provide, like intro & exit pages, navigation, events and so on.
here's the code:
<?xml version="1.0" encoding="utf-8" ?>
<control
xmlns:def="Definition"
xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<ExampleWizard>
<WizardForm
CodeBeside="Interfolio.Examples.ExampleWizardForm,Interfolio.Examples">
<WizardFormFirstPage
ID="FirstPage" Icon="People/48x48/user1.png">
<Border
Class="scWizardWelcomeTitle">
<Literal Text="Example
Wizard"/>
</Border>
<Literal Text="This wizard
will help
you:"/>
<ul>
<li>
<Literal
Text="Create your own
wizard."/>
</li>
<li>
<Literal
Text="Understand the sitecore
wizard."/>
</li>
</ul>
</WizardFormFirstPage>
<WizardFormPage
ID="WizardPageOne" Header="Page 1" Text="Select one of the available options.
When done, click next to continue."
Icon="People/48x48/user1.png">
<WizardFormIndent>
<GridPanel
ID="FieldsAction" Columns="2" Width="100%"
CellPadding="2">
<Literal Text="I want to.."
GridPanel.NoWrap="true" Width="100%" />
<Combobox
ID="SelectActions" GridPanel.Width="100%"
Width="100%">
<ListItem ID="create" Header="Keep looking at
this example" Value="newsite" />
<ListItem ID="edit" Header="Do
something, somewhere else" Value="editsite" />
<ListItem
ID="delete" Header="Yeah, you get the idea.." Value="deletesite"
/>
</Combobox>
</GridPanel>
</WizardFormIndent>
</WizardFormPage>
<WizardFormPage
ID="WizardPageTwo" Header="Page 2" Text="Specify some information. Name needs to
be set before moving on. When done, click next to continue."
Icon="People/48x48/user1.png">
<WizardFormIndent>
<GridPanel
ID="FieldsInformation" Columns="2" Width="100%"
CellPadding="2">
<Literal Text="Name:"
GridPanel.NoWrap="true"/>
<Edit ID="Name" Width="100%"
Change="OnNameChanged" GridPanel.Width="100%"/>
<Literal
Text="Location:" GridPanel.NoWrap="true"/>
<Edit ID="Location"
Width="100%" GridPanel.Width="100%"/>
<hr GridPanel.ColSpan="2"
/>
<Literal Text="URL:"
GridPanel.NoWrap="true"/>
<Edit ID="URL" Disabled="true"
Width="100%" GridPanel.Width="100%"/>
<hr GridPanel.ColSpan="2"
/>
<Literal Text="Checks:" GridPanel.NoWrap="true"
/>
<Checkbox ID="Check1" Header="Check one"
/>
<Literal Text="" GridPanel.NoWrap="true"
/>
<Checkbox ID="Check2" Header="Another check"
/>
</GridPanel>
</WizardFormIndent>
</WizardFormPage>
<WizardFormPage
ID="WizardPageThree" Header="Page 3" Text="More things to do here. When done,
click next to continue."
Icon="People/48x48/user1.png">
<WizardFormIndent>
<GridPanel
ID="FieldsOthers" Columns="2" Width="100%"
CellPadding="2">
<Literal Text="Something else:"
GridPanel.NoWrap="true"/>
<Edit ID="SomethingElse" Width="100%"
Change="OnNameChanged" GridPanel.Width="100%"/>
<Literal
Text="More text:" GridPanel.NoWrap="true"/>
<Edit ID="MoreText"
Width="100%"
GridPanel.Width="100%"/>
</GridPanel>
</WizardFormIndent>
</WizardFormPage>
<WizardFormLastPage
ID="LastPage"
Icon="People/48x48/user1.png">
<Border>
<Literal
Text="The wizard has
completed."/>
</Border>
</WizardFormLastPage>
</WizardForm>
</ExampleWizard>
</control>
Step 2: Wizard C# code
Now, for our wizard to even show and do, well, anything, we need to define it and handle some example events, like validating a Edit control and enable/disable buttons. The class is based on sitecores own
WizardForm in order to get all the already-existing (and
great) functionality.
here's the code:
namespace Interfolio.Examples
{
public class ExampleWizardForm :
WizardForm
{
// specify each control we need to access from the xml as
'protected' and it'll be available
protected Edit Name;
public
ExampleWizardForm()
{
}
protected override void OnLoad(EventArgs
e)
{
base.OnLoad(e);
if (!Context.ClientPage.IsEvent)
{
// handle
initial code here
}
}
protected void OnNameChanged()
{
// check
to make sure the name Edit is not empty (in a negative boolean style)
bool
IsOk = (this.Name.Value == null) (this.Name.Value.Length ==
0);
base.NextButton.Disabled = IsOk;
if
(IsOk)
{
Context.ClientPage.ClientResponse.Focus("Name");
}
Context.ClientPage.ClientResponse.SetReturnValue(true);
}
protected
override void ActivePageChanged(string page, string
oldPage)
{
base.ActivePageChanged(page, oldPage);
if (page ==
"WizardPageTwo")
{
// make sure next button is disabled unless the Name is
entered
this.OnNameChanged();
}
else if (page ==
"LastPage")
{
base.BackButton.Disabled = true;
}
}
protected
override bool ActivePageChanging(string page, ref string newpage)
{
if
(newpage == "LastPage")
{
// disable the back button since we've finished
the wizard
base.BackButton.Disabled = true;
// return the boolean status
of our 'commit' method
return this.WhatWeWantToDo();
}
return
base.ActivePageChanging(page, ref newpage);
}
private bool
WhatWeWantToDo()
{
// really do something else here, this is just an
example..
return true;
}
}
}
Step 3: Command C# code
The purpose of this command is to make your newly created wizard launchable from pretty much anywhere you want. It is based on sitecores own Command.
here's the code:
namespace Interfolio.Examples
{
[Serializable]
public class OpenWizard
: Command
{
public OpenWizard()
{
}
public override void
Execute(CommandContext context)
{
// get the uri of our wizard by finding
the control using Sitecore's UIUtil
string controlUrl =
Sitecore.UIUtil.GetUri("control:ExampleWizard");
// broadcast the need to
show the wizard to the sitecore shell
Context.ClientPage.ClientResponse.Broadcast(Context.ClientPage.ClientResponse.ShowModalDialog(controlUrl),
"Shell");
}
public override CommandState QueryState(CommandContext
context)
{
return base.QueryState(context);
}
protected void
Run(Sitecore.Web.UI.Sheer.ClientPipelineArgs args)
{
}
}
}
Step 4: Config Additions
Before using our code anywhere we need to tell Sitecore that it's available, which is normal since it's new code.
In the
Web.Config file, locate the section
<controlsources> and add the source folder of your new code:
<source mode="on" namespace="Interfolio.Examples"
folder="/sitecore modules/shell/interfolio/Examples" deep="true">
</source>
In the
Commands.config file (located at
\App_Config), add the following:
<command name="interfolio:examplewizard"
type="Interfolio.Examples.OpenWizard,Interfolio.Examples" />
Save both files.
As you may have noticed the example is located in interfolio\Examples, this is just where i stored it for this tutorial, you can have any folder you wish, just make sure that if you change the namespace or assembly or folders that you refactor the change onto the rest of your code.
Step 5: Launching the wizard
Now all the code is complete and we only need to have a way of launching it within sitecore. While this approach isn't really that durable unless your wizard is
extremely generic it's still an easy way to quickly try something you've done.
- Open Sitecore in your browser, login and switch database to 'core'
- Navigate to Sitecore/System/Context Menus/Default and duplicate the 'New' item and name it 'ExampleWizard'
- Change the fields DisplayName to 'ExampleWizard' and Message to 'interfolio:examplewizard(id=$Target)'
- Save it and switch back to the 'master' database
That's it!
If you've followed these steps correctly you should by now be able to right click an item in the Content Editor and click ExampleWizard which will launch your newly created wizard.
Take care,
P.
