Text box width example

3 min

The Custom Settings tab configures a limited length for the text editor in the edit view.

edit_property.png

First, create a settings class, CustomStringSettings. It has a Width property that controls the input max length. The class requires the associated UI control for editing model properties, CustomStringSettingsControl. Define the control in the PropertySettingUI attribute.

[PropertySettingsUI(typeof (CustomStringSettingsControl))]
public class CustomStringSettings: PropertySettingsBase {
  public
  const int DefaultWidth = 100;
  public int Width {
    get;
    set;
  }
  public override IPropertySettings GetDefaultValues() {
    return new CustomStringSettings {
      Width = DefaultWidth
    };
  }
}

The CustomSettingsControl must implement IPropertySettingsUI interface or derive from PropertySettingControlBase. In this example, the control has simple UserControl (CustomStringSettingsUI.ascx), which contains a textbox to read or write the Width property.

public class CustomStringSettingsControl: PropertySettingsControlBase {
  private Control _editControl;
  private CustomStringSettings Settings {
    get;
    set;
  }
  protected override void OnLoad(EventArgs e) {
    base.OnLoad(e);
    _editControl = Page.LoadControl("~/CustomStringSettingsUI.ascx");
    ((CustomStringSettingsUI) _editControl).Width = Settings?.Width ?? CustomStringSettings.DefaultWidth;
    Controls.Add(_editControl);
    EnsureChildControls();
  }

  public override void LoadSettingsUI(IPropertySettings propertySettings) {
    Settings = (CustomStringSettings) propertySettings;
  }

  public override void UpdateSettings(IPropertySettings propertySettings) {
    ((CustomStringSettings) propertySettings).Width = ((CustomStringSettingsUI) _editControl).Width;
  }
}

public partial class CustomStringSettingsUI: System.Web.UI.UserControl {
  public int Width {
    get {
      int width;
      if (int.TryParse(this.txtWidth.Value, out width)) {
        return width;
      }
      return CustomStringSettings.DefaultWidth;
    }
    set {
      this.txtWidth.Value = value.ToString(CultureInfo.InvariantCulture);
    }
  }
}

The settings class is used by StringProperty, and that is why you need to assign it to the class inheriting from PropertyString and then register it in PropertyControlClassFactory.

[EPiServer.Core.PropertySettings.PropertySettings(typeof (CustomStringSettings), true)]
public class CustomPropertyString: PropertyString {}

The registration can be done through InitializationModule.

[ModuleDependency(typeof (EPiServer.Web.InitializationModule))]
public class PlugInInitialization: IInitializableModule {
  public void Initialize(InitializationEngine context) {
    PropertyControlClassFactory.Instance.RegisterClass(typeof (PropertyString), typeof (CustomPropertyString));
    PropertyControlClassFactory.Instance.RegisterClass(typeof (PropertyLongString), typeof (CustomPropertyString));
  }

  public void Uninitialize(InitializationEngine context) {}
}

To reuse the Width setting, you need to prepare the EditorDescriptor for the string type. It will read the value from SettingsRepository and pass it on to the client widget.

[EditorDescriptorRegistration(TargetType = typeof (string), EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
public class CustomStringEditorDescriptor: EPiServer.Cms.Shell.UI.ObjectEditing.EditorDescriptors.StringEditorDescriptor {
  private readonly PropertySettingsRepositoryHelper _propertySettingsRepositoryHelper;
  public CustomStringEditorDescriptor(): this(ServiceLocator.Current.GetInstance < PropertySettingsRepositoryHelper > ()) {}

  public CustomStringEditorDescriptor(PropertySettingsRepositoryHelper propertySettingsRepositoryHelper) {
    _propertySettingsRepositoryHelper = propertySettingsRepositoryHelper;
  }

  public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable < Attribute > attributes) {
    base.ModifyMetadata(metadata, attributes);
    var propertyData = metadata.Model as PropertyData;
    if (propertyData != null && propertyData.SettingsID != Guid.Empty) {
      var wrapper = _propertySettingsRepositoryHelper.GetSettingsWrapper(propertyData.SettingsID, typeof (CustomStringSettings), attributes);
      var propertySettings = wrapper.PropertySettings as CustomStringSettings;
      if (propertySettings != null) {
        metadata.EditorConfiguration["maxlength"] = propertySettings.Width;
      }
    }
  }
}

textbox_width.png