69
Views
9
Comments
Solved
[Silk UI Web] Silk ButtonGroup
Forge component by OutSystems R&D
106
Published on 09 Mar 2020
Application Type
Reactive

Hi all,


I'm using Silk Template in a new module that i'm working on.

I'm trying to configure a ButtonGroup with 2 values and depending on each value show a different table.

For this, I created a local variable called getRubricaType that is Boolean Type and put it on each Radio Button Variable


As you can see in screens above I also associated in Extended Properties as getRubricaType = True/False (I don't know if this is correct)

In If Widget the condition is getRubricaType = False 

The issue is that this isn't working. I don't change between tables and I don't know what I'm doing wrong.

Can anyone help me?

Rank: #93
Solution

Hello João,

Hope you're doing well.

Let me give you my thoughs on this one :)

(Edit: sorry, I didn't see that Dorine was about to do an example as well!)


1) It is not a good practise to call Get<something> to a boolean variable. Usually they follow a nomenclature like Is<something>, Has<something> or Show<something>. This is just a small suggestion because your naming can be confusing for other developers in your team.


2) Like Dorine said, you don't need those Extended Properties. If you want to assign a value to a variable, you should use an Assign widget:

Extended Properties are basically attributes that you may add to an element in the HTML (ex: src, style, class)


3) An Ajax Refresh is used to refresh only part of the screen. With that said, you can use it when you define a name to a specific element/widget. In your scenario, you have your If widget to determine if you'll show RubGeralTable or RubOrcamentalTable, right? Therefore, you want to refresh the container that contains these elements. Just give a name to your Container element (like you did for Filters_Wrapper) and it will appear as an option to be refreshed.


4) Your logic inside of OnRubricaTypeChange action should be something simple. You only need to use the Ajax Refresh on that element. You don't need to have that extra if :) because the value of your variable is controled by your radio buttons and the screen controls which table you want to show.


Here's a quick sample for you to check it:

https://rbarradas.outsystemscloud.com/Product/Entry1.aspx?_ts=637437442732158223


Please refer to attached OML file just as an example.


Hope that this helps you!


Kind regards,

Rui Barradas

Product.oml

Rank: #129
Solution

Hi Joao,

I'm not using Silk, so don't know for sure but

1° you don't need to use that extended propertie, you have already assigned the true and false with the "value" property.

2° I'm assuming this is traditional web, right ?   So you'll need to use the OnChange event of both radio buttons, and do an ajax refresh of the IF widget to see the effect of the changed variable value.


Dorine


EDIT : a small remark on style : if you have a variable of type boolean, than the variable itself can be used as condition, you don't have to compare it to true or false.  I personally just think that looks better.  So in your case, I would probably call the variable ShowRubricaGeral, for example, and for the if condition you can just use the variable.

Rank: #2279

Hi Dorine,


Thank you for your input.

A created an event OnRubricaTypeChange as this:

I don't know if this how to use the Ajax Refresh, but I only option available to choose was the tables inside the If Widget.



Can I use this way or do I need to do an event for each radio button? This way didn't work either :(


About your remark, can you explain a little bit better how you use it?


Regards


Rank: #129

you have to first give your IF widget a name, then you can choose that to refresh.  You don't need to refresh the tables.

After dinner, I'll make you a quick example of what i mean with the remark

Rank: #2279

Giving names to widgets....that's something that i must put in my to-do list ;)

It worked as planned!!! :D


Thank you for your help. 


(I will wait for that example ;) ) 

Rank: #93
Solution

Hello João,

Hope you're doing well.

Let me give you my thoughs on this one :)

(Edit: sorry, I didn't see that Dorine was about to do an example as well!)


1) It is not a good practise to call Get<something> to a boolean variable. Usually they follow a nomenclature like Is<something>, Has<something> or Show<something>. This is just a small suggestion because your naming can be confusing for other developers in your team.


2) Like Dorine said, you don't need those Extended Properties. If you want to assign a value to a variable, you should use an Assign widget:

Extended Properties are basically attributes that you may add to an element in the HTML (ex: src, style, class)


3) An Ajax Refresh is used to refresh only part of the screen. With that said, you can use it when you define a name to a specific element/widget. In your scenario, you have your If widget to determine if you'll show RubGeralTable or RubOrcamentalTable, right? Therefore, you want to refresh the container that contains these elements. Just give a name to your Container element (like you did for Filters_Wrapper) and it will appear as an option to be refreshed.


4) Your logic inside of OnRubricaTypeChange action should be something simple. You only need to use the Ajax Refresh on that element. You don't need to have that extra if :) because the value of your variable is controled by your radio buttons and the screen controls which table you want to show.


Here's a quick sample for you to check it:

https://rbarradas.outsystemscloud.com/Product/Entry1.aspx?_ts=637437442732158223


Please refer to attached OML file just as an example.


Hope that this helps you!


Kind regards,

Rui Barradas

Product.oml

Rank: #129

Hi Joao,

see this oml.  

What I meant to say is, if you have some boolean variable, that you want to use in a condition (such as the condition of the IF widget) you can say

"If variable" instead of "If variable = True"

"If not variable" instead of "If variable = False"

And if you choose good names for your variables, in my opinion that makes for more readable code.

So in your example, if you keep the everything as is, you could have in condition of IF

Not getRubricaType instead of getRubricaType = False 

But I think your variable doesn't have a very good name, I'd make it "MostreRubricaGeral", I would make the value for RubricaGeral choice True, and the other one False, and condition of the IF widget can be just MostreRubricaGeral.

Have fun coding,

Dorine

P.S. how is my attempt at making up a portuguese variable name  :-O ?????

twRadioButtonGroup.oml

Rank: #2279

Once again, thank you for your help and for the oml.

In fact, that makes a lot more sense and much easier to read.

With this simple question that I posted, I learned A LOT with you and with Rui.

This community is a great help for beginners, like me, to understand how we should start thinking and how to structure the application.

As a Process Manager background as I'm, sometimes isn't easy to put the programmer hat and start thinking/programming but this forum help a lot with that!

About your variable in Portuguese, is brilliant! :D

Rank: #2279

Hi Rui,


I must say, with your post, you helped me to understand concepts that were in the grey/black area for me.

THIS IS A GREAT POST for someone as a beginner like me to understand these simple things!!!!


Really, Thank you very much for all that explanation!


Regards for all

Rank: #93

Hello João,

I'm glad that you found that information helpful :)

Happy coding!


Kind regards,

Rui Barradas