So erstellen Sie benutzerdefinierte Feldtyp in Sitecore-Webformular für Marketer 8.1

Question

In einem meiner Sitecore-Projekt muss ich ein benutzerdefiniertes Feld in WFFM erstellen. Feldtyp muss zwei Textfelder haben und der Benutzer kann 5 Ziffern in jedes Textfeld eingeben (Beispiel xxxxx xxxxx, da wir Kreditkartendetails in das Textfeld 4 eingeben).

Gemäß der ref Dokument „https://sdn.sitecore.net/upload/sitecore6/64/presentation_component_cookbook-a4.pdf“ Ich habe unten Code crated: -

eine .cs Klasse

using System; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Sitecore.Form.Web.UI.Controls; 
using System.ComponentModel; 
using System.ComponentModel.Design; 

namespace Web.MySite.Fields 
{ 
    [Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))] 
    public class SocialSecurityNumber : SingleLineText 
    { 

     private static readonly string baseCssClassName = "scfSingleLineTextBorder"; 

     protected TextBox firstPart;protected TextBox lastPart; 

     public SocialSecurityNumber() : this(HtmlTextWriterTag.Div) 
     { 
      firstPart = new TextBox(); 
      lastPart = new TextBox(); 
     } 

     public SocialSecurityNumber(HtmlTextWriterTag tag) : base(tag) 

     { 
      this.CssClass = baseCssClassName; 
     } 

     protected override void OnInit(EventArgs e) 
     { 
      SetCssClasses(); 
      SetTextBoxeWidths(); 
      SetMaxLengths(); 
      SetTextBoxModes(); 
      AddChildControls(); 

      base.OnInit(e); 
     } 

     private void SetCssClasses() 
     { 
      help.CssClass = "scfSingleLineTextUsefulInfo"; 
      title.CssClass = "scfSingleLineTextLabel"; 
      generalPanel.CssClass = "scfSingleLineGeneralPanel"; 
     } 

     private void SetTextBoxeWidths() 
     { 
      firstPart.Style.Add("width", "40px"); 

      lastPart.Style.Add("width", "50px"); 
     } 

     private void SetMaxLengths() 
     { 
      firstPart.MaxLength = 3; 

      lastPart.MaxLength = 4; 
     } 

     private void SetTextBoxModes() 
     { 
      firstPart.TextMode = TextBoxMode.SingleLine; 

      lastPart.TextMode = TextBoxMode.SingleLine; 
     } 

     private void AddChildControls() 
     { 
      Controls.AddAt(0, generalPanel); 
      Controls.AddAt(0, title); 

      generalPanel.Controls.Add(firstPart); 


      generalPanel.Controls.Add(lastPart); 
      generalPanel.Controls.Add(help); 
     } 


    } 

    public class SocialSecurityNumberModel : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField 
    { 


    } 


} 

Dann ein BootstrapEditorHtmlHelperExtension.CS und ein In Kisten .CSHTML Erstellt crated Ich habe: -

using Sitecore.Forms.Mvc.Interfaces; 
using Sitecore.Forms.Mvc.ViewModels.Fields; 
using System.Web.Mvc; 
using System.Web.Mvc.Html; 

namespace Web.MySite.Extensions 
{ 
    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.TextBox(expression,null, new 
      { 

        @class = (string.Join(" ", classes) + " form-control col-lg-2" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)), 
        placeholder = placeholderText, 
        style = (inlineStyle ?? string.Empty) 

      }); 
     } 



    } 



} 

SocialSecurityNumberModel.CSHTML

@using Sitecore.Forms.Mvc.Html 
@using Web.MySite.Extensions 

@model Web.MySite.Fields.SocialSecurityNumberModel 

@using (Html.BeginField()) 
{ 
@Html.ExtendedBootstrapEditor("value", " ", "width:50%", new[] { "" }) 
@Html.ExtendedBootstrapEditor("value", " ", "width:40%", new[] { "" }) 

} 

Danach habe ich ein Custom Field in Sitecore Crated und gab Below Below dll ref. in

Assembly 
Sitecore.Forms.Custom.dll 

Class 
Sitecore.Form.Web.UI.Controls.SingleLineText 

MVC Type 
Web.MySite.Fields.SocialSecurityNumberModel,Web.MySite 

Ich erhalte sowohl das Textfeld aber ID ist für beide gleich.

ID=wffm1755f6ce241245b7a1183288954ce0e7_Sections_0__Fields_0__value 

Answer 1

Sie müssen nicht für die Erstellung eines benutzerdefinierten Feldes für WFFM zunächst eine ASCX-Datei erstellen Sie ein Element des Typs erstellen müssen:

/Sitecore/templates/Web Forms für Marketer/Feldtyp

Wenn Sie WFFM mit MVC verwenden, müssen Sie MVC Typ-Feld füllen.

Mit Dot Peek können Sie sehen, wie andere Sitecore Wffm-Felder erstellt werden.

Sie benötigen eine eigene Klasse wie in diesem Beispiel zu erstellen:

https://sitecorecorner.com/tag/wffm-custom-field/

http://elenazlateva.blogspot.ro/2012/09/custom-field-type-for-sitecore-web.html

https://divamatrix.wordpress.com/2011/12/20/wffm-custom-field-type-made-easy/