Web Forms für Marketters (WFFM) HTML-Eingabe-Tag mit Platzhalter-Attribut

Question

Ich habe eine Anforderung, in der ich Sitecore WFFM zum Erstellen eines Formulars implementieren. Die Seite verfügt über HTML-Eingabe-Tags mit Placeholder-Attribut. Ich muss das WFFM SingleLineInput Feld zu einem Input-Tag mit Platzhalter-Attribut rendern. Was soll ich machen?

Ich weiß, dass die SingleLineText Klasse in der Sitecore.Form.Web.UI.Controls dll definiert ist.

Answer 1

Sie können dies erreichen, indem Sie SingleLineText mit einer zusätzlichen Eigenschaft erweitern, um den Text des Platzhalters zu speichern. Sobald die Eigenschaft vorhanden ist, müssen Sie die OnInit-Methode überschreiben und das Platzhalterattribut injizieren, wenn eines festgelegt ist. Hier

public interface IPlaceholderField 
{ 
    string PlaceholderText { get; set; } 
} 

ist die kundenspezifische Implementierung von SingleLineText

[ValidationProperty("Text")] 
public class SingleLineText : Sitecore.Form.Web.UI.Controls.SingleLineText, IPlaceholderField 
{ 
    [VisualCategory("Custom Properties")] 
    [VisualProperty("Placeholder Text", 2)] 
    [DefaultValue("")] 
    public string PlaceholderText { get; set; } 

    protected override void OnInit(EventArgs e) 
    { 
     // Set placeholder text, if present 
     if (!String.IsNullOrEmpty(PlaceholderText)) 
     { 
      textbox.Attributes["placeholder"] = PlaceholderText; 
     } 

     base.OnInit(e); 
    } 
} 

Schließlich müssen Sie ein neues Feld Postendefmitionsdokument unter /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/ erstellen und die Montage setzen Sie die Klasse oben zu verwenden. Ihre neue Platzhaltereigenschaft sollte in einer Kategorie "Benutzerdefinierte Eigenschaften" angezeigt werden, wenn Sie das Feld im Formular-Designer ausgewählt haben.

Answer 2

Ich habe den folgenden Code verwendet, um ein benutzerdefiniertes Feld zu erstellen. Und es funktioniert gut :)

internal class CustomType : SingleLineText 
{ 
    [VisualProperty("Placeholder", 100)] 
    [VisualCategory("Appearance")] 
    public string placeholderText 
    { 
     get; 
     set; 
    } 
    protected override void DoRender(System.Web.UI.HtmlTextWriter writer) 
    { 
     this.textbox.Attributes.Add("placeholder", this.PlaceholderText); 

     base.DoRender(writer); 
    } 

} 

Dann i erstellt gerade einen Feldtyp Artikel unter /Sitecores/system/modules/Web Forms für Marketer/Einstellungen/Feldtypen/Custom und eingegeben Montage und Klassen Details in der Artikel.

Funktioniert wie ein Charme ... !!

Answer 3

Wenn Sie MVC-Version von WFFM verwenden, müssen Sie folgende hinzufügen, wie in genehmigt Antwort erklärt

1- Erstellen Sie eine Klasse

public interface IPlaceholderField 
{ 
    string PlaceHolder { get; set; } 
} 

[ValidationProperty("Text")] 
public class SingleLineText : Sitecore.Form.Web.UI.Controls.SingleLineText, IPlaceholderField 
{ 
    [VisualCategory("Custom Properties")] 
    [VisualProperty("Placeholder", 2)] 
    [DefaultValue("")] 
    public string PlaceHolder { get; set; } 

    protected override void OnInit(EventArgs e) 
    { 
     // Set placeholder text, if present 
     if (!string.IsNullOrEmpty(PlaceHolder)) 
     { 
      textbox.Attributes["placeholder"] = PlaceHolder; 
     } 

     base.OnInit(e); 
    } 
} 



public class ExtendedSingleLineTextField : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField, IPlaceholderField 
{ 
    [VisualCategory("Custom Properties")] 
    [VisualProperty("Placeholder", 2)] 
    [DefaultValue("")] 
    public string PlaceHolder { get; set; } 

} 

2- Kopieren einzeiligem Text von /Sitecore/System/Module/Web Forms für Marketer/Einstellungen/Feld Typen/Einfache Typen/Einzeiliger Text zu /SiteCore/System/Module/Web Forms für Marketer/Einstellungen/Feldtypen/Benutzer Set Baugruppe, Klasse und MVC Typ

3-Erstellen Sie eine neue chtml Datei unter \ Views \ Formular \ EditorTemplates ane Name es ExtendedSingleLineTextField.cshtml sollte es denselben Namen mit dem Klassennamen (ExtendedSingleLineTextField)

@using Sitecore.Forms.Mvc.Html 
@using LendLease.Web.HtmlHelpers 
@model LendLease.Extension.Sc.WFFM.ExtendedSingleLineTextField 


@using (Html.BeginField()) 
{ 
    @*@Html.TextBoxFor(m => m.Value, new { placeholder = Model.PlaceHolder })*@ 
    @Html.ExtendedBootstrapEditor("value",Model.PlaceHolder,"",new []{""}) 

} 

Add sein ein HTML-Helfer, so können Sie Platzhalter injizieren Ich nannte es BootstrapEditorHtmlHelperExtension.cs

public static class BootstrapEditorHtmlHelperExtension 
{ 
    public static MvcHtmlString ExtendedBootstrapEditor(this HtmlHelper helper, string expression, string placeholderText, string inlineStyle, string[] classes) 
    { 
     var str = string.Empty; 
     var viewModel = helper.ViewData.Model as IViewModel; 
     if (viewModel != null) 
     { 
      var styleSettings = viewModel as IStyleSettings; 
      if (styleSettings != null) 
      { 
       str = styleSettings.CssClass; 
      } 
      if (string.IsNullOrEmpty(placeholderText)) 
      { 
       placeholderText = viewModel.Title; 
      } 
     } 
     return helper.Editor(expression, new 
     { 
      htmlAttributes = new 
      { 
       @class = (string.Join(" ", classes) + " form-control" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)), 
       placeholder = placeholderText, 
       style = (inlineStyle ?? string.Empty) 
      } 
     }); 
    } 
}