Implementation:FlowiseAI Flowise AddEditVariableDialog

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

Overview

AddEditVariableDialog is a React dialog component that provides a form for creating new variables or editing existing ones, supporting both static (inline value) and runtime (.env file) variable types.

Description

This component renders a Material UI Dialog through a React portal. It supports two modes: ADD for creating new variables and EDIT for updating existing ones, determined by dialogProps.type. The form includes fields for variable name (required), type dropdown (static or runtime), and a conditional value field that only appears when the type is "static". On submission, it calls either variablesApi.createVariable or variablesApi.updateVariable depending on the dialog mode. Redux dispatch manages canvas dialog state (SHOW_CANVAS_DIALOG/HIDE_CANVAS_DIALOG) and snackbar notifications for success and error feedback. The confirm button is disabled until all required fields are filled.

Usage

Use this component within the variables management section to add or edit application variables. It is opened from the variables list view with appropriate dialogProps specifying the operation type and optional existing variable data for editing.

Code Reference

Source Location

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

Signature

const AddEditVariableDialog = ({ show, dialogProps, onCancel, onConfirm, setError }) => { ... }

Import

import AddEditVariableDialog from '@/views/variables/AddEditVariableDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains type ('ADD' or 'EDIT'), confirmButtonName, and optional data (with name, value, type, id) for edit mode
onCancel	func	Yes	Callback invoked when the dialog is cancelled or an API error occurs
onConfirm	func	Yes	Callback invoked with the created/updated variable id on successful save
setError	func	No	Optional callback to propagate errors to the parent component

Outputs

Name	Type	Description
React Portal	JSX.Element	Renders the dialog via createPortal to the element with id "portal"

Usage Examples

Basic Usage

// Adding a new variable
<AddEditVariableDialog
    show={showDialog}
    dialogProps={{
        type: 'ADD',
        confirmButtonName: 'Add'
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={(variableId) => {
        refreshVariables()
        setShowDialog(false)
    }}
    setError={setError}
/>

// Editing an existing variable
<AddEditVariableDialog
    show={showDialog}
    dialogProps={{
        type: 'EDIT',
        confirmButtonName: 'Save',
        data: { id: 'var_123', name: 'API_KEY', value: 'sk-xxx', type: 'static' }
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={(variableId) => {
        refreshVariables()
        setShowDialog(false)
    }}
    setError={setError}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Variable_Management