Implementation:FlowiseAI Flowise ViewHeader

Knowledge Sources	FlowiseAI Flowise
Domains	UI Layout, Page Header
Last Updated	2026-02-12 07:00 GMT

Overview

ViewHeader is a reusable React component that renders a page-level toolbar with a title, optional description, optional back and edit buttons, a search input with keyboard shortcut support, optional filter controls, and action button slots.

Description

The ViewHeader component provides a consistent header bar for list and detail views across the Flowise UI. It renders a Material UI Toolbar containing a left section (back button, title, description, edit button) and a right section (search input with Cmd/Ctrl+F shortcut via useSearchShortcut, filter slot, and children slot for action buttons). The search input is hidden on extra-small screens and shows a platform-appropriate keyboard shortcut hint. The component detects the operating system to display the correct modifier key.

Usage

Use this component at the top of any list or detail view page where you need a standardized header with title, search, and action buttons. Pass children as action buttons (e.g., "Add New" buttons) to appear in the right section.

Code Reference

Source Location

Repository: FlowiseAI Flowise
File: packages/ui/src/layout/MainLayout/ViewHeader.jsx
Lines: 1-152

Signature

const ViewHeader = ({
    children,
    filters = null,
    onSearchChange,
    search,
    searchPlaceholder = 'Search',
    title,
    description,
    isBackButton,
    onBack,
    isEditButton,
    onEdit
}) => { ... }

export default ViewHeader

Import

import ViewHeader from '@/layout/MainLayout/ViewHeader'

I/O Contract

Inputs

Name	Type	Required	Description
children	node	No	Action buttons or other elements rendered in the right section of the toolbar.
filters	node	No	Optional filter controls rendered between the search input and children.
onSearchChange	func	No	Callback invoked when the search input value changes; receives the input change event.
search	bool	No	When true, the search input field is rendered.
searchPlaceholder	string	No	Placeholder text for the search input. Defaults to Search.
title	string	No	The main heading text displayed in the header.
description	string	No	Optional description text displayed below the title.
isBackButton	bool	No	When true, a back arrow FAB is rendered to the left of the title.
onBack	func	No	Callback invoked when the back button is clicked.
isEditButton	bool	No	When true, an edit icon button is rendered next to the title.
onEdit	func	No	Callback invoked when the edit button is clicked.

Outputs

Name	Type	Description
JSX	React.ReactElement	A Box containing a Toolbar with title section on the left and search/filter/action section on the right.

Usage Examples

Basic Usage

import ViewHeader from '@/layout/MainLayout/ViewHeader'

const ChatflowsPage = () => {
    const [searchTerm, setSearchTerm] = useState('')

    return (
        <>
            <ViewHeader
                title="Chatflows"
                search={true}
                searchPlaceholder="Search chatflows"
                onSearchChange={(e) => setSearchTerm(e.target.value)}
            >
                <Button variant="contained" onClick={handleAddNew}>
                    Add New
                </Button>
            </ViewHeader>
            <ChatflowList filter={searchTerm} />
        </>
    )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment