Toggle Set 10-04-2021 01:47 AM - last edited 10-04-2021 01:47 AM

[R3dKap]

[25-mar-2020 update] : removed Reset parameter, added MaxSelectedItems parameter

_____________________________________________________________________________________________________________________________

This component will allow you to add nice toggle sets to your applications. They are fully customizable so you will be able to give them the look and the behavior you want:

Its parameters are as follow:

- AllowNoSelection = if only one item is selected, allows the user to unselect it, thus having no items selected at all

- BorderColor = color for the borders of the toggle set (as well as for the vertical separating lines between items)

- BorderThickness = border thickness of the component

- Color = text color for non-selected items

- DisabledColor = text color for disabled items

- DisabledFill = item fill color for disabled items

- FontWeight = font weight for the item labels

- Items = list of items for the toggle set (columns are: Id, Value, Disabled, Size, Selected)

- ItemFill = fill color for non-selected items

- MaxSelectedItems (number) = maximum number of items that can be selected (only if SelectMultiple is True, then value should be between 2 and number of items in Items)

- Radius = in pixels, radius for the left and right corners of the component

-Reset= resets the components to its defaults pre-selected items specified in the Itemsproperty (use the Selectedcolumn) (use Reset() function instead)

- SelectedBorderColor = border color of selected items

- SelectedColor = text color for selected items

- SelectedFill = fill color for selected items

- SelectMultiple = allows the selection of multiple items

- Size = default font size for the item labels

Here is the link to all detailed information: https://github.com/e-gallis/PowerApps/tree/master/Components/ToggleSet

Enjoy!

[R3dKap]

Just updated the component to remove one parameter and add a new one (see initial post above).

[lras120265]

@R3dKap : Really like the menu component! Planning to use it in my app. 

I am new to PowerApps. How to click on the menu option to go to different screen?

Thanks!

[R3dKap]

Hi @lras120265,

I'm glad you'll be using the component in your app (if you could post a screen shot of what you did with it I'd love it! 😉).

If you want to navigate to another screen when you click on an item, here is how to do it:

• let's say you have the toggle set component on Screen1 and you named it cmpToggleSet
• let's suppose you set cmpToggleSet.SelectMultiple to: false
• on Screen1 add a hidden Toggle Power Apps control (let's name it _togToggleSetOnChange)
• Set _togToggleSetOnChange.Default to: cmpToggleSet.OnChange
• Set _togToggleSetOnChange.OnCheck to:

Switch(
    First(cmpToggleSet.SelectedItems).Id,
    1,
    Navigate(Screen4),
    2,
    Navigate(Screen3),
    23,
    Navigate(Screen8),
    etc...
)

That should do the trick. Don't forget to have a look at the component on Github as there are more detailed explanations: https://github.com/e-gallis/PowerApps/tree/master/Components/ToggleSet.

Hope this helps,

R3dKap

[lras120265]

@R3dKap 

Thank you so much! I definitely will post my screen here. 

[PowerdriveX6]

Absulutely must-have as default component in PowerApps, as i think 😉
Thanks a lot for such amazing work!
Is it possible to modify it to have different SelectFill for different buttons?
I mean something like that:

In case of item 1 selected (Bad) - SelectFill=orange,

default state - item 2 selected (Non checked) - SelectFill=Blue,

item 3 selected (Good) - SelectFill=Green.

[R3dKap]

Hi @PowerdriveX6,

Glad you like it... 😊

Yes sure it's possible to have a specific color for each entry when it's selected. Here is how to do it:

1. Edit the component
2. Edit the Items property and add a SelectedColor property of type Color to each item in the record like this:
   
3. Then, change the Fill property of the btnItem_TS button to the following formula:

If(LookUp(ToggleSet.SelectedItems, Id=ThisItem.Id).Id <> Blank(), ThisItem.SelectedColor, ToggleSet.ItemFill)

That should do it. I've tested it on my side and it works fine...

[PowerdriveX6]

Yeah, now its work as i plan 🙂
Im was only 1 step from the same solution, but stucked on last step, when use incorrect referring to SelectedColor value

ToggleSet.SelectedColor, ToggleSet.ItemFill

 instead of

ThisItem.SelectedColor, ToggleSet.ItemFill

Again, a lot of thanks for component and support 🙂

[RobotRising]

Have tried to get this working as a navigation but it appears the OnChange value is not being passed from the component or rather it is not changing to true when a new selection is made. 

[R3dKap]

Hi @RobotRising,

Just fixed the component so the OnChange event is really triggered... (a missing semi-colon 😒).

Please download it again from Github.

Thank your for your patience... 🙏