Text box width example

Shows how to let editors control the maximum input length through admin view using Property Settings.

The text editor in edit view will have limited length configured in the Custom Settings tab.

First you need to create a settings class, CustomStringSettings. It has a Width property that will be used to control the input max length. The class requires the associated UI control for editing model properties, CustomStringSettingsControl. The control is defined in 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/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 we 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, we 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;
                  }
              }
          }
      }

Updated 5 months ago

What’s Next

Context-sensitive components