Web Form per Marketters (WFFM) Tag di input HTML con attributo placeholder

Question

Ho un requisito in cui sto implementando sitecore WFFM per creare un modulo. La pagina ha tag di input HTML con attributo Placeholder. Devo rendere la casella WFFM SingleLineInput a un tag di input con attributo placeholder. Cosa dovrei fare?

So che la classe SingleLineText è definita nella DLL Sitecore.Form.Web.UI.Controls.

Answer 1

È possibile ottenere questo estendendo SingleLineText con una proprietà aggiuntiva per memorizzare il valore di testo del segnaposto. Una volta che la proprietà è a posto, sarà necessario sostituire il metodo OnInit e iniettare l'attributo segnaposto se si verifica che venga impostato.

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

Ecco l'implementazione personalizzata di 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); 
    } 
} 

Infine, è necessario creare una nuova definizione voce di campo sotto /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/ e impostare l'assemblea a utilizzare la classe di cui sopra. La tua nuova proprietà segnaposto dovrebbe apparire sotto una categoria "Proprietà personalizzate" quando hai il campo selezionato nella progettazione form.

Answer 2

Ho usato il seguente codice per creare un campo personalizzato. E funziona benissimo Forme :)

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); 
    } 

} 

Poi ho appena creato un campo tipo di elemento sotto /Sitecore/system/Moduli/web per il marketing/Impostazioni/Tipi di campo/Personalizzato e inseriti montaggio e dettagli di classe nel articolo.

Funziona come un fascino ... !!

Answer 3

Se si utilizza la versione MVC di WFFM è necessario aggiungere quanto segue come spiegato nella risposta

1- approvato Creare una classe

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- Copia riga singola di testo da /Sitecore/sistema/Moduli/Web Form per marketing/Impostazioni/Campo Tipi/Tipi semplici/Testo a riga singola a /sitecore/sistema/Moduli/Web Form per marketing/Impostazioni/Tipi di campo/Personalizzato set Assembly, Class e MVC Digitare

3-Creare un nuovo file chtml sotto \ Visualizzazioni \ Form \ EditorTemplates nome ane è ExtendedSingleLineTextField.cshtml dovrebbe essere lo stesso nome con il nome della classe (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 un aiutante html in modo da poter iniettare segnaposto ho chiamato 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) 
      } 
     }); 
    } 
}