Have active button color (like a menu) on click

Ask the community
,
1

Hi,

I have a list made out of a repeater on a dynamic page with a menu over it with 7 button.

I want my button to act like a menu.
When i click one ive made a code that sort the column under it, but i would like the button to turn green too and stay like that until another button is clicked for a different sort (then it would come back gray)

And i would like to have example the ‘date’ button green by default, it is the opening sort when you open the index.

There is the said index with the buttons.

1298×818 217 KB

Thanks in advance!

2

Hi,
Lets say that you wish the button to turn green once clicked. You can locate a green button on top of each brown button and set them to be hidden on load . Once a brown button is clicked, you can hide the brown button and show the green button instead. You can do that by using the onClick event.

Good luck!
Tal.

3

Hi,

When i will have clicked lets say one of the gray button and the hidden one will have appear, how it is gonna return gray when i will select another gray one?, whatever wich one of the 7.

thanks!

4

Just hide it :slight_smile:
I’ll just go with a general skeleton code, and assume the green buttons are called ‘menuButtonGreen1’, '‘menuButtonGreen2’ …:

function highlightRelevantButton(selectedButtonIndex) {
    const numberOfButtons = 10;
    for (let i = 1; i < numberOfButtons; i++) {
        if (i === selectedButtonIndex) {
            $w(`menuButtonGreen${i}`).show();
        } else { 
            $w(`menuButtonGreen${i}`).hide();
        }
    }
}

Call this function every time you switch a page.

Liran.

5

Actually, if I understand you correctly, there might be an easier way to do what you’re trying to do:

  1. Select the dropdown

  2. Click its “design” button (the one that looks like a paintbrush)

  3. Go to “customize design”

  4. You’ll see a dropdown for selecting what state of the dropdown you want to design. Select “Focus”

  5. Change the design parameters in the panel.

663×579 25.5 KB

6

Hey liran, when you say, “every time i switch a page” , do you assume that each time i click one of my button i go to a different page?
Because it’s actually just sorting the list below, there is one page only.

Humm Uval, i dont think we talk about the same thing, me it’s 7 separate buttons that sort the list below them, that i want to act like a menu (the one i clicked to sort lets say “age” , i want it to change color so it’s in ‘clicked’ state, then return to its original color once another button is clicked.

7

hey guyz i found a another way to highlight the clicked button using invisible box above the like button and by using the disable option in liked button to highlight.

this is the code (please note that i am not a coder XD)

export function repeater1_itemReady($w, itemData, index) {
$w(“#Like”).onClick( () => {
if ($w(“#Like”).label === “Like”){
$w(“#Like”).label = “Liked”;
$w(“#Like”).disable();
//highlight this disable button as you want
$w(“#box2”).show();
//choose hidden on load on box2
} else {
$w(“#Like”).label = “Like”;
}
});
}
//place the invisible box above the like button
export function box2_click(event, $w) {
$w(“#Like”).enable();
$w(“#Like”).label = “Like”;
$w(“#box2”).hide();
}

8

Hi Guillame,

Did you ever get this “click state” to work? I have the EXACT same question and trying to make it work on my Menu…let me know!