> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt > Use this file to discover all available pages before exploring further. # UI Designer > The FlowX.AI UI Designer is a comprehensive, multi-platform interface creation tool that enables visual design of user experiences across web, iOS, and Android platforms without extensive coding. ## Purpose The **FlowX.AI UI Designer** is an intuitive interface creation tool for building user interfaces within FlowX.AI processes. It provides a visual editor where you can add, arrange, and configure UI components to create rich web interfaces for your business processes. ### Key capabilities > [card] Multi-Platform Support > > Create interfaces with platform-specific configuration and styling across Web, iOS, and Android > [card] Visual Interface Design > > Use a drag-and-drop environment to design diverse UI templates with various elements and components > [card] Real-Time Preview > > Preview your designs across different platforms and themes with live feedback > [card] Component Library > > Access ready-to-use UI components including form elements, containers, and specialized components > [!NOTE] > > The UI Designer integrates with BPMN process flows, making it available for [**User Task**](https://docs.flowx.ai/6.x/docs/building-blocks/node/user-task-node.md) nodes and **Navigation Areas** to create contextual user interfaces. ## UI Designer interface The UI Designer provides a comprehensive interface for creating and configuring user interfaces within your FlowX.AI processes. ### Platform selection The UI Designer supports multi-platform design with dedicated configuration tabs: > [tab] Web Platform > > **Full Feature Support**: Complete UI Designer functionality with all component types and navigation features > > * All UI component types supported > * Full navigation area capabilities > * Zones with headers and footers > * Single page and wizard navigation types > [tab] iOS Platform > > **Mobile-Optimized Interface**: Platform-specific properties and limitations > > * Basic navigation areas (no zones with headers/footers) > * Screen title configuration for navigation bar > * Scrollable property for card components > * Platform-specific property overrides > [tab] Android Platform > > **Mobile-Optimized Interface**: Android-specific adaptations > > * Basic navigation areas (no zones with headers/footers) > * Screen title configuration for navigation bar > * Platform-specific property overrides > * Material design considerations ### Configuration panels The UI Designer interface consists of configuration sections for comprehensive component setup: > [accordion] Settings Tab > > **Generic Configuration**: Properties available cross-platform (Web, Android and iOS) > > **Platform-Specific Settings**: Override generic properties for specific platforms > > * Property overrides (Title, Subtitle, Helper text) > * Expression overrides (Hide conditions) > * Import/export functionality between platforms > [accordion] Styles Tab > > **Theme Integration**: Components inherit styling from the active theme by default > > **Theme Overrides**: Customize component appearance beyond theme settings > > * Platform-specific styling > * Conditional styling (for Text, Link, Container elements) > * Import/export styles between platforms > [accordion] Preview > > **Multi-Platform Preview**: Switch between platforms to preview designs > > * Real-time platform switching > > * Theme selection for preview > > * Visual estimation for mobile platforms > > > [!NOTE] > > > > iOS and Android previews are estimates to help visualize mobile views. ### UI components available The FlowX.AI platform offers a variety of ready-to-use UI components. The groupings below follow the navigation order: > [accordion] Root components > > **Layout foundation elements**, the framework for arranging everything else: > > * **[Root components overview](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/root-components.md)**: How root components structure a screen > * **[Container](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container.md)**: Flexible grouping and layout control > * **[Card](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card.md)**: Content cards with built-in styling > * **[Custom](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/custom.md)**: Advanced custom component integration > * **[Global header and footer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/global-header-footer.md)**: Top and bottom areas shared across every page of a UI Flow > [accordion] Form elements > > **Data collection components**, for capturing user input: > > * **[Input](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md)**: Text input fields > * **[Textarea](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/text-area.md)**: Multi-line text input > * **[Select](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field.md)**: Dropdown menus > * **[Multi select](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/multi-select.md)**: Choose several options from one list > * **[Checkbox](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/checkbox-form-field.md)**: Multiple selection options > * **[Radio](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/radio-form-field.md)**: Single selection from options > * **[Switch](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field.md)**: Toggle controls > * **[Datepicker](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/datepicker-form-field.md)**: Date and time selection > * **[Slider](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/slider.md)**: Range and numeric input > * **[Segmented button](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/segmented-button.md)**: Multi-option selection > [accordion] Action, file and display elements > > **Interactive and display components**: > > * **[Buttons](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/buttons.md)**: Action triggers and navigation, including the [File Upload Button](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/buttons.md#file-upload-button) for uploading one file at a time > * **[Multiple file upload](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/multiple-file-upload.md)**: Drag-and-drop area for uploading several files in one action > * **[File preview](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/file-preview.md)**: Preview file contents without fully opening the file > * **[File download](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/file-download.md)**: Let end users download a file from a rendered app > * **[Table](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/table.md)**: Structured data presentation > * **[Image](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/image.md)**: Media display > * **[Typography](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/typography.md)**: Text and links > * **[Indicators](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/indicators.md)**: Status and message display > [accordion] Chat and content elements > > **Conversational and formatted content**: > > * **[Chat](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/chat.md)**: Interactive AI agent conversations, with sub-components for the header, history, messages, input, suggested prompts and file attachments > * **[Markdown](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/markdown.md)**: Renders Markdown-formatted content on a screen > * **[Separator](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/separator.md)**: Visual divider for grouping content > * **[Progress bar](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/progress-bar.md)**: Visualizes progress or completion state > * **[Tooltip](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/tooltip.md)**: Shows extra context on hover or focus > [accordion] Collections > > **Dynamic content components**, for repeated content and dynamic data: > > * **[Collection](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection.md)**: Dynamic lists of data > * **[Collection prototype](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection-prototype.md)**: Templates for collection items ### Component configuration After adding a UI component, the right-side menu displays configuration options: * **Settings Tab**: Configure component properties and behavior * **Styles Tab**: Customize appearance and apply theme overrides * **Platform Overrides**: Adapt components for specific platforms ### Navigation areas integration Navigation areas can be configured through the UI Designer, providing: * Hierarchical navigation structure * Platform-specific navigation capabilities * Copy/paste functionality for consistency across platforms ## Using the UI designer To access the UI Designer and start building interfaces: **1. Open FlowX.AI Designer** Navigate to **FlowX.AI Designer** and select **Definitions** from the **Processes** tab. **2. Select Process** Choose a **process** from the process definitions list. **3. Edit Process** Click the **Edit process** button to enter editing mode. **4. Access UI Designer** Select a **User Task node** or a **Navigation Area** then click the **brush icon** to open the **UI Designer**. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/ui_ui_designer.gif) > [!NOTE] > > The UI Designer is available for [**User Task**](https://docs.flowx.ai/6.x/docs/building-blocks/node/user-task-node.md) nodes and **Navigation Areas** elements, providing contextual interface design capabilities. > [!TIP] > > **Productivity Features**: > > * **Undo/Redo**: Available within the UI Designer for actions such as dragging, dropping, or deleting elements > * **Keyboard Shortcuts**: Use keyboard commands for quick access to undo/redo functionality > * **Drag and Drop**: Support for dragging and dropping elements in the preview section > * **Settings Panel**: Right-side menu displays configuration options after adding components ## Comprehensive design guides Master the UI Designer with our detailed guides covering every aspect of interface creation: > [card] [Screen Configuration Guide](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/screen-configuration-guide.md) > > **How to Approach Screen Configuration** > > Learn the systematic methodology for creating effective user interfaces: > > * User journey definition and analysis > * Navigation pattern selection > * Information architecture planning > * Layout strategy implementation > * Platform-specific adaptations > * Validation and testing approaches > [card] [Best Practices](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/best-practices.md) > > **UI Designer Best Practices** > > Essential guidelines for creating accessible, performant interfaces: > > * User-centered design principles > * Information architecture standards > * Component usage excellence > * [Accessibility compliance (WCAG 2.1)](https://docs.flowx.ai/6.x/docs/platform-deep-dive/accessibility.md) > * Testing and quality assurance > * Maintenance strategies > [card] [Platform Considerations](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/platform-considerations.md) > > **Platform-Specific Guidelines** > > Comprehensive platform optimization and limitation reference: > > * Web, iOS, and Android design patterns > * Performance optimization strategies > * Platform-specific constraints and workarounds > * Security and privacy considerations > * Cross-platform testing protocols > [card] [Latest Features](#latest-features) > > **Advanced UI Designer Capabilities** > > Discover the features in FlowX.AI UI Designer: > > * Conditional styling for dynamic interfaces > * Platform-specific configuration and overrides > * Advanced form components with validation > * Navigation areas integration > * Flexible layout configuration and reusable templates ## Latest features FlowX.AI UI Designer includes several advanced features for creating rich, interactive user interfaces: > [accordion] Conditional Styling > > **Dynamic Styling Based on Data** > > * Apply styles conditionally based on process data > * Available for Text, Link, and Container elements > * Real-time evaluation with priority handling > * Platform-specific styling overrides > > **Configuration**: > > * Navigate to Styles tab → Conditional Styling section > > * Add expressions and effects using JS Editor > > * Define conditions and style overrides > > > [!TIP] > > > > Use conditional styling to highlight data patterns, outliers, or trends directly within the interface, reducing the need for multiple prototypes. > [accordion] Platform-Specific Configuration > > **Multi-Platform Design Support** > > * Universal configuration and styling across Web, iOS, and Android > * Platform-specific property overrides > * Generic settings with targeted customizations > * Import/export overrides between platforms > > **Key Features**: > > * Settings tab with platform selection > * Override system for properties and expressions > * Preview across different platforms > * Consistent yet platform-optimized experiences > [accordion] Advanced Form Components > > **Rich Form Element Support** > > * Input fields with validation (required, custom) > * Select components with CHANGE event handling > * Checkboxes and radio buttons with dynamic behavior > * File upload components with platform considerations > * Date pickers and sliders for enhanced input > > **Validation Features**: > > * Required field validation > * Custom validation rules > * Conditional validation based on other fields > * Real-time validation feedback > [accordion] Navigation Areas Integration > > **Enhanced Navigation Design** > > * Navigation areas accessible within UI Designer > * Platform-specific navigation capabilities > * Web: Full zones with headers/footers, wizard navigation > * Mobile: Basic navigation areas with screen titles > * Copy/paste navigation areas for consistency > [accordion] Layout Configuration > > **Flexible Layout System** > > * Linear layout with direction, justify, align controls > * Grid layout support for complex designs > * Gap settings for proper spacing > * Wrap functionality for responsive behavior > * Available for containers and grouping components > [accordion] Reusable UI Templates > > **Component Reusability** > > * Create modular UI components for reuse across processes > * Template hierarchy with data model support > * Input/output parameter mapping > * Visual components and layout focus > * Cannot include complex business logic ## UI components FlowX offers a wide range of [UI components](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#ui-components) that can be customized using the UI Designer. For example, when configuring a [card](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card.md) element (which is a root component), the following properties can be customized: ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/ui_ui_designer.gif) ### Settings tab ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/uI_designer_panel1.png) #### Generic tab This is where you configure the logic and assign process keys, event handlers, and other component settings that are common across all platforms (Web, iOS, Android). #### Platform-specific settings For example, on Android, you might want to change the Card title to a shorter one. To override a general property like a title, follow these steps: **1. Go to UI Designer** Access the UI Designer and select a UI Element, such as a **Card**. **2. Access platform-specific settings** From the UI Designer navigation panel, select the **Settings** tab, then select the **desired platform** **3. Perform the override** Click the "+" button (next to "Overrides") and select **Properties -> Title**, then input your desired value. > [!TIP] > > Settings overrides can always be imported/pushed from one platform to another: > > ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/importing_pushing_overrides.gif) **4. Preview your changes** Preview your changes in the UI Designer by navigating from one platform to another or by comparing them. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/props_ui_designer_override.gif) > [!NOTE] > > Keep in mind that the preview generated in the UI Designer for iOS and Android platforms is an estimate meant to help you visualize how it might look on a mobile view. #### Hide and disabled conditions Components can be hidden or turned read-only at runtime based on a JavaScript condition. Both live in the **Expressions** section of a component's **Settings** panel: | Field | Effect when the condition is true | | - | - | | **Hide condition** | The component is not rendered | | **Disabled condition** | The component is rendered but cannot be edited | **Step 1** Select a UI component in the **UI Designer**, then open **Settings** -> **Expressions**. **Step 2** Add your JavaScript condition in **Hide condition** or **Disabled condition**. Availability depends on the component. Most form fields support both, along with Form, Button, the file upload and download components, and the chat input. A hide condition is available on a wider set, including containers, cards, tables, text and images. **Setting a condition for one platform only** To hide or disable an element on a specific platform rather than everywhere, add the same expression as a platform override: **Settings** -> your desired platform -> **Overrides (+)** -> **Expressions**. A component whose expression is overridden on some platforms shows an info marker naming them. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/hide_condition.gif) ## Permission-based expressions Control UI element visibility and interaction based on user roles and process data. > [card] [Permission-based expressions](https://docs.flowx.ai/6.x/docs/building-blocks/process/permission-based-expressions.md) > > Complete guide to configuring role-based UI permissions, cross-swimlane references, and collaborative workflows ### Quick configuration **1. Enable multiple executors** In process settings, enable **Allow multiple executors** for your swimlane. **2. Select component** In **UI Designer**, select the component to configure. **3. Add condition** Expand **Permissions** section and click **+** to add hide or disable conditions. **4. Configure parameters** Set **Type** (USERNAME/ROLE), **Operator** (IN/NOT\_IN), **Value Type**, and **Value**. > [!TIP] > > Use `CONFIGURATION_SWIMLANE_ROLE` for swimlane roles and `PROCESS_DATA` for dynamic values. `SWIMLANE_OWNER` requires no value. ### Styles tab The Styles tab functions independently for three platforms: Web, iOS, and Android. Here, you can customize styles for each UI component on each platform. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/ui_designer_panel2.png) If you want to customize the appearance of a component to differ from the theme settings, you must apply a **Theme Override**. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/theme_overrides_styless.gif) > [!NOTE] > > Theme overrides can be imported from one platform to another. > > ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/theme_overrides_styles.png) > [card] [Theme Management](https://docs.flowx.ai/6.x/docs/flowx-designer/design-assets/themes.md) #### Copy/paste styles Contextual menu functionality enables efficient style management: * **Copy Style**: Copy styling properties between compatible components * **Paste Style**: Apply copied styles to selected components * **Copy to/from Platform**: Share styles across Web, iOS, and Android platforms * **Multiple selection**: Apply styles to multiple components simultaneously Compatible component groups for style copying: * **Input-like**: Input, Select, Datepicker, Textarea, Multiselect * **Selection**: Radio, Checkbox * **Container**: Container, Form, Card, Collection, Collection Prototype * **Action**: Button, File Upload ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.x/copy_styles.png) #### Copy/paste platform actions ### Preview When you are editing a process in **UI Designer** you have the possibility of having the preview of multiple themes: ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/preview_theme_ui_designer.gif) > [!NOTE] > > Overrides are completely independent of the theme, regardless of which theme you choose in the preview mode. ### Layout There are two main types of layouts for organizing child elements: **Linear** and **Grid**. * **Linear Layout**: Arranges child elements in a single line, either horizontally or vertically. Ideal for simple, sequential content flow. * **Grid Layout**: Organizes elements into a structured grid with multiple columns and rows, useful for more complex, multi-dimensional designs. * **Platform-Specific Layouts**: You can customize layout settings per platform (e.g., Grid on web, Linear on mobile) to ensure optimal responsiveness. > [!NOTE] > > Both layouts offer options to customize direction, alignment, spacing, and wrap behavior for flexibility in design. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/4.5/set_linear.png) > [card] [Layout](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/layout-configuration.md) ### Sizing By setting desired values for these props, you can ensure that all UI elements on the interface are the desired size and perfectly fit with each other. When adjusting the Fit W and Fit H settings, you can control the size and shape of the elements as they appear on your screen: * Fit W: fill, fixed or auto * Fit H: fixed or auto. The Chat component in **Fill** display type offers fixed or fill instead. ![UI element sizing options](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/ui_sizing.gif) ### Spacing Margin and padding are CSS properties used to create space between elements in a web page: * **margin** - the space outside an element * **padding** - the space inside an element ![UI element spacing options](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/ui_spacing.gif) > [card] [Margin](https://www.w3schools.com/css/css_margin.asp) > [card] [Padding](https://www.w3schools.com/css/css_padding.asp) ### Advanced * **Advanced** - for advanced customization, you can add CSS classes to pre-defined components, this option is available under the **Advanced** section * **Data Test ID** - add custom test identifiers for automated testing and element interaction By utilizing these styling options in FlowX.AI, you can create unique and visually appealing interfaces that meet your design requirements. #### Data Test ID The Advanced section includes a **Data Test ID** field, allowing you to assign custom identifiers to UI components. This feature enhances automated testing by providing meaningful, easily identifiable selectors for UI elements. Key benefits: * Replace auto-generated test IDs with custom, readable identifiers * Simplify element targeting in test scripts ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/470/Screenshot%202025-03-12%20at%2015.08.03.png) ## Tree view The Tree View panel displays the component hierarchy, allowing you to navigate through the different levels of the interface. Clicking on a specific component in the tree will highlight the selection in the editor, helping you locate and modify it. ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/ui_designer_tree1.gif) ### Navigator in the left panel ![Process UI Designer left panel on the Navigation tab, with a navigation root expanded to its user task and a Not Allocated group listing unassigned user tasks, above the selected user task's components section](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.9/ui-designer-navigation-tab.png) In the process UI Designer, the component tree is replaced by a two-part navigator on the **Navigation** tab of the left panel, the same layout [UI Flows](https://docs.flowx.ai/6.x/docs/building-blocks/ui-flows.md#adding-global-components) use. The UI Designer opens on this tab. The navigation area selector that sat next to the platform selector in the UI Designer header is removed: you pick the navigation area in the navigator instead. #### Navigation section The top section, **Navigation**, lists the navigation roots of the process for the selected platform. User tasks that are not assigned to any navigation area appear under a **Not Allocated** heading. * Select a navigation root to open it. The open root expands to show its nested navigation areas, user tasks, and embedded subprocesses. * On an embedded subprocess row, select **Open Subprocess** to open that subprocess. * Use the view toggle (**Switch to dropdown view** / **Switch to list view**) to collapse the list into a searchable **Select a root** dropdown. * When the process allows read-only mode, a filter button offers **Filter Nodes by** → **Visible in Read-Only Mode** or **View All**. With **Visible in Read-Only Mode** selected, entries that are not visible in read-only mode are dimmed and marked with a crossed-out eye icon. #### Components section The bottom section, **`` Components**, is named after the current selection, such as a navigation area or user task, and shows its UI component tree. Use **Add UI Component** to add components and **Collapse All** to fold the tree. A user task holds a single root component, so the add button is turned off once the root exists. When there is nothing to show, the section explains why: | Message | When it appears | | - | - | | **No components yet** | The user task has no root component. Select **Add UI Component** to add a Container, Card, or Custom component. | | **Multiple User Tasks** | The selected navigation area holds more than one user task. Select one of them to see its UI components. | | **No User Tasks yet** | The selected navigation area has no user tasks. Select **Open Process Designer** to add and assign them. | | Embedded subprocess notice | The selection is an embedded subprocess, whose UI components are managed in that subprocess. Select **Open Process** to go there. | When a user task, UI Flow, or reusable UI template has no components yet, the canvas shows the same **UI Designer** empty state in all three, with a shortcut to add the first component or generate the layout with AI, depending on your permissions. In the [reusable UI template](https://docs.flowx.ai/6.x/docs/building-blocks/reusable-resources/reusable-ui.md) designer, the navigator shows only the components section, labeled **UI Components**, where you add the template's single root component. ## Copy and paste UI components Right-click a component and select **Copy** (**⌘C** on macOS, **Ctrl+C** elsewhere) to copy it, together with its child components. Then select the parent component you want to paste into, right-click it, and select **Paste** (**⌘V** / **Ctrl+V**). **Paste** is available only when a single parent is selected. ### Paste review and cross-context paste ![Review paste modal with a struck-through component and its tooltip explaining why it cannot be pasted, the 2 components will be pasted summary, and the Paste 2 components button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/5.9/ui-designer-review-paste.png) You can paste copied UI components into a different context: from a user task into a UI Flow, from a UI Flow into a reusable UI template, and so on. Copy and paste share one clipboard format across user tasks, UI Flows, and reusable UI templates. When everything in the clipboard fits the target, the paste happens straight away. When something does not fit, nothing is pasted yet and a **Review paste** modal opens instead: * The modal shows the copied component hierarchy. Components that cannot be placed are struck through. Hover over one to see why, and whether its child components are dropped with it or reviewed on their own. * Top-level components carry a checkbox, so you can leave out more components before pasting. * The summary reads **N components will be pasted**. Select **Paste N components** to go ahead or **Cancel** to stop. * When nothing in the selection can be pasted, the modal is titled **Paste blocked** and offers only **Close**. Common reasons a component is dropped: | Reason | Example | | - | - | | The component only exists in another context | A UI Flow-only component pasted into a user task | | Navigation areas | Navigation areas are created in the navigation designer, not pasted | | Another project's resource | A custom component, process renderer, or task management component that points to a resource in another project | | Not available on the target device | A component missing from the palette of the target platform | | Parent rules | A form inside another form, content that cannot sit inside a [header or footer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/global-header-footer.md), or a component the parent does not accept | | Chat in a flow-based UI | A chat pasted into a flow-based UI | | Single root | The target holds a single root component | Pasted components are also fitted to where they land: * **Unique identifiers:** a pasted component keeps its **Component Identifier** when no other component on the target screen uses it. Otherwise it gets a new generated identifier for its type, such as `Button02`, that no other component on the screen holds. * **Data model:** pasted components point to the data model of the target screen. * **Unsupported properties:** properties the target cannot use are removed or adjusted in the pasted copy. > [!NOTE] > > If the copied content was made with an earlier clipboard format, for example before a platform update, the paste is refused with **The copied content is no longer valid. Copy it again and retry.** A component also cannot be pasted into one of its own child components. ## UI component types Different UI component types can be configured using UI Designer. The UI components are available and can be configured only using **user task nodes** or **navigation areas**. > [!NOTE] > > Depending on the component type different properties are available for configuration. Understanding these component types will help you to better utilize the UI Designer tool and create rich web interfaces. > [accordion] Layout (root components) > > * [Container](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container.md) > * [Card](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card.md) > * [Custom](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/custom.md) > [accordion] Collection > > * [Collection](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection.md) > * [Collection Prototype](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection-prototype.md) > [accordion] Basic > > * [Button](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/buttons.md) > * [File Upload](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/buttons.md#file-upload-button) > * [Image](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/image.md) > [accordion] Typography > > * Text > * Link > [accordion] Forms > > Form elements are a crucial aspect of creating user interfaces as they serve as the means of collecting information from the users. These elements come in various types, including simple forms, [inputs](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md), [text areas](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/text-area.md), drop-down menus ([select](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field.md)), [checkboxes](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/checkbox-form-field.md), [radio buttons](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/radio-form-field.md), toggle switches ([switch](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field.md)), [segmented buttons](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/segmented-button.md), [sliders](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/slider.md) and [date pickers](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/datepicker-form-field.md). Each of these form elements serves a unique purpose and offers different options for capturing user input. > > * Form > * [Input](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md) > * [Textarea](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/text-area.md) > * [Select](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field.md) > * [Checkbox](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/checkbox-form-field.md) > * [Radio](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/radio-form-field.md) > * [Switch](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field.md) > * [Segmented button](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/segmented-button.md) > * [Slider](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/slider.md) > * [Datepicker](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/datepicker-form-field.md) > [accordion] Indicators > > * [Message](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/indicators.md) Navigation areas > [accordion] Navigation > > * Page > * Stepper > * Step > * Modal > * Container ## Related topics - [FlowX.AI Designer](https://docs.flowx.ai/6.x/docs/flowx-designer/overview.md) - [UI Designer best practices](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/best-practices.md) - [Integration Designer](https://docs.flowx.ai/6.x/docs/platform-deep-dive/integrations/integration-designer.md) - [UI Flows](https://docs.flowx.ai/6.x/docs/building-blocks/ui-flows.md) - [Reusable UI Templates](https://docs.flowx.ai/6.x/docs/building-blocks/reusable-resources/reusable-ui.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.