Application Designer Guide

Application Designer Guide

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.

Note: 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 a different environment Fix: Check Filter Workspace panel settings, clear the search field, verify the 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 the properties editor, ensure all required fields are populated.
• Issue: Cannot deploy component Cause: Component not saved, missing deploy permissions, or dependency errors Fix: Ensure the 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 the wrong location, or a browser cache issue Fix: Ensure the screen is open and in edit mode, drag directly onto the canvas, refresh the browser and clear the cache if the 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 the browser if necessary, consider using multiple browser windows.
• Issue: Developer console not visible Cause: Console minimized or not in the correct design mode Fix: Ensure you are in screen or data flow design mode, look for the expand button if the console is minimized, use Chrome Dev Tools (F12) as an alternative.
• Issue: Changes lost after closing tab Cause: Auto-save not enabled or tab closed before saving Fix: Use the "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 a caching issue Fix: Verify the substituted component is deployed (not just saved), ensure the substitution references the correct original component, have users refresh the browser to clear the cache.

7. Revision History

Version	Date	Editor	Description
1.0	2025-12-31	Fuuz Documentation Team	Initial Release — Application Designer Overview

See Also

• Getting-started-with-Flow-Designer
• Getting-Started-with-the-Schema-Designer
• The-Screens-Screen
• Fuuz-Deployment-Methodologies
• Switching-between-Fuuz-Environments-Build-QA-Production
• How-To-Managing-Green-Blue-Deployments-with-Fuuz-Package-Management-Zero-Downtime

---

Source: support.fuuz.com