Dialog UI - Canvas

The canvas of the dialog UI is the area where components are placed.
Added in v3.3.0.

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	canvas	id	string	canvas	The [id] property cannot be set in actions.
2	Type	String	Modal				Dialog display type setting
3	Width	Number	600	width	number	600	Dialog width
4	Height	Number	380	height	number	380	Total dialog height
5	X	Number		x	number		X coordinate position
6	Y	Number		y	number		Y coordinate position
7	Bottom Padding	Number	24	bottomPadding	number	24	Setting the margin area at the bottom of the canvas screen. Properties added in v3.4.0
8	Transition Component	Select 1. Fade 2. Slide	Fade	transitionComponent	string	fade	Dialog transition animation setting The [transitionComponent] property cannot be set in actions.
9	Slide Direction	Select 1. Up 2. Down 3. Right 4. Left	Up	slideDirection	string	up	Dialog slide direction The [slideDirection] property cannot be set in actions.
10	Transition Duration	Number	500	transitionDuration	number	500	Dialog transition duration The [transitionDuration] property cannot be set in actions.
11	Disable Escape Key Down	Boolean	OFF	disableEscapeKeyDown	boolean	false	When OFF, the dialog can be closed with the Esc key.
12	Dividers	Boolean	ON	dividers	boolean	true	When ON, divider lines can be displayed between the header and footer.
13	Draggable	Boolean	OFF	draggable	boolean	false	When ON, the dialog can be dragged. The [draggable] property cannot be set in actions.
14	Show Title	Boolean	ON	showTitles	boolean	true	When ON, displays the header area.
15	Close Button	Boolean	OFF	closeButton	boolean	false	When ON, displays an × button in the header area.
16	Title	String	Title	title	string	title	Specifies the string to display in the header area
17	Title Color	String Color Picker		titleColor	string		Title text color setting
18	Title Background Color	String Color Picker		titleBackgroundColor	string		Header area background color
19	Content Background Color	String Color Picker		contentBackgroundColor	string		Content area background color
20	Content Background Repeat	Select 1. REPEAT 2. NO-REPEAT	No Repeat	backgroundRepeat	string	no-repeat	Background image repeat setting
21	Content Background Size	Select 1. Auto 2. Contain 3. Cover	Auto	backgroundSize	string	auto	Background image object-fit setting
22	Show Actions	Boolean	ON	showActions	boolean	true	When ON, displays the footer area.
23	Actions Value	[Detail 1]	[Detail 1]	actionsValue	object array	[Detail 1]	Footer area label and click action settings
24	Action Background Color	String Color Picker		actionBackgroundColor	string		Footer area background color
25	Timer Event	Select 1. None 2. Action	None	timerEvent	string	none	Timer event enable setting v3.4.0 Added property
26	Interval	Number	60	interval	number	60	Timer event occurrence interval setting The minimum value is 10. The maximum value is 300. v3.4.0 Added property

Note

• If the [X] and [Y] properties are not set, the dialog will be displayed in the center of the editor.
• Processing defined in [Action] > [canvas] is executed during the [load] event.
• Processing defined in [Timer Action] is executed during the [timer] event.
• [Timer Action] can be configured from the canvas context menu (right-click) only when [Action] is selected in [Timer Event].
• If an out-of-range value is set for the [Interval] property, the timer event will no longer execute.
  You can control the start and stop of timer events by intentionally setting an out-of-range value from an action.
• $fn.nextUI() cannot be used in dialogs.
• Transitions from dialog to dialog are not supported.

[Detail 1] Actions Setting

In the actions setting, you can configure the buttons displayed in the footer area. The configurable values are as follows:

No	Column	Description
1	ID	ID of the button to display in the footer
2	Label	Label of the button to display in the footer
3	Color	Color of the button to display in the footer
4	Style	Style of the button to display in the footer
5	Click Event	Action of the button to display in the footer The options are: 1. None - Do nothing 2. Action - Execute action 3. Close - Close the dialog

The default values are as follows:

[
  {"id":"cancel","label":"CANCEL","color":"#1976d2","variant":"text","clickEvent":"Close"},
  {"id":"execute","label":"EXECUTE","color":"#1976d2","variant":"text","clickEvent":"Action"}
  ]

Note

• If the dialog is displayed using $fn.openDialog(), the canvas action of the source UI will execute when the dialog closes.
• If the dialog is displayed with click event: DIALOG, the close action of the source component will execute when the dialog closes.
• clickEvent Close can close the dialog.

Events

Event Name	Description
onclick	Triggered when a button displayed in the footer is clicked.
load	Triggered when the canvas is loaded.
timer	Triggered at the interval specified after the canvas has been loaded.