1

We have created a new date picker field with dropdown options for Month, Year and Day by following the article Sitecore Guide

The field data is being saved properly, but we are facing the below issues

  • When set to mandatory, the field validation does not work.
  • All the out of the box elements are wrapped with "" and "required field" if marked as mandatory. But the custom element renders with out the div and we are unable to figure out where to set that up.

Attached the screenshot, where the OOTB elements are rendered within div form-group class and custom element elements are not. enter image description here

Could you help in understanding how the bootstrap div structure is generated for the forms and other elements and how can the same be done for the custom fields ?

Here is the sample code for the field cshtml

 @using Sitecore.ExperienceForms.Mvc.Html

@model DatePickerViewModel


@{var htmlAttributes = new Dictionary<string, object>()
{
        { "class", "form-control" }
  };
}

<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
<input type="date" style="display:none;" id="@Html.IdFor(m => Model.Value)" @if (Model.Min.HasValue) { <text> min="@Model.Min.Value.ToString(Model.DateFormat)" </text> } @if (Model.Max.HasValue) { <text> max="@Model.Max.Value.ToString(Model.DateFormat)" </text> } @if (Model.Value.HasValue) { <text> value="@Model.Value.Value.ToString(Model.DateFormat)" </text> } name="@Html.NameFor(m => Model.Value)" class="wfmDatebox @Model.CssClass" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => Model.Value) />

<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.DayTitle</div>
            @Html.DropDownListFor(x => x.Day, Model.Days, htmlAttributes)
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.MonthTitle</div>
            @Html.DropDownListFor(x => x.Month, Model.Months, htmlAttributes)
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.YearTitle</div>
            @Html.DropDownListFor(x => x.Year, Model.Years, htmlAttributes)
        </div>
    </div>
</div>
@Html.ValidationMessageFor(m => Model.Value)

Thanks in Advance.

2
  • What is the content of your field cshtml file?
    – Marek Musielak
    May 31, 2023 at 9:06
  • Hello @MarekMusielak , I have updated the question and added the cshtml content
    – D J
    May 31, 2023 at 9:21

1 Answer 1

1

We had similar scenario and in our case the solution was to wrap the field content in

@{
    var requiredClass = "";
    if(Model.Required){
        requiredClass = "required-field";
    }
}

<div class="form-group @Model.CssClassSettings.CssClass @requiredClass">
    YOUR CSHTML HERE
</div>

so in your case it should be something like:

@{
    var requiredClass = "";
    if(Model.Required){
        requiredClass = "required-field";
    }
    
    var htmlAttributes = new Dictionary<string, object>()
    {
        { "class", "form-control" }
    };
}

<div class="form-group @Model.CssClassSettings.CssClass @requiredClass">
    <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
    <input type="date" style="display:none;" id="@Html.IdFor(m => Model.Value)" @if (Model.Min.HasValue) { <text> min="@Model.Min.Value.ToString(Model.DateFormat)" </text> } @if (Model.Max.HasValue) { <text> max="@Model.Max.Value.ToString(Model.DateFormat)" </text> } @if (Model.Value.HasValue) { <text> value="@Model.Value.Value.ToString(Model.DateFormat)" </text> } name="@Html.NameFor(m => Model.Value)" class="wfmDatebox @Model.CssClass" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => Model.Value) />

    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.DayTitle</div>
                @Html.DropDownListFor(x => x.Day, Model.Days, htmlAttributes)
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.MonthTitle</div>
                @Html.DropDownListFor(x => x.Month, Model.Months, htmlAttributes)
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.YearTitle</div>
                @Html.DropDownListFor(x => x.Year, Model.Years, htmlAttributes)
            </div>
        </div>
    </div>
    @Html.ValidationMessageFor(m => Model.Value)
</div>
4
  • Thanks Marek for the quick response. This is what we were looking for.
    – D J
    May 31, 2023 at 10:54
  • We have another problem related to the bootstrap structure on the forms, where the "form-section" and "row" div structure is not generated on one of the lower environments. We have installed the form package from another environment where its working fine. On "Form Section" field, the 2 div structure is missing <div class="form-section"><div class="row"> Could you let me know, what could be the possible root cause for this ?
    – D J
    May 31, 2023 at 10:56
  • 1
    Best create another question and someone will help you if they can
    – Marek Musielak
    May 31, 2023 at 11:08
  • Thanks again for your quick help :)
    – D J
    May 31, 2023 at 11:20

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.