Sitecore Forms, które zostały wprowadzone wraz z Sitecore 9, są o wiele lepsze niż WFFM i rozwijają się z każdą nową wersją Sitecore. Pamiętajmy tylko, że jeśli potrzebujemy więcej niestandardowych funkcji lub pól, będziemy musieli sami stworzyć logikę, więc pokażę przykład, jak utworzyć pole Range Slider.
Suwak zakresu
Suwak zakresu jest rzadko używany w formularzach, ale może być używany w kilku sytuacjach, takich jak wybór wieku lub w formularzu darowizny w celu wybrania kwoty do przekazania.
Od czego zacząć?
Oczywiście przed rozpoczęciem pracy należy zapoznać się ze sposobem dodawania nowych pól w Sitecore Forms. Można o tym przeczytać tutaj.
Jeśli jesteś z tym zaznajomiony, to musimy znaleźć bibliotekę z suwakiem do użycia. Każdy slider ma swoje zalety, więc najlepiej przetestować go przed dokonaniem wyboru. W oparciu o wybraną bibliotekę, będziesz miał kilka opcji i HTML do wykorzystania. Ja zamierzam użyć Range Slider.
To od ciebie zależy, ile opcji będziesz chciał użyć, na podstawie tego utworzysz swoje właściwości w modelu / polach w szablonie. Ja użyję:
- Min - ustawienie wartości minimalnej
- Max - ustawienie wartości maksymalnej
- Od - numer, od którego należy zacząć
- Krok - ile tików należy wykonać przy każdym ruchu
- Prefiks - prefiks podpowiedzi
- Postfix - postfix do podpowiedzi
- Siatka - pole wyboru do pokazywania lub ukrywania siatki
- Skórka - wstępnie wypełniona lista rozwijana z dostępnymi skórkami suwaka
1. Dodatkowe pliki
Nie zapomnij dodać dodatkowych plików JS i CSS do swojego projektu! Ścieżka do nich w projekcie to:
- CSS -
/sitecore modules/Web/ExperienceForms/css/ion.rangeSlider.min.css - JavaScript -
/sitecore modules/Web/ExperienceForms/scripts/ion.rangeSlider.min.js
Dzięki temu będziesz mógł łatwo dodać je do swojego formularza (lub szablonu formularza, jeśli chcesz domyślnie dodać je do każdego formularza):
2. Szablon pola
Prosty szablon dla naszego modelu z szablonami bazowymi:
/sitecore/templates/System/Forms/Fields/Field/sitecore/templates/System/Forms/Label Settings- aby umożliwić korzystanie zLabelorazLabel Css Class
3. Model
Nie dziedzicz FieldViewModel class! Można jej użyć dla pola, które nie będzie miało żadnych danych wejściowych, ale dla pól wejściowych wystarczy odziedziczyć klasę InputViewModel<T> (która dziedziczy klasę FieldViewModel). Zaufaj mi, to pomoże ci uniknąć późniejszych problemów z warunkami i walidacjami.
Następnie dodaj właściwości w modelu w oparciu o to, czego będziesz używał w widoku (aby ustawić suwak) i oczywiście ustaw je poprawnie w InitItemProperties oraz UpdateItemFields metody.
Mój model będzie wyglądał następująco:
public class RangeSliderViewModel : InputViewModel<string>
{
public int Minimum { get; set; }
public int Maximum { get; set; }
public int Start { get; set; }
public int Step { get; set; }
public string Prefix { get; set; }
public string Postfix { get; set; }
public string Skin { get; set; }
public bool Grid { get; set; }
protected override void InitItemProperties(Item item)
{
base.InitItemProperties(item);
Minimum = MainUtil.GetInt(item.Fields["Minimum"]?.Value, 0);
Maximum = MainUtil.GetInt(item.Fields["Maximum"]?.Value, 0);
Start = MainUtil.GetInt(item.Fields["Start"]?.Value, 0);
Step = MainUtil.GetInt(item.Fields["Step"]?.Value, 0);
Prefix = StringUtil.GetString(item.Fields["Prefix"]);
Postfix = StringUtil.GetString(item.Fields["Postfix"]);
Skin = StringUtil.GetString(item.Fields["Skin"]);
Grid = MainUtil.GetBool(item.Fields["Grid"]?.Value, false);
}
protected override void UpdateItemFields(Item item)
{
base.UpdateItemFields(item);
item.Fields["Minimum"]?.SetValue(Minimum.ToString(CultureInfo.InvariantCulture), true);
item.Fields["Maximum"]?.SetValue(Maximum.ToString(CultureInfo.InvariantCulture), true);
item.Fields["Start"]?.SetValue(Start.ToString(CultureInfo.InvariantCulture), true);
item.Fields["Step"]?.SetValue(Step.ToString(CultureInfo.InvariantCulture), true);
item.Fields["Prefix"]?.SetValue(Prefix, true);
item.Fields["Postfix"]?.SetValue(Postfix, true);
item.Fields["Skin"]?.SetValue(Skin, true);
item.Fields["Grid"]?.SetValue(Grid ? "1" : string.Empty, true);
}
}
4. Elementy formularza
Nie będę wchodził w szczegóły, ponieważ jest to wyjaśnione w dokumentacji, ale na podstawie modelu RangeSlider będzie miał te elementy (możesz skopiować niektóre z nich z innych pól):
Będziemy musieli stworzyć:
- Minimum, Maksimum, Start, Krok, Prefiks, Postfiks -.
FormTextBox Parametersszablon. - Siatka -
FormCheckBox Parametersszablon - Skóra -
FormDropList Parametersszablon. Oprócz normalnych rzeczy będzie potrzebowałStaticDatapole ustawione na folder ListItems z naszymi skórkami (wyjaśnione w następnym punkcie) iValueFieldNamepole ustawione naValue.
- ListItems -
FormSectionszablon. Pod nim znajdzie się kilka elementówListItemi będą naszymi skórkami. Więcej informacji na ten temat można znaleźć w sekcji Opcjonalne: Dodaj kolejny edytor właściwości dla motywów
W szczegółach wybierz wszystkie podpunkty. Wybrałem również FieldName oraz Label (z folderu /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Details/):
Element stylizacji można skopiować, ale należy się upewnić, że będzie on posiadał CssClass oraz LabelCssClass wybrane:
5. Widok
Będziemy musieli użyć naszego Modelu, zainicjować Range Slider i dodać HTML. Wejściowa klasa CSS musi być unikalna w przypadku posiadania wielu pól w jednym formularzu, dlatego dodałem @("js-range-slider-" + Model.Name) CSS (oczywiście możesz użyć dowolnego identyfikatora, o ile działa). Mając to wszystko na uwadze, widok będzie wyglądał następująco:
@model DemoProject.Model.RangeSliderViewModel
<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="@Model.CssClass js-range-slider @("js-range-slider-" + Model.Name)"
value="@Model.Value"
data-sc-field-name="@Model.Name" />
<script type="text/javascript">
$("@(".js-range-slider-" + Model.Name)").ionRangeSlider({
min: @Model.Minimum,
max: @Model.Maximum,
from: @Model.Start,
step: @Model.Step,
@Html.Raw(string.IsNullOrEmpty(Model.Prefix)? "" : string.Format("prefix:\"{0}\",", Model.Prefix))
@Html.Raw(string.IsNullOrEmpty(Model.Postfix) ? "" : string.Format("postfix:\"{0}\",", Model.Postfix))
@Html.Raw(string.IsNullOrEmpty(Model.Skin) ? "" : string.Format("skin:\"{0}\",", Model.Skin))
grid: @Model.Grid.ToString().ToLower()
});
</script>
6. Typ pola
Jako ostatni krok, stwórzmy Field Type - element pola, który będzie dostępny do użycia w edytorze formularzy. Nasz typ pola Range slider będzie znajdował się pod ścieżką /sitecore/system/Settings/Forms/Field Types/Basic/Range slider i będzie /sitecore/templates/System/Forms/Field Type szablon. Co należy ustawić w środku:
- Ścieżka widoku - moja ścieżka to /Views/FormBuilder/CustomFields/RangeSlider.cshtml, więc proste
CustomFields/RangeSliderw terenie byłoby wystarczające - Model Type - jak zwykle będzie to przestrzeń nazw i zespół.
- Edytor właściwości - element formularza z głównej bazy danych, czyli to, co utworzyliśmy w punkcie 4.
- Field Template - element szablonu dla modelu, czyli to, co utworzyliśmy w punkcie 2.
Wynik
Teraz będziemy mieli możliwość dodania pola Range slider w naszym formularzu.
O nie...
Byłem trochę zaskoczony, ponieważ mój slider był wyświetlany jako pole tekstowe i nie mogłem go edytować. Dlaczego? Okazało się, że wystąpił błąd javascript, przez który slider nie został zainicjalizowany:
Sprawdziłem kilka innych bibliotek Slider i były tam inne błędy, więc musiałem to naprawić.
Dobrze
Co dziwne, dzieje się to tylko w edytorze formularzy i udało mi się zrobić mały hack, aby zainicjować go tylko poza edytorem formularzy. Sitecore.Context.PageMode.IsNormal zwroty true w edytorze formularzy, więc musiałem sprawdzić w js, czy Html nie ma data-sc-app atrybut:
<script type="text/javascript">
$(function () {
if (typeof($("html").data('sc-app')) === 'undefined') {
$(".js-range-slider").ionRangeSlider({
...
});
}
});
</script>
O tak!
Teraz mogę edytować ustawienia:
Formularz
Wreszcie, po wstawieniu naszego formularza na stronę, oto wynik:
Szukasz niestandardowych usług tworzenia oprogramowania? Skontaktuj się z nami już teraz!
Podsumowanie
To wszystko. Teraz masz pole Range Slider dla Sitecore Forms.
P: Czym są Sitecore Forms?
Sitecore Forms to nowa funkcja wprowadzona w Sitecore 9, która jest ulepszeniem poprzedniej funkcji WFFM. Pozwala ona na dodawanie do formularzy większej liczby niestandardowych funkcji i pól.
P: Co to jest pole suwaka zakresu?
Pole suwaka zakresu to rodzaj pola formularza, które pozwala użytkownikowi wybrać zakres wartości w ramach ustalonej wartości minimalnej i maksymalnej, zwykle używane w selektorach wieku lub formularzach darowizn.
P: Jaka biblioteka jest używana w przykładzie do tworzenia pola suwaka zakresu?
Przykład wykorzystuje bibliotekę o nazwie Range Slider.
