2

How to implement html data attribute for Sitecore forms? For example in the styling section, I would like to add custom input for data attribute.

Any help is much appreciated.

  • Hi Marek, I am not looking for adding form element, want to add input field for data attribute inside styling section like css class. – Naga Dinesh May 13 '19 at 7:01
  • Yes, but in the article you can find instructions how to add styling fields – Marek Musielak May 13 '19 at 8:43
  • I have followed the same steps which you have mentioned above in creating custom data attributes. But i was always getting error, below is the exception which i captured from logs: Exception: "CustomDataAttribute.CustomSingleLineViewModel' does not contain a definition for 'CustomDataAttribute' and no extension method 'CustomDataAttribute' accepting a first argument of type 'CustomDataAttribute.CustomSingleLineViewModel' could be found (are you missing a using directive or an assembly reference?)" In the above "CustomDataAttribute" is the Namespace and "CustomSingleLineViewModel" is the class. – user7129 Jul 17 at 13:33
8

For your requirement you can either create new Single-line text field or you can update in existing Single-line text field. I am focusing on existing one. Below are the steps:

  1. Move to the location /sitecore/templates/System/Forms/Fields/Field and add CustomAttribute field with Single-Line Text

enter image description here

  1. Switch to Core db and go to this location /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Styling
  2. Create duplication item of CssClass and rename it with CustomAttribute
  3. Update FormLabel to Custom Attribute
  4. Add BindingConfiguration to customAttribute

    enter image description here

  5. Now create new custom view model CustomSingleLineViewModel in your code

 [Serializable()]
    public class CustomSingleLineViewModel : StringInputViewModel
    {
        public string CustomAttribute { get; set; }
        protected override void InitItemProperties(Item item)
        {
            base.InitItemProperties(item);
            CustomAttribute = StringUtil.GetString(item.Fields["CustomAttribute"]);
        }
        protected override void UpdateItemFields(Item item)
        {
            base.UpdateItemFields(item);
            item.Fields["CustomAttribute"]?.SetValue(CustomAttribute,true);
        }
    }
  1. Now go to this location Views\FormBuilder\FieldTemplates and open SingleLineText.cshtml
  2. Update cshtml code and replace namespace
@using Sitecore.ExperienceForms.Mvc.Html
@model Sitecore.Foundation.Forms.Fields.CustomSingleLineViewModel

<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass custom-form__label" custom-attribute="@Model.CustomAttribute">@Html.DisplayTextFor(t => Model.Title)</label>
<input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass form-control form-control__primary" type="text" value="@Model.Value" @if (Model.MaxLength > 0) { <text> maxlength="@Model.MaxLength" </text> } placeholder="@Model.PlaceholderText" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) />
@Html.ValidationMessageFor(m => Model.Value)
  1. In master db, move into this location /sitecore/system/Settings/Forms/Field Types/Basic/Single-Line Text and update Model Type with new viewmodel

enter image description here

  1. Go to Form explorer and create new form and drag Single-line text
  2. Now you can see Custom Attribute field

enter image description here enter image description here

More information you can check here https://www.codinglittlethings.com/2019/07/custom-data-attribute-for-sitecore-form-field.html

| improve this answer | |
  • Thank you Swati Gupta :) – Naga Dinesh May 14 '19 at 4:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.