<Match>/<Case> and <Set>

How-to Discussions
1

Hello,

I am trying to build parts of my UI based on cases. I need buttons and other UI elements to change behavior depending on Observables values. However, Match/Case and Set don’t seem to play well, and I’ve been looking for an alternative. Here’s a case example:

<!-- Icon is a Text, this is placed inside an Each loop -->

<Icon FontSize="32" Alignment="CenterLeft" Margin="0, 0, 25, 0">
    <Clicked>
        <Match Value="{sel}">
            <Case String="offline">
                <Set LevelsNavigation.Active="SecondLevel"/>
                <Set Target="NavigationTitle.Value" Value="{name}" />
            </Case>
            <Case String="online">
                <Set Target="mainAlert.AlertTitle" Value="This file will be Downloaded" />
                <Set Target="mainAlert.AlertDescription" Value="{}" />
                <Set Target="mainAlert.Value" Value="true" />
            </Case>
        </Match>
    </Clicked>
</Icon>

In Slack, @Jake suggested I placed different versions of the <Icon> tag with different <Clicked> events, one for each case, instead of trying to place the Cases inside the Click event.

However this causes two issues: 1) Depending on how you need to build the UI, you might be out of the scope for some of the Set actions if they target other UI elements at higher levels; 2) You’re writing the UX all over again for each case which is very hard to maintain, update, and redundant.

Is there any suggested way to resolve this kind of design? Are there plans to create a proper "If" UX block that allows us to trigget actions inside cases?

ERROR: Fuse.Reactive.DataBinding`1<string> cannot be used here, because there are no suitable parent nodes in this scope.
2

Hi! Try StateGroup and State instead of Match/Case

3

Hi Anders,

I don’t see how StateGroup would allow me to evaluate the Observable in order to activate the states. Could you provide an example?

4

Hi Fernando! Did you figure this one out? Did data-binding StateGroup.Active help?

5

Hi Hasselknippe,

I believe I got the logic straight and @uldis made an example for me which helped a lot, but I guess I just don’t have the javascript-fu to hook up all the data and adapt it to my complex structure.

But if I could take the chance to ask for some sort of If this then that block for UI conditions like in my example above that would be very awesome.

Thank you for all the help :slight_smile: