Implementation:FlowiseAI Flowise VariablesView

Knowledge Sources	FlowiseAI Flowise
Domains	UI, Variables, Configuration Management
Last Updated	2026-02-12 07:00 GMT

Overview

The VariablesView is a React view component that provides a paginated interface for creating, editing, and deleting global variables used across chatflows.

Description

This component renders a table of all global variables with columns for name, value, type (static or runtime), last updated date, and created date. Variables can be searched, added, edited, and deleted through modal dialogs. The view uses server-side pagination via TablePagination and refreshes the variables suggestion cache after mutations through refreshVariablesCache. Each row displays the variable type as a color-coded chip (info for static, secondary for runtime). Edit and delete actions are gated behind RBAC permissions using the Available wrapper component.

Usage

Use this component as the main view for the variables management page (typically mounted at a route such as "/variables"). Variables defined here can be referenced in chatflow nodes using the $vars.<variable-name> syntax.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/variables/index.jsx
• Lines: 1-435

Signature

const Variables = () => {
    // State: isLoading, showVariableDialog, variableDialogProps, variables,
    //        showHowToDialog, search, currentPage, pageLimit, total
    // Uses: useApi(variablesApi.getAllVariables), useConfirm(), useError()
    return <MainCard>...</MainCard>
}

export default Variables

Import

import Variables from '@/views/variables/index'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Top-level view component with no props. Fetches data internally via the variables API with pagination parameters.

Outputs

Name	Type	Description
Rendered view	JSX.Element	A paginated variable management page with search, add, edit, delete, and "How To Use" dialogs.

Key Internal State

State Variable	Type	Description
variables	array	The list of variable objects fetched from the API
currentPage	number	The current pagination page (1-indexed)
pageLimit	number	The number of items per page (defaults to DEFAULT_ITEMS_PER_PAGE)
total	number	The total count of variables for pagination calculation
showVariableDialog	bool	Controls visibility of the AddEditVariableDialog
showHowToDialog	bool	Controls visibility of the HowToUseVariablesDialog

Key Operations

• addNew() -- Opens the AddEditVariableDialog in ADD mode
• edit(variable) -- Opens the AddEditVariableDialog in EDIT mode with the selected variable data
• deleteVariable(variable) -- Deletes a variable after confirmation via variablesApi.deleteVariable
• onConfirm() -- Closes the dialog, refreshes the variable list, and updates the variables suggestion cache
• refresh(page, limit) -- Fetches variables from the API with the specified pagination parameters
• filterVariables(data) -- Filters the variable list by name against the search text

Usage Examples

Basic Usage

// In route configuration
import Variables from '@/views/variables/index'

<Route path="/variables" element={<Variables />} />

Related Pages

• Principle:FlowiseAI_Flowise_Variable_Management