Customizing the Workflow Dashboard

Learn how to customize your workflow's front-end dashboard. Configure input modes, hide debug outputs, and create user-friendly interfaces.

Customizing the Workflow Dashboard

Every workflow in FlowDot has two views: the Editor (where you build) and the Dashboard (where users run it). This tutorial teaches you how to customize the dashboard for a polished user experience.

What You'll Learn

Understanding the Two Views

View URL Pattern Purpose
Editor /editor?workflow={hash} Build and modify workflows
Dashboard /workflow/{hash} Run workflows and view results

Click the Workflow button in the editor toolbar to switch to the dashboard view.

Step 1: Rename Your Nodes

By default, all Text Input nodes are named "Text Input". Let's fix that.

  1. Open your workflow in the Editor
  2. Right-click on your main input node
  3. Select Properties
  4. Change the Node Name to something descriptive like "User Prompt"
  5. Click Save

Why this matters: Node names appear in the dashboard, API responses, and execution history. Clear names help users understand what each input does.

Step 2: Configure Frontend Modes

Each node has a Frontend Mode property that controls how it appears in the dashboard.

Available Frontend Modes

Mode Description When to Use
Small Input Compact single-line input Short text, names, simple values
Large Input Multi-line text area Long prompts, descriptions
Config Input Collapsible in Settings panel Advanced options users rarely change
Hidden Not shown at all Internal values, constants
Debug Only shown in Editor Testing outputs, intermediate values

Example: Hiding the System Prompt

Most users don't need to see or modify the system prompt. Let's hide it:

  1. Right-click the System Prompt node
  2. Select Properties
  3. Scroll to Frontend Mode
  4. Select Hidden
  5. Save the workflow

Now when you view the Dashboard, only the User Prompt appears!

Example: Moving Settings to Config

For optional settings users might tweak:

  1. Set the node's Frontend Mode to Config Input
  2. Save and view the Dashboard
  3. The input now appears under Settings in a collapsible section

Step 3: Managing Output Visibility

When multiple nodes output to the dashboard, it can get cluttered.

The Problem

If you have:

Both appear in the results, showing duplicate content.

The Solution: Debug Mode for Outputs

  1. Right-click the Text Output node
  2. Select Properties
  3. Set Frontend Mode to Debug
  4. Save the workflow

Now the Text Output only appears in the Editor (useful for testing), while the LLM Query output is the only one shown to users.

Step 4: Execution History Settings

By default, workflows don't save execution history. Enable it for important workflows:

  1. Open the Dashboard view (/workflow/{hash})
  2. Click the Settings icon
  3. Toggle Save History to Yes
  4. Future executions are now logged

Viewing History

  1. Click the History tab in the Dashboard
  2. See all past executions with timestamps
  3. Click any execution to reload its inputs and outputs
  4. Use this to debug, compare results, or audit usage

Step 5: Dashboard Best Practices

For User-Facing Workflows

  1. Rename all inputs with clear, user-friendly labels
  2. Hide system prompts and internal configuration
  3. Use Config mode for optional advanced settings
  4. Set one primary output and hide debug outputs
  5. Enable history for workflows you want to track

Input Label Tips

Instead of... Use...
"Text Input" "Enter your question"
"System Prompt" Hidden or Config
"URL" "Website URL to analyze"
"API Key" "Your OpenAI API Key"

Quick Reference: Node Properties

Property Purpose
Node Name Display name in dashboard and history
Label Input field label shown to users
Default Value Pre-filled value (can be overwritten)
Frontend Mode Controls visibility in dashboard
Description Help text shown to users

Summary

Customizing the dashboard transforms your workflow from a development tool into a polished application. Key takeaways:

Next, learn about connecting external services with API keys!

Related Tutorials

Back to Tutorials