# Application Designer Guide

> Application Designer Overview Article Type: Configuration / How-To Audience: Developers, Application Designers Module: Application Development Applies to…

Source: https://www.fuuz.com/help/application-designer-guide
Last updated: 2025-12-31

Build Apps · Screens


Last updated December 31, 2025, 4:52 PM UTC

## Application Designer Overview

**Article Type:** Configuration / How-To
**Audience:** Developers, Application Designers
**Module:** Application Development
**Applies to Versions:** 2025.1+
**Estimated Time:** 15-30 minutes to familiarize

## 1. Overview

The Application Designer is the central development environment in the Fuuz platform, providing developers with a unified interface to create, manage, and deploy the three foundational pillars of any Fuuz application: data models (structure), data flows (business logic), and screens (user interface). This comprehensive tool streamlines application development without requiring specialized knowledge of underlying technologies like GraphQL, MongoDB, React, or RabbitMQ.

**Before You Begin:** Ensure you have Developer access type assigned to your user account and are navigating to an application with Development tenant type. Familiarize yourself with the three pillars of Fuuz applications: Data Models, Data Flows, and Screens.
 **Key Capabilities:**

- Unified workspace with collapsible panels and hierarchical organization via Module Groups and Modules
- Drag-and-drop component assembly with automatic code generation for forms and tables
- Integrated developer consoles for debugging and testing
- Visual status indicators (grey, orange, purple dots) for component state management
- Red/Blue deployment model supporting enterprise governance with site-specific extensibility
- Multi-tab and multi-browser support for parallel development workflows
- Version history and rollback capabilities for all component types

## 2. Prerequisites

- **Access Level:** Developer access type is required to access the Application Designer
- **Application Type:** Navigate to an application with Development tenant type
- **Permissions:** Role-based permissions may be required for save and deploy operations (customizable per customer)
- **Environment:** Access to Build, QA, or Production environment based on development stage

**Important:** Developer access type and roles do not automatically synchronize across tenants or environments (Build, QA, Production). Administrators must manually ensure consistency if cross-environment access is required.
## 3. Procedure Steps

### Step 1: Access the Application Designer

Navigate to the Application Designer from your development environment.

1. Log in to the Fuuz platform with your Developer access type credentials
2. Navigate to an application that has a Development tenant type
3. Click the hamburger icon (☰) in the upper-left corner to reveal the Development menu
4. Select **App Designer** from the menu (immediately below Developer Homepage)
5. The Application Designer interface will load with the main workspace

**Note:** Your access type menus are hidden while using the Application Designer to prevent confusion. To return to your homepage, click the Fuuz logo in the upper-left corner or use the search bar (Ctrl+M) and type "developer home".
### Step 2: Configure the Workspace

Customize the workspace panel for your development workflow.

1. **Pin/Unpin Workspace:** Click the pin icon to keep the workspace visible at all times (shifts content to the right) or unpin it to maximize design area (workspace slides over content when opened)
2. **Search Components:** Use the search field at the top of the workspace to quickly find specific data models, flows, or screens by name
3. **Filter Workspace:** Expand the "Filter Workspace" panel to filter by:
	- Component type (Data Models, Data Flows, Screens)
	- Status (Unsaved, Draft, Substituted, Deployed)
	- Show empty modules option
4. **Group By Options:** Toggle between grouping by Module Group/Module/Type or by Component Type alone
5. **View Legend:** Reference the color-coded legend at the bottom of the workspace to understand status indicators

### Step 3: Understand Component Status Indicators

Visual indicators help you quickly identify the state of application components.

| Indicator | Status | Meaning |
| --- | --- | --- |
| Grey Dot | Unsaved | Component has been created but not yet saved |
| Orange Dot | Draft | Component has been saved with changes but not deployed to the current environment |
| Purple Dot | Substituted | Component has been replaced with a customized version (Red/Blue deployment) |

### Step 4: Open and Work with Existing Components

Components can be opened from the workspace with a single click.

1. **Open Data Models:** Click once to open the data model and display its properties editor on the right. Multiple data models can be opened in the same tab.
2. **Open Data Flows:** Click once to open the data flow in a new tab with the visual flow designer and properties editor.
3. **Open Screens:** Click once to open the screen designer with the layout canvas and element properties.
4. **Manage Tabs:** Use the tab bar to switch between open components. There is no limit to the number of tabs you can have open simultaneously.
5. **View All Tabs:** Click the "View All Tabs" option to see a list of currently open components.
6. **Recently Closed Tabs:** Access recently closed tabs to quickly reopen components you closed inadvertently.

