Documentation Center

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

  1. 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 slideViewName is a string containing the full name of the view, for example, Tridion.Web.UI.Editors.MyEditor.Views.SiteWizard.Views.MyCustomOptionsSlide
    • the value of id uniquely identifies this slide
    • the value of cssClass identifies the CSS class associated with this slide (optional)
    • the value of view refers to the registered view interface
    • the value of title is the title of the slide. In this example, the string is a localized resource taken from the resource string repository.
    • the call to insertSlideAfter determines after which slide in the wizard the new slide will appear. (You can also use insertSlideBefore.)
    • the value of otherSlide is a string value identifying the string before or after which the new slide will appear. By default, otherSlide can have one of the following values (use Tridion.Cme.Views.SiteWizard.getSlides() to get a collection of all slides):
      • NameSlide
      • ContentPublicationSlide
      • SiteTypeSlide
      • TopologyManagerMappingsSlide
      • ExperienceManagerOptionsSlide (if Experience Manager is set up)
      • SummarySlide
  2. 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 (MyCustomOptionsSlide in our example). The class should extend the SDL.UI.Views.WizardSlide class, and its constructor should take an HTMLElement and 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");
    }
  3. 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 (MyCustomOptionsSlide in 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";
        }
      }
    }
  4. 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 summary dictionary:
    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);
    }
  5. Declare the slide valid, so that the wizard can continue to the next slide:
    this.isValid(true);
  6. 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); where PublicationCreatedEventHandler is the name of your Event Handler), which allows you to check the session context with the key cme:CreateSite (defined as the const called AppdataCreateSite). 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
    
    }