Slider

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

Komponent pozwalający na wybranie wartości numerycznych przy pomocy suwaka.

Właściwości komponentu

Właściwość Eximee Designer	Nazwa atrybutu w Źródle	Opis
Krok, co jaki można ustawić wartość na suwaku (sekcja Podstawowe właściwości)	step	Skok wartości, czyli krok, co jaki można ustawić wartość na suwaku (domyślnie wartość 100).
Wartość startowa suwaka (sekcja Podstawowe właściwości)	startValue	Wartość startowa suwaka (domyślnie pusta). Może być zasilona z usługi.
Minimalna prezentowana wartość suwaka (sekcja Podstawowe właściwości)		Wartość minimalna suwaka (domyślnie wartość 0). Może być zasilona z usługi.
Maksymalna prezentowana wartość suwaka (sekcja Podstawowe właściwości)		Wartość maksymalna suwaka (domyślnie wartość 1000). Może być zasilona z usługi.
Minimalna możliwa wartość (sekcja Podstawowe właściwości)		Minimum, poza które nie będzie można wybrać wartości (domyślna wartość 0). Może być zasilona z usługi.
Maksymalna możliwa wartość (sekcja Podstawowe właściwości)		Maksimum, poza które nie będzie można wybrać wartości (domyślna wartość 1000). Może być zasilona z usługi.
Wartość sugerowana (sekcja Podstawowe właściwości)	suggestedValue	Wartość sugerowana (np. w przypadku limitu odnawialnego wysokość limitu sugerowana przez bank). Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Suffix etykiety minimalnej i maksymalnej wartości suwaka (sekcja Pozostałe)	legendSuffix	Wartość "doklejana" do etykiety minimalnej i maksymalnej wartości slidera. Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Prognozowana wartość suwaka po najechaniu na oś (sekcja Pozostałe)	showPredictionTooltip	Pokazywanie prognozowanej wartości suwaka po najechaniu na oś suwaka (domyślna wartość "true"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Prezentacja w dymku wartości wskazywanej przez suwak (sekcja Pozostałe)	showTooltip	Pokazanie wartości wskazywanej przez suwak (domyślna wartość "true"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Formatter wartości wyświetlanej w polu tekstowym	textInputFormatter	Formatter wartości wyświetlanej w polu tekstowym slidera. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniami.
Suffix pola tekstowego	textInputSuffix	Wartość "doklejana" na końcu pola tekstowego slidera. Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Opis wyświetlany po kliknięciu w pole tekstowe	descriptionPopupText	Opis wyświetlany po kliknięciu w pole tekstowe slidera. Funkcjonalność dostępna w kanale mobilnym i native.
Komunikat przekroczenia wartości minimalnej	minValueSuggest	Tekst wyświetlany pod polem tekstowym slidera po przekroczeniu wartości minimalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Komunikat przekroczenia wartości maksymalnej	maxValueSuggest	Tekst wyświetlany pod polem tekstowym slidera po przekroczeniu wartości maksymalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Synchronizacja stanu suwaka i wartości wpisanej w polu tekstowym	separatedSliderValue	Steruje synchronizacją stanu suwaka i wartości wpisanej w inpucie. Przy separatedSliderValue=true nie są respektowane wartości minBlockValue oraz maxBlockValue. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

WAŻNE — na Sliderze domyślnie wartości maxValue i maxBlockValue powinny się pokrywać, chyba że celowo mają się różnić (wtedy wartość Slidera będzie ograniczana do min (maxBlockValue, maxValue), więc górnym ograniczeniem będzie najmniejsza z tych wartości.). Analogicznie z wartościami minValue i minBlockValue.

W komponencie Slidera (we właściwościach) nie ma możliwości ustawienia wartości startowej/minimalnej/maksymalnej na wartości innego typu niż integer.

Więcej informacji o właściwościach komponentu: Wspólne właściwości komponentów

Przepisanie wartości slidera do Pola tekstowego (TextFielda) i odwrotnie

Jeśli wartość Slidera ma zostać przepisana do komponentu Pole tekstowe, komponent ten musi nasłuchiwać na Slider, a przepisanie wartości nastąpi albo przez wskazanie slidera w Źródło danych z innego pola komponentu tekstowego, albo dla Pola tekstowego zostanie ustawiona specjalna usługa (np. EchoService).

Także wartość Slidera może zostać ustawiona na podstawie liczby wpisanej do komponentu Pole tekstowe. W tym celu należy Sliderem nasłuchiwać na TextField i wskazać to pole tekstowe we właściwości Źródło danych z innego pola Slidera.

Slider z przykładowymi właściwościami

Ilustracja 1. Przykładowy wygląd komponentu na wniosku

Specyficzny wygląd Slidera

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

W niektórych szatach pole tekstowe jest już zintegrowane ze sliderem.

Ilustracja 2. Przykładowy wygląd Slidera z polem tekstowym

Ilustracja 3. Przykładowy wygląd Slidera z parametrami podawanymi w polach tekstowych

Informacje o stanie komponentu

Informacje o aktualnej wartości danej właściwości komponentu, którą można następnie wykorzystać na wniosku np. do zasilenia innego pola wartością tej właściwości, można uzyskać stosując konstrukcję ID_COMPONENTU$NAZWA_WŁAŚCIWOŚCI

Dla slidera można pobrać następującą właściwość:

Klucz	Opis
sliderValue	Wartość oznaczona na suwaku. W przypadku oznaczenia separatedSliderValue na true, może różnić się od wartości komponentu.

Przykład: zasilenie Źródło danych z innego pola poprzez GesSlider1$sliderValue

Przykładowy walidator dla Slidera

Walidator wyświetla hint dla Slidera w określonych sytuacjach.

Podczas podłączania poniższego walidatora należy jako parametr insuranceComponentId wpisać id komponentu odnoszącego się do ubezpieczenia (np. checkboxa sterującego włączeniem/wyłączeniem ubezpieczenia) oraz jako sliderId podać id Slidera, na którym kwotami chcemy sterować. Jeśli wymienione komponenty nie są osadzone bezpośrednio na wniosku, to należy podać pełną ścieżkę osadzenia, czyli id komponentu złożonego, w którym znajdują się te komponenty oraz każdego komponentu złożonego nadrzędnego.

Przykładowy kod walidatora

DevDemoSliderHintValidator.java

package pl.slider.demo.hint;

import lombok.extern.slf4j.Slf4j;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import pl.consdata.eximee.validation.api.exceptions.ValidatorException;
import pl.consdata.eximee.validation.api.model.*;
import pl.consdata.eximee.validation.api.validator.AbstractExtendedValidator;

import java.math.BigDecimal;

import static java.util.Arrays.asList;
import static java.util.Collections.singletonList;
import static org.apache.commons.lang3.StringUtils.*;

@Slf4j
@Component
@Service(AbstractExtendedValidator.class)
public class DevDemoSliderHintValidator extends AbstractExtendedValidator {
    static final String GREATER_THAN_MAX = "DevDemoSliderHintValidator.greaterThanMax";
    static final String LESS_THAN_MIN = "DevDemoSliderHintValidator.lessThanMin";
    static final String LESS_THAN_MIN_BUTTON_LABEL = "DevDemoSliderHintValidator.lessThanMin.buttonLabel";
    static final String GREATER_THAN_MAX_BUTTON_LABEL = "DevDemoSliderHintValidator.greaterThanMax.buttonLabel";
    static final String GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold.changeAmount";
    static final String GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold.withoutInsurance";
    static final String INSURANCE_AMOUNT_THRESHOLD = "insuranceAmountThreshold";
    static final String MAX_AMOUNT = "maxAmount";
    static final String MIN_AMOUNT = "minAmount";
    static final String SLIDER_INPUT = "sliderInput";
    static final String INSURANCE_CURRENT_VALUE = "insuranceCurrentValue";
    static final String INSURANCE_COMPONENT_ID = "insuranceComponentId";
    static final String INSURANCE_UNCHECKED_VALUE = "insuranceUncheckedValue";
    static final String GREATER_THAN_INSURANCE_TRESHOLD = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold";
    static final String SLIDER_ID = "sliderId";

    private static final Logger LOGGER = LoggerFactory.getLogger(DevDemoSliderHintValidator.class);

    public DevDemoSliderHintValidator() {
        this.name = "DevDemoSliderHintValidator";
        this.version = "1.0";
        this.description = "Walidator zwracający komunikat walidacyjny w formie hinta dla slidera.";
        this.fields.put(SLIDER_INPUT, "Wartość ze slidera");
        this.fields.put(SLIDER_ID, "Identyfikator walidowanego slidera");
        this.fields.put(INSURANCE_AMOUNT_THRESHOLD, "Próg dla kwoty z ubezpieczeniem");
        this.fields.put(MAX_AMOUNT, "Maksymalna wartość w sliderze");
        this.fields.put(MIN_AMOUNT, "Minimalna wartość w sliderze");
        this.fields.put(INSURANCE_CURRENT_VALUE, "Aktualna wartość ubezpieczenia");
        this.fields.put(INSURANCE_COMPONENT_ID, "Identyfikator komponentu ubezpieczenia");
        this.fields.put(INSURANCE_UNCHECKED_VALUE, "Wartość niezaznaczonego ubezpieczenia");

        this.possibleErrors.put(LESS_THAN_MIN, "Minimalna kwota pożyczki to <strong>{0} PLN</strong>");
        this.possibleErrors.put(GREATER_THAN_MAX, "Dla pożyczki wyższej niż <strong>{0} PLN</strong> na rękę musimy zadać Ci kilka dodatkowych pytań.");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD, "Jeżeli chcesz pożyczkę z ubezpieczeniem wyższą niż <strong>{0} PLN</strong> na rękę, odwiedź dowolny oddział Banku.");
        this.possibleErrors.put(LESS_THAN_MIN_BUTTON_LABEL, "Rozumiem >");
        this.possibleErrors.put(GREATER_THAN_MAX_BUTTON_LABEL, "Tak, chcę wnioskować o {1} PLN");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT, "Zmniejszam kwotę");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE, "Bez ubezpieczenia");
    }

    @Override
    public ValidatorOutput validate(ValidatorInput validatorInput) {
        LOGGER.info(">> Validator called with params: {}", validatorInput);
        ValidatorOutput result = new ValidatorOutput();

        if (isValueGreaterThanMax(validatorInput)) {
            result.setErrors(singletonList(valueGreaterThanMaxMessage(validatorInput)));
        } else if (isValueLessThanMin(validatorInput)) {
            result.setErrors(singletonList(valueLessThanMinMessage(validatorInput)));
        } else if (isValueGreaterThanInsuranceTresholdAndInsuranceIsChecked(validatorInput)) {
            result.setErrors(singletonList(valueGreaterThanInsuranceTresholdAndInsuranceIsCheckedMessage(validatorInput)));
        }

        LOGGER.info("<< Output: {}", result);
        return result;
    }

    private boolean isValueGreaterThanMax(final ValidatorInput input) {
        return asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(MAX_AMOUNT))) > 0;
    }

    private ValidationMessage valueGreaterThanMaxMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(GREATER_THAN_MAX, asList(input.getFirstValue(MAX_AMOUNT), input.getFirstValue(SLIDER_INPUT)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(singletonList(ValidationAction
                .builder()
                .actionData("https://www.xxxxxxx.pl")
                .actionType(ValidationActionType.REDIRECT)
                .actionName(GREATER_THAN_MAX)
                .content(GREATER_THAN_MAX_BUTTON_LABEL)
                .build()));
        return message;
    }

    private boolean isValueLessThanMin(final ValidatorInput input) {
        return asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(MIN_AMOUNT))) < 0;
    }

    private ValidationMessage valueLessThanMinMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(LESS_THAN_MIN, singletonList(input.getFirstValue(MIN_AMOUNT)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(singletonList(ValidationAction
                .builder()
                .actionData(input.getFirstValue(MIN_AMOUNT))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(SLIDER_ID))
                .actionName(LESS_THAN_MIN)
                .content(LESS_THAN_MIN_BUTTON_LABEL)
                .build()));
        return message;
    }

    private boolean isValueGreaterThanInsuranceTresholdAndInsuranceIsChecked(final ValidatorInput input) {
        return !equalsIgnoreCase(input.getFirstValue(INSURANCE_CURRENT_VALUE), input.getFirstValue(INSURANCE_UNCHECKED_VALUE))
                && asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD))) > 0;
    }

    private ValidationMessage valueGreaterThanInsuranceTresholdAndInsuranceIsCheckedMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(GREATER_THAN_INSURANCE_TRESHOLD, singletonList(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(asList(ValidationAction
                .builder()
                .actionData(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(SLIDER_ID))
                .actionName(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT)
                .content(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT)
                .build(), ValidationAction
                .builder()
                .actionData(input.getFirstValue(INSURANCE_UNCHECKED_VALUE))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(INSURANCE_COMPONENT_ID))
                .actionName(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE)
                .content(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE)
                .build()));
        return message;
    }

    private BigDecimal asBigDecimal(final String str) {
        final String digits = removePattern(str, "[^0-9-]");
        return isNotEmpty(digits) ? new BigDecimal(digits) : BigDecimal.ZERO;
    }
}

Wniosek demo: demoSlider

Wniosek demo w wybranych wdrożeniach: demoSliderValidationHint

♿WCAG: Dobre praktyki WCAG dla low-code dev