### Step 5: Create New Components

Create new data models, data flows, or screens from the main Application Designer page.

**Creating a Data Model:**

1. Click "Create New Data Model" from the center blocks or the "+" icon in the top bar
2. Enter the **Model Name**
3. Select the **Module** to attach the model to
4. Define the **Data Model Type**
5. Configure fields and relationships in the properties editor

**Creating a Data Flow:**

1. Click "Create New Data Flow" from the center blocks or the "+" icon
2. Select the **Flow Environment** : Backend, Gateway, or Web
3. Choose the **Data Flow Type** based on your use case
4. Begin building your flow by adding nodes from the palette

**Creating a Screen:**

1. Click "Create New Screen" from the center blocks or the "+" icon
2. Choose a template:
	- **Form:** Single-record data entry screen with field labels and inputs
	- **Table:** Multi-record tabular view with columns and rows
	- **Blank:** Empty canvas for custom dashboards, mobile apps, or unique layouts
3. Configure the screen layout and add elements

### Step 6: Use Drag-and-Drop Functionality

Leverage drag-and-drop capabilities for rapid development without writing code.

**Dragging Data Models to Screens:**

1. Open a screen in the designer
2. Drag a data model from the workspace onto the screen canvas
3. Select a template: **Form** or **Table**
4. A wizard will populate with all available fields from the data model
5. Select the fields you want to include in the form or table
6. Click "Generate" to automatically create the form or table
7. Customize the generated component as needed using the properties editor

**Dragging Data Flows to Screens:**

1. Open a screen in the designer
2. Drag a data flow from the workspace onto the screen canvas
3. An action button is automatically generated on the screen
4. The button is pre-configured to trigger the dragged data flow when clicked
5. Customize the button appearance and behavior as needed

### Step 7: Save and Deploy Components

Save and deploy your components to make them active in the current environment.

**Saving Components:**

1. **Manual Save:** Click the "Save" button in the top bar to create a draft version
2. **Auto-Save:** Enable auto-save in screen designer settings to automatically create draft versions as you work
3. Saved components show an orange dot indicating draft status

**Deploying Components:**

1. Ensure the component is saved (orange dot indicates draft status)
2. Click the "Deploy" button in the top bar
3. Confirm the deployment action
4. The component becomes active in the current environment (Build, QA, or Production)
5. The status indicator is removed (component is now deployed)

**Important:** Save and Deploy operations apply only to the current environment you are working in. To migrate deployed components from Build to QA or QA to Production, you must create a Package Definition.
### Step 8: Use Developer Tools for Testing

Leverage built-in developer consoles and browser tools for debugging.

1. **Fuuz Developer Consoles:** Built-in consoles available in screen design mode and data flow design mode provide real-time visibility into application execution
2. **Developer Mode:** Click "Run in Developer Mode" in the screen designer for enhanced debugging capabilities
3. **Browser Dev Tools:** Use standard Chrome Developer Tools (F12) to examine screen layouts, view JavaScript errors, monitor API calls, and profile performance
4. **Multi-Monitor Setup:** Consider moving developer consoles to a separate vertical monitor for real-time log viewing while developing

## 4. Configuration Reference

### Module Organization Structure

| Level | Purpose | Example |
| --- | --- | --- |
| Module Group | Highest level of organization within an application | Product Data Management |
| Module | Child of Module Group, organizes by functional area | Product Data, Process Data, Material Data |
| Component Type | Final level grouping by Data Models, Data Flows, Screens | Data Models within Product Data module |

### Workspace Filter Options

| Filter Type | Options | Description |
| --- | --- | --- |
| Component Types | Data Models, Data Flows, Screens | Show only selected component types |
| Statuses | Unsaved, Draft, Substituted, Deployed | Filter components by their current status |
| Group By | Module Group/Module/Type or Type Only | Change how components are organized in the workspace |
| Show Empty Modules | On/Off | Display modules with no components assigned |

### Red/Blue Deployment Model

The Red/Blue deployment model enables enterprise-wide governance while allowing site-specific customization:

- **Red (Corporate/Enterprise):** Standard applications and data models deployed across all sites
- **Blue (Plant/Site-Specific):** Customized versions that extend or modify Red components for local requirements
- **Substitution:** Replaces a Red component with a Blue customization without affecting the original or other sites
- **Indicator:** Purple dot shows which components have been substituted

