Champion
46
Views
12
Comments
Solved
[OutSystems UI] Range Slider - Disable dynamically
outsystems-ui
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

Hello,

I have a list with sliders and I would like to have a possibility to define the value how far the user can go (Without changing the MaxValue).

For example, if I have 3 sliders and among the two first sliders I reached the 100% the third one will be disabled (Already done) and the first two sliders can't go more than what the user put before the user decrease one of those.

example: https://ptorres.outsystemscloud.com/AppTestes/SlidersTest

Thanks

Solution

Hi Paulo

maybe you will have to work with the slider current value and that way you don't touch the max value.

What I tried do say is, the max value is updated at runtime, only at that time when the application is running, I don't see another way to block the slider 3 if the sum of the first two is equal to 100%.

Thank you for your attention

Regrads

Hi Paulo,


from you example I went to 280& ...

What you should do is to define the max value of the third slider is 100 (current_value_slider_1 + current_value_slider_2), but it has to be done dynamic way, in another words when one slider moves you will have to call a function that updates the max value of the remanding slider, that is what i think.

Hope it helps you

Regards

Champion

Hi Carl,

This is something that will change the MaxValue of slider, it's exactly what I don't want.

Thanks for your reply anyway

Solution

Hi Paulo

maybe you will have to work with the slider current value and that way you don't touch the max value.

What I tried do say is, the max value is updated at runtime, only at that time when the application is running, I don't see another way to block the slider 3 if the sum of the first two is equal to 100%.

Thank you for your attention

Regrads

Hi @Paulo Torres,


If I understood your use-case, I believe the Library's Limit option is what you want.

You can use the Client Action SetNoUISliderConfigs, on the Initialized event of the RangeSlider, to set a custom value to that option:

Best regards,

Bernardo Cardoso

Champion

Hi Bernardo,

It sound like a music for my ears :)

I'll test and let you know.

Thanks a lot

Champion

Hi @Bernardo Cardoso 

Unfortunately, when the slider is inside a list, when defining something with the action SetNoUISliderConfigs , the slider disappears from the screen.

Some another idea?

Thanks


Hi Paulo, 

Can you share an oml?


Bernardo

Champion

Hello @Bernardo Cardoso,

Thanks for your support.

The oml attached.

Thanks

AppTestes.oml



@Paulo Torres ,entendi a sua necessidade. Para implementar essa funcionalidade em controles deslizantes no OutSystems, você pode usar eventos JavaScript para controlar o limite máximo de deslizamento com base na soma dos valores selecionados nos controles deslizantes anteriores. Aqui estão os passos gerais para implementar isso:


1-Adicionar um evento JavaScript: Primeiro, você precisará adicionar um evento JavaScript para os controles deslizantes que deseja controlar. Você pode fazer isso clicando com o botão direito no controle deslizante no Service Studio, selecionando "OnValueChanged" e, em seguida, escolhendo a opção "Run JavaScript".


2-Escrever o código JavaScript: No evento JavaScript, você pode escrever um código para calcular a soma dos valores selecionados nos controles deslizantes anteriores e, em seguida, definir o valor máximo do controle deslizante atual com base nesse cálculo. Aqui está um exemplo de código JavaScript genérico:


Obtém os valores dos controles deslizantes anteriores

var valorControle1 = $public. Widgets.ControleDeslizante1.getValue();

var valorControle2 = $public. Widgets.ControleDeslizante2.getValue();


Calcula a soma dos valores dos controles deslizantes anteriores

var somaValoresAnteriores = valorControle1 + valorControle2;


Define o valor máximo para o controle deslizante atual

var controleAtual = $public. Widgets.ControleDeslizanteAtual;

controleAtual.setMaxValue(100 - somaValoresAnteriores);


Verifica se o valor atual do controle deslizante é maior que o valor máximo permitido

var valorAtual = controleAtual.getValue();

if (valorAtual > controleAtual.getMaxValue()) {

    controleAtual.setValue(controleAtual.getMaxValue());

}


Certifique-se de substituir ControleDeslizante1, ControleDeslizante2 e ControleDeslizanteAtual pelos nomes reais dos seus controles deslizantes.


3-Configurar o controle deslizante: Você também precisará configurar os valores iniciais e máximos para cada controle deslizante com base nos seus requisitos.


4-Ativar/Desativar o controle deslizante: Para desativar o terceiro controle deslizante quando a soma dos dois primeiros atingir 100%, você pode adicionar uma lógica condicional para verificar isso e definir o controle deslizante como desativado usando o JavaScript.


Lembrando que este é um exemplo genérico, e você precisará adaptar o código JavaScript às suas necessidades específicas e à estrutura da sua aplicação OutSystems. Certifique-se de testar cuidadosamente e ajustar conforme necessário.

Champion

Hi Fernando,

Thanks for your feedback :)

I'm trying to understand if exists a way to do without JS, if not I'll do with JS, no other choice :)


Hi @Paulo Torres,


Sorry, but the Provider option Limit is just supported for the RangeSliderInterval, so it wouldn't help your use-case.

Honestly, I agree with @carl ruhle, I see no other way to do this, then using the MaxValue parameter. It exists for this kind of use-cases.

In relation to your issue when using SetProviderConfigs, it should work with this:


(but please note, that OutSystemsUI already changes to RTL when needed, automatically).

Best regards,

Bernardo Cardoso

Champion

What @carl ruhle suggested changed the MaxValue in runtime, so you see the slider decreasing, it's a poor user experience. I'll look for a library.

In fact the only way to put this working is with JS for the language required.

$parameters.ResponseJSON = OutSystems.OSUI.Patterns.RangeSliderAPI.SetProviderConfigs(    $parameters.WidgetId,    JSON.parse($parameters.ProviderConfigs));

Thanks for your help

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.