Adding a slide to the Site Wizard
When you set up the Site Wizard to enable Web managers to create new sites quickly, you may want to add your own slides to the wizard to allow your users to supply, for example, metadata to apply to the new Publication that the Site Wizard creates. This task explains how to add a slide to the wizard, how to display some or all entered data in the wizard's summary screen, and how to hook up the slide's results to a back end for further processing.
Procedure
- Using the GUI API, define and register your slide:
SDL.Client.Resources.ResourceManager.load(slideViewName, function () { var customOptionsSlideDefinition = { id: "MyCustomOptionsSlide", cssClass: "mycustomoptions", view: slideViewName, title: Tridion.Utils.Localization.getSiteEditEditorResource("MyCustomOptions") }; Tridion.Cme.Views.SiteWizard.insertSlideAfter(customOptionsSlideDefinition, otherSlide); })where:- the value of
slideViewNameis a string containing the full name of the view, for example, Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views.MyCustomOptionsSlide - the value of
iduniquely identifies this slide - the value of
cssClassidentifies the CSS class associated with this slide (optional) - the value of
viewrefers to the registered view interface - the value of
titleis the title of the slide. In this example, the string is a localized resource taken from the resource string repository. - the call to
insertSlideAfterdetermines after which slide in the wizard the new slide will appear. (You can also useinsertSlideBefore.) - the value of
otherSlideis a string value identifying the string before or after which the new slide will appear. By default,otherSlidecan have one of the following values (use Tridion.Cme.Views.SiteWizard.getSlides() to get a collection of all slides):NameSlideContentPublicationSlideSiteTypeSlideTopologyManagerMappingsSlideExperienceManagerOptionsSlide(if Experience Manager is set up)SummarySlide
- the value of
- In the views module that contains your view (in our example, Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views), create the class for your custom slide's view (
MyCustomOptionsSlidein our example). The class should extend the SDL.UI.Views.WizardSlide class, and its constructor should take anHTMLElementand an SDL.UI.ViewModels.IWizardSlideSettings parameter:module Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views { eval(SDL.Client.Types.OO.enableCustomInheritance); export class MyCustomOptionsSlide extends SDL.UI.Views.WizardSlide { constructor (element: HTMLElement, settings: SDL.UI.ViewModels.IWizardSlideSettings) { super(element, settings, ViewModels.MyCustomOptionsSlide); } }; SDL.Client.Types.OO.createInterface("Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views.MyCustomOptionsSlide", MyCustomOptionsSlide); SDL.UI.Knockout.BindingHandlers.enableKnockoutObservableSettings("Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views.MyCustomOptionsSlide"); } - In the corresponding view models module, Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.ViewModels in this example, create the class for your custom slide's view model (
MyCustomOptionsSlidein our example). The class should extend the SDL.UI.ViewModels.WizardSlide class, and its constructor should take an SDL.UI.ViewModels.IWizardSlideSettings parameter:module Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.ViewModels { export class MyCustomOptionsSlide extends SDL.UI.ViewModels.WizardSlide { constructor (settings: SDL.UI.ViewModels.IWizardSlideSettings) { super(settings); // further constructor code. Using the data property of the settings parameter, // add key-value pairs for all data you want to store. this.data = settings.data; this.data.name = "Some name"; this.data.otherImportantData = "Other data"; } } } - To get entered or selected data to appear in the summary slide (last slide in the wizard before actual execution begins), add it to the
summarydictionary:constructor (settings: SDL.UI.ViewModels.IWizardSlideSettings) { super(settings); this.summary = { title: this.title(), values: [{ key: this.localize("views.sitewizard.mycustomoptions.name"); value: this.data.name }, { key: this.localize("views.sitewizard.mycustomoptions.otherImportantData"); value: this.data.otherImportantData }], }; this.data.summary().push(this.summary); } - Declare the slide valid, so that the wizard can continue to the next slide:
this.isValid(true); - To perform back-end processing of the entered data, you can create an Event Handler for the "save Publication" event (subscribe to this event using
EventSystem.Subscribe<Publication, SaveEventArgs>(PublicationCreatedEventHandler, EventPhases.Processed);wherePublicationCreatedEventHandleris the name of your Event Handler), which allows you to check the session context with the keycme:CreateSite(defined as theconstcalledAppdataCreateSite). The following example shows you how can extract and process such data:private static void PublicationCreatedEventHandler(Publication subject, SaveEventArgs e, EventPhases phase) { var session = subject.Session; if (!session.ContextData.ContainsKey(AppdataCreateSite)) return; var appData = (ApplicationData)session.ContextData[AppdataCreateSite]; var sessionData = new ApplicationDataAdapter(appData).getAs<Dictionary<string, string>>(); BluePrintContextConfiguration blueprintContextConfig; try { blueprintContextConfig = new BluePrintContextConfiguration() { CloneComponentsInContextPublication = sessionData["cloneComponentsInContextPublication"] == "true", ClonePagesInContextPublication = sessionData["clonePagesInContextPublication"] == "true", ComponentBlueprintContext = sessionData["componentContextPublication"], PageBlueprintContext = sessionData["pageContextPublication"] }; } catch (Exception ex) { return; } // process blueprintContextConfig }