Wiesz jak utworzyć nowe pole w Sitecore Forms, ale nie wiesz jak dodać do niego logikę warunkową?

Niestety dokumentacja tego nie mówi, więc pokażę ci, jak to zrobić na podstawie wcześniej utworzonego Range Slidera.

Jak ustawić logikę warunkową

Aby włączyć opcje warunku dla pola, będziesz musiał dokonać kilku zmian, ale warto. Następnie będziesz mógł dodać złożoną logikę do pola bez konieczności wykonywania dodatkowego kodowania.

Zmiany w Sitecore

  • w głównej bazie danych - dodaj sekcję Warunek w sekcji RangeSlider Parametr formularza. Najprostszym sposobem byłoby po prostu skopiowanie istniejącego elementu z innego pola (na przykład z RadioListWarunek-Forma-Element):
  • w głównej bazie danych - wybierz pole w warunkach, typach akcji i operatorach (w Allowed Field TypesDozwolone typy pól pole), którego będziesz chciał użyć

Zmiany w modelu

Jak wspomniałem w poście Range Slider, upewnij się, że twój model dziedziczy po InputViewModel<T> class. Jeśli model będzie dziedziczył FieldViewModel nie będzie można wybrać pola niestandardowego w klasie IF rozwijana:

Włączona logika warunkowa

Teraz będziesz mógł ustawić warunki w swoim polu. Dodałem następującą logikę - Jeśli FullName jest równe '', to ukryj RangeSlider:

Edytuj-Warunki

Wyświetl zmiany

Najważniejszą rzeczą jest tutaj atrybut wejściowy data-sc-field-key. JavaScript używa tego atrybutu, aby wybrać element html do zmiany. Jeśli chcesz użyć warunków opartych na wartości pola (IF warunek np.: is equal to, contains), to powinien on być ustawiony w input. W przeciwnym razie można go ustawić w dowolnym innym elemencie html.

Dla przykładu suwaka zakresu muszę zawinąć nasze dane wejściowe w div, ponieważ dane wejściowe są domyślnie ukryte i widoczne są tylko dynamicznie generowane elementy:

Oczywiście chcę również używać IF opcje warunków, więc dodam data-sc-field-key do wprowadzania. Html dla suwaka zakresu będzie teraz wyglądał następująco:

<div class="range-slider-wrapper @Model.CssClass">
    <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
    <input id="@Html.IdFor(m => Model.Value)"
           name="@Html.NameFor(m => Model.Value)"
           class="js-range-slider @("js-range-slider-" + Model.Name)"
           value=""
           data-sc-field-name="@Model.Name" 
           data-sc-field-key="@Model.ConditionSettings.FieldKey" />
</div>

JavaScript

Jeśli spróbujesz przetestować, czy wszystko działa teraz, będziesz rozczarowany. Nasze dane wejściowe są ukryte, więc będziemy musieli zmienić JS. Domyślna logika warunków znajduje się w \sitecore modules\Web\ExperienceForms\scripts\form.conditions.js plik. Utwórzmy kopię tego pliku i nazwijmy go form.conditions.custom.js, a następnie ustawić go w Scripts dla pola lub wartości standardowych w formularzu:

Custom-Conditions-Js

Teraz czas na edycję akcji. Sprawdzę, czy celem jest suwak zakresu, jeśli tak, to pokaż / ukryj opakowanie div:

show: function($target) {
    var tempTarget = $target;
    if($target.hasClass("js-range-slider")) {
        //if it's range slider, then set target to div wrapper
        tempTarget = $target.parents(".range-slider-wrapper");
    }
    if (this.loaded && this.options.animate) {
        tempTarget.slideDown();
    } else {
        tempTarget.show();
    }

    this.setRequired($target);
},

hide: function($target) {
    var tempTarget = $target;
    if($target.hasClass("js-range-slider")) {
        //if it's range slider, then set target to div wrapper
        tempTarget = $target.parents(".range-slider-wrapper");
    }
    if (this.loaded && this.options.animate) {
        if (tempTarget.is(":visible")) {
            tempTarget.slideUp();
        }
    } else {
        tempTarget.hide();
    }

    this.setRequired($target);
},

Wynik

Disable-Result

Teraz możliwe jest dodanie logiki dla pola RangeSlider, aby było ukryte, gdy FullName jest puste:

Różne scenariusze

Ok, więc jest to jedno ustawienie do ukrywania/pokazywania suwaka zakresu. A co z innymi lub bardziej złożonymi scenariuszami?

Wyłączanie/włączanie działań

Warunek - Jeśli FullName jest równe '', wyłącz RangeSlider

Jak wyłączyć suwak zakresu? Można go wyłączyć, wykonując skrypt taki jak ten:

$(".js-range-slider").data("ionRangeSlider").update({block: true});

Co zmienić? Zmodyfikujmy nieco akcje włączania/wyłączania:

enable: function($target) {
    if ($target.is("input,select,textarea,button")) {
        $target.prop("disabled", false);
        this.setRequired($target);
    }
    //if it's range slider input and it's initialized, then enable slider
    if($target.hasClass("js-range-slider") && typeof($target.data("ionRangeSlider")) != "undefined") {
        $target.data("ionRangeSlider").update({block: false});
    }
},

disable: function($target) {
    if ($target.is("input,select,textarea,button")) {
        $target.prop("disabled", true);
        this.setRequired($target);
    }
    //if it's range slider input and it's initialized, then disable slider
    if($target.hasClass("js-range-slider") && typeof($target.data("ionRangeSlider")) != "undefined") {
        $target.data("ionRangeSlider").update({block: true});
    }
},

Wynik:

Wiele wyników

Wiele warunków

Co jeśli będziemy mieli dwa suwaki? Nie ma znaczenia, wszystko nadal działa idealnie. Dodajmy drugi suwak, a następnie ustawmy warunki:

  • Pierwszy warunek suwaka - Jeśli FullName jest równe '', to ukryj RangeSlider i ukryj RangeSlider2.
  • Drugi warunek suwaka - Jeśli RangeSlider jest równy 0, wyłącz RangeSlider.

Podsumowanie

Ustawianie warunków w polach niestandardowych jest łatwe! Najtrudniejszą częścią jest po prostu zapoznanie się z tym, co należy zrobić, a następnie każdy będzie mógł ustawić złożone warunki.

Chcesz porozmawiać z naszymi ekspertami o rozwiązaniach technologicznych dla Twojej firmy?

Oceń ten post