1

My clients requirement is like need to add a custom field to sitecore 9 which enables the conditional rendering as if someone selects yes then show this or if no then show that. How we can achieve this as i am using sitecore 9.0.1.

5

This functionality is not available in Sitecore 9.0.1 so for 9.0.1 I wrote a temporary code till than you are not upgrading into 9.1. If you want to apply condition on radio button so you can use below code, similar code you can use for drop down:

@foreach (var item in Model.Items) { string val = item.Value; string sectionName = string.Empty; string hideOrshow = string.Empty; string fieldValue = string.Empty; if (val.IndexOf('|') != -1) { var list = val.Split('|'); if (list.Length > 2) { sectionName = list[0].ToString(); hideOrshow = list[1].ToString(); fieldValue = list[2].ToString(); } } else { sectionName = ""; fieldValue = item.Value; } <input id="@item.ItemId" type="radio" onchange="onRadioChange('@sectionName','@fieldValue','@hideOrshow')" class="form-control__radio" name="@Html.NameFor(m => Model.Value)" @if (item.Selected) { <text> checked</text>} value="@fieldValue" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) /> <label for="@item.ItemId">@item.Text</label> }

@Html.ValidationMessageFor(m => Model.Value)
<script>
function onRadioChange(section, val, hideOrShow) {
    if (section != "") {
        if (section.indexOf(',') != -1) {
            var list = section.split(',');
            if (hideOrShow.indexOf(',') != -1) {
                var hideOrShowList = hideOrShow.split(',');
                if (list.length == hideOrShowList.length) {
                    for (var i = 0; i <= list.length; i++) {
                        if (hideOrShowList[i] == "Show") {
                            var className = "." + list[i].trim();
                            $(className).removeClass("hideSection");
                            $(className).find(".fieldRequired").each(function (i) {
                                if ($(this).attr("data-sc-field-name")) {
                                    $(this).attr("aria-required", "true");
                                    $(this).attr("required", "required");
                                    $(this).attr("data-val", "true");
                                    var fieldName = $(this).attr("data-sc-field-name");
                                    var requiredMessage = fieldName + " is required.";
                                    $(this).attr("data-val-required", requiredMessage);
                                }
                            });
                        }
                        else if (hideOrShowList[i] == "Hide") {
                            var className = "." + list[i].trim();
                            $(className).addClass("hideSection");
                            $(className).find(".fieldRequired").each(function (i) {
                                if ($(this).attr("data-sc-field-name")) {
                                    $(this).attr("aria-required", "false");
                                    $(this).removeAttr("required");
                                    $(this).attr("data-val", "false");
                                }
                            });
                        }
                    }
                }
            }
        }
        else {
            if (hideOrShow == "Show") {
                $("." + section).removeClass("hideSection");
                $("." + section).find(".fieldRequired").each(function (i) {
                    if ($(this).attr("data-sc-field-name")) {
                        $(this).attr("aria-required", "true");
                        $(this).attr("required", "required");
                        $(this).attr("data-val", "true");
                        var fieldName = $(this).attr("data-sc-field-name");
                        var requiredMessage = fieldName + " is required.";
                        $(this).attr("data-val-required", requiredMessage);

                    }
                });
            }
            else if (hideOrShow == "Hide") {
                console.log(hideOrShow)
                $("." + section).addClass("hideSection");
                $("." + section).find(".fieldRequired").each(function (i) {
                    if ($(this).attr("data-sc-field-name")) {
                        $(this).attr("aria-required", "false");
                        $(this).removeAttr("required");
                        $(this).attr("data-val", "false");
                    }
                });
            }
        }
    }
}

In Sitecore forms you need to follow below steps:

1.Create a hideSection class (.hideSection{display:none})

2.Create new section which you want to hide and in CSS class field name, write any name like “Section1” and to hide that section by default use “hideSection” class.enter image description here

3.In this section add field which you want to add like text box, radio button etc. One thing you need to remember that if you want this field mandatory in this section do not select Mandatory radio button, just add class “fieldRequired”

enter image description here

4.Now go to radio button from where you want to show/hide section and go to List Items on right side. From Radio button values, select “Customized”.

5.Now go to Radio Button’s value, Add “|Hide/Show|Value”. Suppose your section name is “Section1” which you want to show then add “Section1|Show|Whateven value” and if you want to hide then add add “Section1|Hide|Whatever value”

enter image description here

|improve this answer|||||
3

Conditional logic in Sitecore Forms was introduced in Sitecore 9.1. It is not available on Sitecore 9.0.

To build this yourself on 9.0 is not advisable. It would be better to upgrade to 9.1 and get the feature automatically. There are some minor differences between 9.0 and 9.1 in other areas (like Identity Server and Cortex).

Note that at the time of this answer, Sitecore 9.1.1 is the latest update and was just released. I mention this in case the reason to not upgrade was because of 9.1 previously being an initial release.

|improve this answer|||||

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.