Skip to main content
CYPEX Documentation
    Support
    v2.0.0 Latest stable release View changelog ->
    1. CYPEX — PostgreSQL Application Platform
    2. /
    3. Element Dictionary
    4. /
    5. Various
    6. /
    7. Action Button
    Various Referencegenerated

    Action Button

    Trigger actions such as save, navigate, or run a connector

    Technical id
    default_action_button
    Translation keys
    label

    A labeled button (optional icon/color/variant) that runs an ordered list of actions when clicked.

    When to use

    • User must trigger one or more side effects (save, reload, notify, connector call).
    • Multi-step action chains on a single click.
    • Toolbar actions on forms, tables, charts, or modals.

    What you need

    Requires onTrigger (non-empty action list). Optional: icon, color, variant, disabled expression. Label via i18n key label. Each action that targets another element needs that element’s id on the same page (forms, tables, charts, modals, geojson fields).

    • No direct data binding - actions reference other elements by elementId.

    • Works on any page with target forms/tables/charts present.

    • save_form / reload_form require a default_form (or sub-form) elementId on the page.

    • reload_table requires a default_table elementId.

    Examples

    • Save edit form + success toast + reload list table.
    • Approve workflow step via execute_connector_operation.
    • Close modal after save_form on a sub-form.
    • Refresh dashboard charts after batch connector job.

    Avoid

    • Pure in-app navigation without side effects - use default_internal_link_button.
    • Record deletion - use default_delete_button (built-in confirmation).
    • External HTTP without connector abstraction - use default_call_button.
    • Empty onTrigger array - button renders but does nothing.

    Use instead

    • Internal Link Button — Navigate to another page only; no save/reload/connector.
    • Delete Button — Delete current record with optional confirm dialog.
    • Call Button — Invoke a named backend call / legacy API integration.
    • Form Button — Submit bound to parent form context without custom action list.

    Pairs well with

    • Table — Typical reload_table target after mutations.
    • Form — Typical save_form / reload_form target.
    • Modal Dialog — toggle_modal target for wizard flows.

    Editor properties

    Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

    Configure actions
    On TriggerrequiredList of Element data source or type + notification or type + linkTo + notification or Connector data source
    Actions executed when the user triggers this control.
    Avoid
    • Referencing elementId from another page.
    • Mixing navigate with save_form without ordering carefully.
    Default: []
    Display
    IconoptionalCustom expression (text)
    Configuration for icon.
    Default: none
    DisabledoptionalCustom expression (yes/no)
    When true, the control cannot be edited.
    Example false
    Default: none
    Styling
    ColoroptionalOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)
    Configuration for color.
    Choices
    • primary
    • secondary
    • success
    • error
    • warning
    • info
    • default
    • lighter
    • disabled
    • white
    • black
    Default: none
    VariantoptionalOne of: outlined, contained
    contained = primary CTA; outlined = secondary.
    Choices
    • outlined — Secondary action (Cancel styling without navigation).
    • contained — Primary action (Save, Submit).
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: reload_table
    Discriminator selecting which configuration variant applies.
    Choices
    • reload_table
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: save_form
    Discriminator selecting which configuration variant applies.
    Choices
    • save_form
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: reload_form
    Discriminator selecting which configuration variant applies.
    Choices
    • reload_form
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: refresh_chart
    Discriminator selecting which configuration variant applies.
    Choices
    • refresh_chart
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: refresh_display_data
    Discriminator selecting which configuration variant applies.
    Choices
    • refresh_display_data
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: refresh_geojson_field
    Discriminator selecting which configuration variant applies.
    Choices
    • refresh_geojson_field
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: toggle_modal
    Discriminator selecting which configuration variant applies.
    Choices
    • toggle_modal
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: reset_input
    Discriminator selecting which configuration variant applies.
    Choices
    • reset_input
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    NotificationrequiredSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: show_notification
    Discriminator selecting which configuration variant applies.
    Choices
    • show_notification
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Link TorequiredSettings group
    In-app navigation target (page and parameters).
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: navigate
    Discriminator selecting which configuration variant applies.
    Choices
    • navigate
    Default: none
    Page IDrequiredText
    Target page id in the application menu.
    Default: none
    ParamsrequiredKey-value map
    Query parameters passed to the target page.
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: go_back
    Discriminator selecting which configuration variant applies.
    Choices
    • go_back
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Element IDrequiredText
    Another element on the page whose data backs this field.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    TyperequiredOne of: reset_table_selection
    Discriminator selecting which configuration variant applies.
    Choices
    • reset_table_selection
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none
    Connector IDrequiredText
    Installed connector that provides external data or actions.
    Default: none
    Input MappingoptionalKey-value map
    Maps connector input fields to expressions or literals.
    Default: none
    NotificationoptionalSettings group
    Toast or banner shown after the action completes.
    Default: none
    Operation KeyrequiredText
    Connector operation invoked by this element or action.
    Default: none
    TyperequiredOne of: execute_connector_operation
    Discriminator selecting which configuration variant applies.
    Choices
    • execute_connector_operation
    Default: none
    MessagerequiredText or Custom expression (text)
    User-visible notification text.
    Default: none
    PersistoptionalYes / no
    Configuration for persist.
    Default: none
    VariantoptionalText
    contained = primary CTA; outlined = secondary.
    Default: none

    Sizing

    • Minimum size: 1 × 1 grid cells (width × height).

    Translatable labels

    • label — Visible button text; keep short (1-3 words).

    Accessibility

    Native button; label must be meaningful without icon alone.

    • Activates on Enter/Space when focused.

    Values you can read in expressions

    Other parts of your app can read live values from this element in custom expressions:

    elements.myActionButton.<property>

    clickedCount number Number of times the button was clicked. elements.myActionButton.clickedCount

    When Increments on every click. Compare it against a previous value to trigger follow-up behaviour, or check it is above zero to reveal a panel only after the button has been used.

    lastClicked date Last time the button was clicked. elements.myActionButton.lastClicked

    When Timestamp of the most recent click, or empty if never clicked. Useful for showing when an action last ran.

    To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

    1

    elements.myActionButton.clickedCount

    Replace myActionButton with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

    Where you can place it

    Drag this element into one of these containers:

    Placement notes

    • Form — Common in form footers alongside Cancel (link) and Delete.
    • Table (header slot) — Row actions often pair with internal_link_button to detail page.
    • Button Group — Group related actions (Save / Cancel / Export).

    Actions you can point at this element

    Add these from an Action Button, Call Button, or a Form’s success actions, and set Element Id to this element:

    • save_form — Persists bound form; optional success notification.
    • reload_table — Refetches table data after external change.
    • execute_connector_operation — Calls installed connector; pair with reload_table or notification on success.
    • toggle_modal — Open/close modal_dialog by elementId.
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

    {
  "config": {
    "onTrigger": [
      {
        "type": "navigate",
        "linkTo": {
          "pageId": "overview",
          "params": {
            "exampleKey": "@@expression:'value'"
          }
        },
        "notification": {
          "message": "message",
          "variant": "variant",
          "persist": false
        }
      }
    ]
  }
}

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    {
  "config": {
    "onTrigger": [
      {
        "type": "reload_table",
        "elementId": "myElement",
        "notification": {
          "message": "message",
          "variant": "variant",
          "persist": false
        }
      },
      {
        "type": "save_form",
        "elementId": "myElement",
        "notification": {
          "message": "message",
          "variant": "variant",
          "persist": false
        }
      }
    ],
    "icon": "@@expression:'value'",
    "color": "primary",
    "variant": "outlined",
    "disabled": "@@expression:true"
  }
}

    Ready-made setups

    Classic edit page -> return to list pattern.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    {
  "config": {
    "onTrigger": [
      {
        "type": "save_form",
        "elementId": "<editFormId>"
      },
      {
        "type": "reload_table",
        "elementId": "<listTableId>"
      }
    ]
  }
}