Dialog

The Dialog function opens a Bootstrap modal dialog with one or more buttons. It is a graph-driven equivalent of the JavaScript alert / confirm / prompt modals, but with arbitrary buttons. Each button click fires a single buttonClicked outgoing trigger, carrying the clicked button's action. Closing the dialog with the X button fires a closed trigger.

Use Dialog to ask the user a yes/no question, prompt for a text value, or offer multiple choices (e.g. Delete / Archive / Cancel) and route each choice to a different downstream Function.

• Dialog

  • Parameters

    • Buttons

    • Prompt Input

  • Output

  • Example

    • Prompt example

Parameters

Name	Description	Default value	Accepted values
$dialogType	Type of dialog. Controls whether an input field is rendered and how the wrapper resolves.	alert	alert / confirm / prompt
$message	The message body shown inside the modal. HTML is allowed.	''	String
$headerText	Title shown in the modal header.	Attention	String
$alertType	Visual variant; controls the color accent on the header border.	default	default / primary / success / info / warning / danger
$modalSize	Bootstrap modal size class. Ignored when $fullscreen is true.	modal-sm	modal-sm / modal-md / modal-lg / modal-xl
$fullscreen	Open the dialog as a fullscreen modal regardless of $modalSize.	false	true / false
$buttons	List of buttons rendered in the footer. See the Buttons table below. If omitted, a sensible default is generated based on $dialogType.	[] (auto-generated)	Array or Object
$promptInput	Configuration for the prompt input element. Only used when $dialogType is prompt. See the Prompt Input table below.	{}	Object

Buttons

Each entry in $buttons describes one footer button. $buttons may be given as an array (preserves order) or an object (keys become the default action, order follows Object.entries).

Name	Description	Default value	Accepted values
caption	Text shown on the button.	Value of action	String
action	Value sent with the buttonClicked trigger. Used to route to different downstream Functions.	Button index (array) or object key	String
class	Bootstrap button class.	btn-secondary	String (e.g. btn-primary, btn-danger, btn-outline-success)
default	Marks the button as default. The default button is focused on open and is triggered when the user presses Enter. Only one button can be default; later defaults are ignored.	false	true / false
close	Whether the dialog closes after the button is clicked. Set to false to keep the dialog open and emit only the trigger (useful for "apply"-style buttons).	true	true / false
tooltip	Bootstrap tooltip shown on hover.		String
validate	If true and $dialogType is prompt, the button runs the prompt input's HTML5 validation before firing. If invalid, the trigger is suppressed and the inline error message is shown.	false	true / false

If $buttons is omitted (or empty), defaults are generated based on $dialogType:

• alert: a single Ok button (default: true).
• confirm: No and Yes. Yes is default: true and uses btn-primary.
• prompt: Cancel and Ok. Ok is default: true, uses btn-primary, and has validate: true.

Prompt Input

Used only when $dialogType is prompt. If $promptInput is omitted or empty, a basic <input type="text"> is rendered with no extra attributes.

Name	Description	Default value	Accepted values
type	HTML input type.	text	text / email / number / password / tel / url / search / date / datetime-local / time / month / week / color
value	Initial input value.		String
placeholder	Placeholder text.		String
required	Marks the input as required.	false	true / false
minLength	Minimum text length.		Number
maxLength	Maximum text length.		Number
min	Minimum value for numeric or date-like input types.		String / Number
max	Maximum value for numeric or date-like input types.		String / Number
step	Step value for numeric or date-like input types.		String / Number
pattern	Regular expression pattern used by native input validation.		String
validationMessage	Custom validation message shown when the input is invalid. If omitted, the browser validation message is used.		String
autoComplete	Browser autocomplete setting.		String
autoFocus	Adds the native autofocus attribute. The prompt input is focused on open regardless of this setting.	false	true / false
readOnly	Makes the input read-only.	false	true / false
disabled	Disables the input.	false	true / false

Output

The Dialog function fires the following outgoing triggers:

• buttonClicked — fired every time a button is clicked. Carries:

  • action: the action of the clicked button.
  • data: the prompt input value when $dialogType is prompt, otherwise null.

  Note: if a button has close: false, the dialog stays open and buttonClicked is fired again on each subsequent click.

• closed — fired when the user dismisses the dialog with the header X (close) button. Carries no extra data.

Route each button to its own downstream Function by filtering on action in the trigger condition.

Example

A confirm dialog with three buttons: Delete, Archive, Cancel. Each routes to a different Function.

{
  "$function": "Dialog",
  "$dialogType": "confirm",
  "$headerText": "Manage record",
  "$message": "What do you want to do with this record?",
  "$alertType": "warning",
  "$modalSize": "modal-md",
  "$buttons": [
    { "action": "delete",  "caption": "Delete",  "class": "btn-danger" },
    { "action": "archive", "caption": "Archive", "class": "btn-warning", "tooltip": "Move to the archive store" },
    { "action": "cancel",  "caption": "Cancel",  "class": "btn-secondary", "default": true }
  ]
}

When the user clicks Delete, the buttonClicked trigger fires with:

{
  "type": "buttonClicked",
  "action": "delete",
  "data": null
}

In the dashboard, three outgoing :TRIGGER relations are connected to three Functions, each with a trigger condition that matches its action:

• [Dialog] —(action: 'delete')→ [DeleteNode]
• [Dialog] —(action: 'archive')→ [ArchiveRecord]
• [Dialog] —(action: 'cancel')→ (no-op)

Prompt example

A prompt that asks for an email address with native HTML5 validation. The Ok button validates before firing; the Cancel button does not.

{
  "$function": "Dialog",
  "$dialogType": "prompt",
  "$headerText": "Subscribe",
  "$message": "Please enter your email address:",
  "$alertType": "info",
  "$promptInput": {
    "type": "email",
    "placeholder": "you@example.com",
    "required": true,
    "validationMessage": "Please enter a valid email address"
  },
  "$buttons": [
    { "action": "cancel", "caption": "Cancel", "class": "btn-secondary" },
    { "action": "ok",     "caption": "Subscribe", "class": "btn-primary", "default": true, "validate": true }
  ]
}

When the user submits a valid email and clicks Subscribe (or presses Enter), the buttonClicked trigger fires with:

{
  "type": "buttonClicked",
  "action": "ok",
  "data": "you@example.com"
}

If the user clicks Subscribe with an invalid or empty input, the trigger is suppressed and Please enter a valid email address is shown below the input until the user corrects it.