# One Of

### The Goal

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

![The One Of Application](/files/nwf2hX61MS2JEB7VtRUL)

### 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

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[container1]
    * [ ] Options\[dropdown]
    * [ ] One Of\[oneOf1]
      * [ ] Container(#1)
        * [ ] Text\[text1]
      * [ ] Container(#2)
        * [ ] Text\[text2]
          {% endtab %}
          {% endtabs %}

### 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"`

{% hint style="info" %}
Don't forget that any *Current Values* of any existing components are visible in the Data Explorer.
{% endhint %}

{% tabs %}
{% tab title="DATA EXPLORER\[dropdown]" %}
![](/files/K2mCvuhqMRCrUEyR7wh4)
{% endtab %}
{% endtabs %}

### 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.

{% hint style="info" %}
Follow up on our *One Of* tutorial <https://youtu.be/ywBr11REwrQ>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/ui-logic/one-of.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.