HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Editor templates

Describes templates for the editor.

If you want further control over how the user interface is rendered, you can add an editor template for your class by creating a partial MVC view, and name the view as your model, such as {nameOfMyModelClass}.ascx. The application can look for the view in two places:

  • If your criterion is part of a registered module, the first search path is:
    {yourModuleRoot}/Views/Shared/EditorTemplates/{nameOfMyModelClass}.ascx
  • If the view is not found in the module folder or if your criterion is not part of a module, the next search path is:
    ~/Views/Shared/EditorTemplates/{nameOfYourModelClass}.ascx

In your editor template, you can import the EPiServer.Personalization.VisitorGroups to the DojoEditorFor method. The DojoEditorFor method creates a widget that handles loading and saving of values from/to a specified model class property. DojoWidgetFor discovers and makes use of any DojoWidget attribute settings for model class properties. If you do not use DojoWidgetFor to create edit controls for your properties, you need to handle the loading and saving of values yourself.

The following editor template shows an example using the DojoWidgetFor method, where two different overloads are used. The first call only specifies the name of the model class attribute; the second call uses the overload with the most number of parameters. A full range of overload exists between these two extremes.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<YourModelClass>" %>
      <%@ Import Namespace="EPiServer.Personalization.VisitorGroups" %>
      <div>
        <span>
          <%= Html.DojoEditorFor(p => p.ModelClassProperty1)%>
        </span>
        <span>
          <%= Html.DojoEditorFor(
            p => p.ModelClassProperty2, 
            new {
                  @class = "WidgetCssClass", 
                  @someOtherHtmlAttribute = "value" 
                },
            "WidgetLabelText",
            "WidgetLabelCssClass",
            DojoHtmlExtensions.LabelPosition.Right)
          %>
        </span>
      </div>

Custom script

The VisitorGroupCriterion attribute has a ScriptUrl property, where you can specify a script file that is used when creating the settings user interface. The ScriptUrl should contain a JavaScript object that overrides one or more of the following methods:

  • createUI() – Called to create the user interface for the criterion.
  • validate – Called when the user tries to save a visitor group.
  • getSettings – Called when the visitor group is saved to gather the data to save.
  • uiCreated – An event that is raised when the user interface has been created.

The following script shows an example where these methods are overridden:

(function() {
                  return {
                           // Add an extra div to the layout.
                           // prototype.createUI is called to make sure
                           // that the autogenerated elements are added too.
                           createUI: function(namingContainerPrefix, container, settings) 
                             {
                               this.prototype.createUI.apply(this, arguments);
                               var element = dojo.create('div', { id: namingContainer + 'MyDiv' });
                               element.innerHTML = "This is MyDiv";
                               dojo.place(element, container);
                             },
                           // Add a validation error message if the value of MyInt is > 1000.
                           // prototype.validate is called so that that we don't hide errors
                           // added by the default validators.
                           // See also Client Side Validation to see how you can provide
                           // localized strings - like error messages.
                           validate: function(namingContainer) 
                             {
                                var validationErrors = this.prototype.validate.apply(this, arguments);
                                var myIntWidget = dijit.byId(namingContainer + 'MyInt');
                                if (myIntWidget.value > 1000) 
                                  {
                                    validationErrors.Add('Error!', myIntWidget.domNode.id);
                                  }
                                return validationErrors;
                              },
                            // Multiply the value of MyInt by 10 before saving.
                            getSettings: function(namingContainer) 
                              {
                                var myIntValue = dijit.byId(namingContainer + 'MyInt').value;
                                // Attach eventhandler for onmouseover.
                                // The settings parameter passed to the function contains
                                // the model properties and values. It is not used in this
                                // example but you could, for example, retrieve the current
                                // value of MyInt via settings.MyInt.
                                uiCreated: function(namingContainer, setting) 
                                  {
                                    var myIntWidget = dojo.byId(namingContainer + 'MyInt');
                                    dojo.connect(myIntWidget, 
                                                 'onmouseover', 
                                                 null, 
                                                 function() { alert('You hovered over the MyInt field.');}
                                                );
                                  }
                              }
                }
    )();