Unify Logo Footer.svg
Unify Applications
Logo
UI Control Actions

UI Control Actions

Logo

5 mins READ

Actions at a Glance

Action TypeBuilder LabelUse When
controlModalControl ModalOpen or close a Modal block
controlDrawerControl DrawerOpen or close a Drawer block
showNotificationShow NotificationDisplay a toast/snackbar notification
controlBlockMethodTrigger Component MethodCall a named method on any block (submit form, scroll into view, etc.)

controlModal — Control Modal

Opens or closes a Modal block on the current page. This is the standard way to trigger modal dialogs from button clicks, row selections, or other events.

Parameters

ParameterTypeRequiredDefaultDescription
modalIdstringRequired (required)The ID of the Modal block to control. The builder picker lists only Modal blocks on the page. If empty, throws Modal id is required and stops. If set but the block doesn't exist, silently does nothing.
operation"show" | "hide"Optional (optional)"show"show opens the modal; hide closes it. There is no toggle — wire separate actions or gate with a condition.

Note: Passing data to modals: This action only shows or hides — it carries no data payload. To display record data in a modal, write the data to a page variable first, then bind the modal's content to that variable. Fire the open action after setting the variable.

Tip: Repeatable rows: When this action fires from inside a Repeatable row, a static modal ID is auto-resolved to that row's runtime instance — so the row's own modal opens, not the template's.

Examples

Open a confirmation dialog

{ "actionType": "controlModal", "payload": { "modalId": "b_confirmDelete", "operation": "show" } }

Close a modal after form submission

{ "actionType": "controlModal", "payload": { "modalId": "b_editRecord", "operation": "hide" } }

Open modal with record data — two sequential actions

// Step 1: Set the variable with the selected row { "actionType": "setPageVariable", "payload": { "variableId": "var_selectedRecord", "operation": "SET", "value": "{{ row }}" } } // Step 2: Open the modal { "actionType": "controlModal", "payload": { "modalId": "b_editModal", "operation": "show" } }

controlDrawer — Control Drawer

Opens or closes a Drawer block on the current page. Drawers slide in from the edge of the screen and are commonly used for side panels, filter panels, and secondary navigation.

Parameters

ParameterTypeRequiredDefaultDescription
drawerIdstringRequired (required)The ID of the Drawer block to control. The builder picker lists only Drawer blocks. If empty, throws Drawer id is required. If set but block doesn't exist, silently does nothing.
operation"show" | "hide"Optional (optional)"show"show opens the drawer; hide closes it. An unknown operation is a silent no-op that also swallows the event.

Warning: Show and hide are not symmetric. show flips the block state state.open to true and renders the drawer. hide both closes the drawer AND tears it down — unsaved content inside is discarded. If the drawer isn't currently open, hide still clears the flag but doesn't tear anything down.

Examples

Open a filter panel drawer

{ "actionType": "controlDrawer", "payload": { "drawerId": "b_filtersPanel", "operation": "show" } }

Close the drawer after filters are applied

{ "actionType": "controlDrawer", "payload": { "drawerId": "b_filtersPanel", "operation": "hide" } }

showNotification — Show Notification

Displays a toast notification (snackbar) over the current interface. Use it to confirm operations, surface warnings, or show transient error messages without navigating away or opening a modal.

Parameters

ParameterTypeRequiredDefaultDescription
titlestringOptional (optional)Main text of the toast. Labeled Message in the builder. Supports bindings and i18n. Non-string values are JSON-stringified.
descriptionstringOptional (optional)Secondary line shown below the title. Supports bindings and i18n.
type"info" | "success" | "warning" | "error"Optional (optional)"success"Controls the toast color and icon. info renders as the neutral default style (no dedicated info color).
autoHideDurationnumber (ms)Optional (optional)3000 (5000 for warning)Time in milliseconds before the toast auto-dismisses. Warning toasts default to 5000 ms; all others default to 3000 ms.
positionstring enumOptional (optional)top-right (web)Where the toast appears. Web options: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right. Mobile options: top-center, bottom-center.

Note: Toasts stack. Firing the action repeatedly queues multiple toasts. At most 5 are shown simultaneously. There is no deduplication — use a runCondition to prevent duplicate toasts if needed.

Examples

Success toast after saving

{ "actionType": "showNotification", "payload": { "type": "success", "title": "Changes saved", "description": "Your record was updated successfully.", "position": "bottom-center", "autoHideDuration": 4000 } }

Error toast with dynamic error message

{ "actionType": "showNotification", "payload": { "type": "error", "title": "Save failed", "description": "{{ ds_saveRecord['error'] }}", "position": "top-right" } }

Warning toast for a validation issue

{ "actionType": "showNotification", "payload": { "type": "warning", "title": "Missing required fields", "description": "Please fill in all required fields before submitting." } }

controlBlockMethod — Trigger Component Method

Calls a named control method on a target block — submit a Form, scroll a block into view, export a block, or call any method a block exposes. This is the generic action that underlies the block-specific shortcuts (controlModal, controlDrawer, etc.).

Parameters

ParameterTypeRequiredDefaultDescription
blockIdstringRequired (required)The ID of the block whose method to call. The builder shows a picker of all blocks on the page. Bindings in this field are resolved before the block is looked up.
methodNamestringRequired (required)The ID of the method to call. Available methods come from the selected block's registered control methods. Each block type exposes its own set.
methodPayloadobjectOptional (optional)Parameters passed directly to the method. Free-form — each method reads its own keys. For example, scrollIntoView reads alignment and smooth.

Common Methods Available on Every Block (Web)

Method NameLabelWhat It DoesPayload Keys
exportBlockExport BlockExports the block as an image or PDF
scrollIntoViewScroll Into ViewScrolls the block into the viewportalignment (default: "nearest"), smooth (default: true)
copyBlockCopy BlockCopies the block to the clipboard

Examples

Submit a form from a toolbar button

{ "actionType": "controlBlockMethod", "payload": { "blockId": "b_createForm", "methodName": "submitForm" } }

Scroll a results section into view smoothly

{ "actionType": "controlBlockMethod", "payload": { "blockId": "b_resultsSection", "methodName": "scrollIntoView", "methodPayload": { "alignment": "start", "smooth": true } } }

Call from a binding expression (script or function)

// Equivalent call from a Run Script action or page function: {{ b_createForm.submitForm() }} {{ b_resultsSection.scrollIntoView({ alignment: 'center', smooth: true }) }}