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.

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

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

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.

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)

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

Workspace Filter Options

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