Implementation:FlowiseAI Flowise ConditionDialog

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

Overview

ConditionDialog is a portal-rendered modal dialog component for editing condition function parameters in Flowise canvas nodes, supporting tabbed input panels with confirm/cancel actions.

Description

ConditionDialog renders into a DOM portal (#portal element) and displays a MUI Dialog with tabbed content when the input parameter type includes conditionFunction. Each tab corresponds to a child parameter from inputParam.tabs, rendered via NodeInputHandler inside TabPanel components. The dialog manages its own state for the selected tab, input parameter, and data, syncing with dialogProps on mount. It also dispatches SHOW_CANVAS_DIALOG / HIDE_CANVAS_DIALOG store actions to coordinate with the canvas UI when the dialog is open or closed.

Usage

Use ConditionDialog when a canvas node needs to present a condition function editor to the user. Control visibility with the show prop and provide configuration through dialogProps including input parameters, data, button labels, and disabled state.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/ConditionDialog.jsx
• Lines: 1-97

Signature

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

export default ConditionDialog

Import

import ConditionDialog from '@/ui-component/dialog/ConditionDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	No	Controls dialog visibility
dialogProps	object	No	Configuration object containing inputParam (with type and tabs), data, cancelButtonName, confirmButtonName, and disabled flag
onCancel	function	No	Callback invoked when the Cancel button is clicked
onConfirm	function	No	Callback invoked with (data, inputParam, tabValue) when the Confirm button is clicked

Outputs

Name	Type	Description
(rendered JSX)	React portal	A modal dialog with tabbed condition function editors, rendered into the #portal DOM element

Usage Examples

Basic Usage

import ConditionDialog from '@/ui-component/dialog/ConditionDialog'

const [showDialog, setShowDialog] = useState(false)

const dialogProps = {
    inputParam: {
        type: 'conditionFunction',
        tabs: [
            { label: 'If', name: 'ifFunction', type: 'code' },
            { label: 'Else If', name: 'elseIfFunction', type: 'code' }
        ]
    },
    data: nodeData,
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save',
    disabled: false
}

<ConditionDialog
    show={showDialog}
    dialogProps={dialogProps}
    onCancel={() => setShowDialog(false)}
    onConfirm={(data, inputParam, tabValue) => {
        handleConditionSave(data, inputParam, tabValue)
        setShowDialog(false)
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Agentflow_Edge_Validation