## 5. Validation & Testing

**Success Criteria:**

- ✓ Can access the Application Designer from the Development menu
- ✓ Workspace displays all components organized by Module Groups and Modules
- ✓ Can search and filter components using workspace tools
- ✓ Successfully opened data models, data flows, and screens in the designer
- ✓ Created new components using the "+" icon or center blocks
- ✓ Dragged data models to screens and generated forms or tables
- ✓ Dragged data flows to screens and generated action buttons
- ✓ Saved components as drafts (orange dot visible)
- ✓ Deployed components to the current environment
- ✓ Used developer consoles or browser dev tools for debugging
- ✓ Managed multiple tabs efficiently

**Testing Recommendations:**

1. Create a simple data model with 3-5 fields in a test module
2. Create a blank screen and drag the data model onto it to generate a form
3. Create a simple data flow that updates a field in your data model
4. Drag the data flow onto your screen to create an action button
5. Save all components and verify orange dots appear
6. Deploy all components and verify status indicators are removed
7. Run the screen in developer mode and test the form and action button
8. Review the developer console for any errors or warnings

## 6. Troubleshooting

- **Issue:** Cannot access Application Designer
**Cause:** Missing Developer access type or not in Development tenant
**Fix:** Verify Developer access type is assigned and you are navigating to a Development application. Contact your Enterprise Admin if access is missing.
- **Issue:** Components not visible in workspace
**Cause:** Filters are hiding components or components are in different environment
**Fix:** Check Filter Workspace panel settings, clear search field, verify correct environment (Build/QA/Production), and enable "Show Empty Modules" if needed.
- **Issue:** Cannot save changes
**Cause:** Missing role-based permissions or validation errors
**Fix:** Verify save permissions in RBAC settings, check for validation errors in properties editor, ensure all required fields are populated.
- **Issue:** Cannot deploy component
**Cause:** Component not saved, missing deploy permissions, or dependency errors
**Fix:** Ensure component is saved first (orange dot visible), verify deploy permissions, check that all referenced components are deployed.
- **Issue:** Drag-and-drop not working
**Cause:** Screen not open, dragging to wrong location, or browser cache issue
**Fix:** Ensure screen is open and in edit mode, drag directly onto canvas, refresh browser and clear cache if issue persists.
- **Issue:** Tabs not responding
**Cause:** Too many tabs open or browser memory constraints
**Fix:** Close unused tabs using "View All Tabs", save work and refresh browser if necessary, consider using multiple browser windows.
- **Issue:** Developer console not visible
**Cause:** Console minimized or not in correct design mode
**Fix:** Ensure you are in screen or data flow design mode, look for expand button if console is minimized, use Chrome Dev Tools (F12) as alternative.
- **Issue:** Changes lost after closing tab
**Cause:** Auto-save not enabled or tab closed before saving
**Fix:** Use "Recently Closed Tabs" feature, check version history for auto-saved drafts, enable auto-save for screens to prevent future data loss.
- **Issue:** Substitution not working
**Cause:** Substituted component not deployed or caching issue
**Fix:** Verify substituted component is deployed (not just saved), ensure substitution references correct original component, have users refresh browser to clear cache.

## 7. Related Resources

- Data Model Designer Guide
- Data Flow Designer Guide
- Screen Designer Guide
- Document Designer Integration
- Package Definition and Management
- Component Substitution and Red/Blue Deployments
- Developer Access Type Configuration
- Role-Based Access Control (RBAC) for Developers
- Environment Management (Build, QA, Production)
- Version History and Component Management
- JSONata Expressions in Fuuz
- Fuuz Gateway Configuration

## 8. Revision History

| Version | Date | Editor | Description |
| --- | --- | --- | --- |
| 1.0 | 2025-12-31 | Craig Scott | Initial Release - Application Designer Overview |

### Need more help?

Ask the Fuuz community, or open a ticket with Fuuz support.

[Ask the community](https://www.fuuz.com/community) [Open a ticket](https://support.fuuz.com/portal/en/newticket)

On this page

[Application Designer Overview](#application-designer-overview)

[1. Overview](#1-overview)

[2. Prerequisites](#2-prerequisites)

[3. Procedure Steps](#3-procedure-steps)

[4. Configuration Reference](#4-configuration-reference)

[5. Validation & Testing](#5-validation-testing)

[6. Troubleshooting](#6-troubleshooting)

[7. Related Resources](#7-related-resources)

[8. Revision History](#8-revision-history)