请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

Add "placeholder" attribute to Text Field in Dynamic Forms


Orchard CMS is built on a powerful architecture that provide us rich ways to extend it, and to add some missing features as needed.

"PlaceHolder" Attribute

HTML 5, has a very useful attribute called "placeholder", it is used to display a watermark text on the input field when it's empty, but text field and text area elements in dynamic forms module don't have this attribute out of the box, and we will learn how to add such attribute in this post.

Add New Editor Form "PlaceHolderForm"

First thing we will do, implement a new editor form for "placeholder" attribute, to be able to attach it to text field and text area editors, this form will have a single tokenized input field, to enter the attribute value, as following:
public class PlaceHolderForm : Component, IFormProvider {    public void Describe(DescribeContext context) {        context.Form("PlaceHolder", factory => {            var shape = (dynamic)factory;            var form = shape.Fieldset(                Id: "PlaceHolder",                _Value: shape.Textbox(                    Id: "PlaceHolder",                    Name: "PlaceHolder",                    Title: "PlaceHolder",                    Classes: new[] { "text", "medium", "tokenized" },                    Description: T("The value of placeholder attribute.")));            return form;        });    }}

Implement New "TextFieldElementDriver"

Drivers in Orchard CMS used to transport data to a template for rendering, called "Shape", and we can implement multiple drivers for the same item to render more shapes from same data source in different zones.
Now, we will implement new driver for "TextField" element, called "TextFieldElementDriver", then override "OnBuildEditor" method to attach the form "PlaceHolderForm", which was created on the previous step to the output editor, and override "OnDisplaying" method to read attribute value from the element data property, then add a new attribute to the rendered element shape.

public class TextFieldElementDriver : FormsElementDriver<TextField> {
    private readonly ITokenizer _tokenizer;

    public TextFieldElementDriver(        IFormsBasedElementServices formsServices,         ITokenizer tokenizer) : base(formsServices) {
        _tokenizer = tokenizer;
    }

    protected override EditorResult OnBuildEditor(        TextField element,         ElementEditorContext context) {
        var placeholderEditor = BuildForm(context, "PlaceHolder");
        return Editor(context, placeholderEditor);
    }

    protected override void OnDisplaying(        TextField element,         ElementDisplayingContext context) {        context.ElementShape.ClientValidationAttributes.Add("placeholder",             _tokenizer.Replace(element.Data["PlaceHolder"], context.GetTokenData()));
    }}
Then you can implement new driver for text area field to add the same attribute to it using same "PlaceHolder" form.

Note

You must have noticed that we used the "ElementShape.ClientValidationAttributes" instead of "ElementShape.Attributes", which is the right way to add attributes to shapes in orchard, but we are currently forced to use this workaround because there is an issue in orchard, and you can see issue #6812 for more information.

Attachments




作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。