7

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.

Improve this question
4
  • Is this helpful doc.sitecore.com/developers/91/sitecore-experience-management/… ?
    – Marek Musielak ♦
    Commented May 13, 2019 at 6:55
  • 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
    Commented May 13, 2019 at 7:01
  • Yes, but in the article you can find instructions how to add styling fields
    – Marek Musielak ♦
    Commented May 13, 2019 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
    Commented Jul 17, 2020 at 13:33

2 Answers 2

Reset to default
16

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
2
  • Thank you Swati Gupta :)
    – Naga Dinesh
    Commented May 14, 2019 at 4:07
  • Great post Swati. One question, won’t Sitecore items get override after upgrade?
    – Imad
    Commented Feb 23 at 15:06
5

I followed Swati Gupta's answer using Sitecore 10.2 and found these additional steps were needed.

After duplicating the CssClass item and renaming it to CustomAttribute. Change its RenderingItemId from sitecore/client/Applications/FormsBuilder/Components/Layouts/Renderings/TagEditor to sitecore/client/Business Component Library/version 2/Layouts/Renderings/Common/TextBox.

Then, still in Core DB go to /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/SingleLineText/Styling

Here add CustomAttribute to the ControlDefinitions from /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Styling/CustomAttribute.

(I am aware you are not meant to use answers to respond to another answer, but I do not have enough reputation to add a comment.)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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