One Of

The Goal

Prepare an application switching content based on the One Of component.

The One Of Application

The Description

In our case, the Options Dropdown menu will contain two parameters Items that selected Value will be checked by the One Of component.

The Knowledge You Will Get

1. The Principle of how to use the One Of component.

The Project Structure

View[MainView]

• MainView

  • Container[container1]

    • Options[dropdown]

    • One Of[oneOf1]

      • Container(#1)

        • Text[text1]

      • Container(#2)

        • Text[text2]

1. Prepare a Basic Layout

Let's prepare a basic Layout containing the Option Dropdown menu and One Of component.

1. Place in MainView a new Container and set up its ID -> container1; Item Flex -> Stretch

2. Into the container1 place a Options, name it dropdown and add two Items:

   1. #1 -> Value -> "first"

   2. #2 -> Value -> "second"

3. Then placed a One Of component with ID -> oneOf1; Item Flex -> Stretch; and add two Options:

   1. #1 -> Option -> Name -> "First option"

   2. #2 -> Option -> Name -> "Second option"

4. Switching the Clog by oneOf1 input to each of the two Texts components:

   1. First option -> add a Text, name its Value -> "FIRST"; Text Alignment -> Middle; Text Style -> Bold; Font Size -> Large

   2. Second option -> add a Text, name its Value -> "SECOND"; Text Alignment -> Middle; Text Style -> Bold; Font Size -> Large

2. Add a Switching Conditions

Comparing the dropdown Value of oneOf1 Options Conditions will trigger the display of different Content Layouts.

1. Switch the oneOf1 Conditions to dynamic Functions and set up as follows:

   1. First option -> Condition -> dropdown.value == "first"

   2. Second option -> Condition -> dropdown.value == "second"

Don't forget that any Current Values of any existing components are visible in the Data Explorer.

DATA EXPLORER[dropdown]

The Conclusion

The One Of component is an effective tool how to switch between content. Try to add more Option Layouts and change them by a different component method.

Follow up on our One Of tutorial https://youtu.be/ywBr11REwrQ