LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • The Goal
  • The Description
  • The Knowledge You Will Get
  • The Project Structure
  • 1. Prepare a Basic Layout
  • 2. Add a Switching Conditions
  • The Conclusion

Was this helpful?

  1. Working with Adapptio
  2. How To
  3. UI Logic

One Of

PreviousConditional RenderNextData & Dynamic values

Last updated 3 years ago

Was this helpful?

The Goal

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

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

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.

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
The One Of Application