Call Button

Tips & examples

A clickable, highly styleable action button (with optional custom icons and colors) that executes a named backend API function and runs cascading event-driven actions on completion.

When to use

Invoking specific backend function queries or API endpoints directly upon click.
Executing transactional backend processes that require custom HTTP headers (such as raw JSON, XML, or binary payloads).
Running an ordered list of frontend UI mutations, reloads, or notifications as post-execution side effects.

What you need

Requires specifying a configured backend function name in the setup properties. Optionally accepts custom content-type request headers and sequential trigger operations.

Examples

Triggering a backend calculations API with explicit application/json headers, followed by a page reload.
Downloading or sending binary file data to a processing endpoint and showing a success toast notification.
Firing an external web request, then opening a modal dialog on a successful response.

Avoid

Using an Action Button purely for navigation without an action payload when a semantic link or back navigation component would suffice.
Configuring multiple action triggers that execute conflicting state mutations (e.g., combining reset_input with save_form simultaneously on the same button click without sequencing).
Setting Show Notification to true while leaving the notification Message completely empty or unconfigured.

Use instead

Action Button — You only need to chain UI mutations (such as saving a form or reloading a table) without executing a custom backend function query.

Properties

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.

Setup

Call NamerequiredCustom expression (text)

Selects the specific backend API or endpoint query function to execute upon button click.

Default: none

Content Type FormatoptionalOne of: json, geo, text, xml, bytea

Determines the side effect operation run immediately after the backend function completes successfully.

Choices

json
geo
text
xml
bytea

Default: none

Element IDrequiredTextInside `onSuccess`

Another element on the page whose data backs this field.

Default: none

NotificationoptionalSettings groupInside `onSuccess`

Toast or banner shown after the action completes.

Default: none

Display

IconoptionalCustom expression (text): Selects an illustrative graphic badge from the platform’s icon library to embed next to the text label.
Default: none
Show NotificationoptionalYes / no: Boolean switch controlling whether success or error feedback messages are automatically pushed to the application display viewport.
Default: none
DisabledoptionalYes / no or Custom 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)

Sets the color palette mapping for the button’s visual elements.

Choices

primary — Theme default branding blue color (#007bff).
secondary — Muted branding slate gray color (#6c757d).
success — Standard transactional green color (#28a745).
error — Severe action warning red color (#dc3545).
warning — Cautionary yellow color (#ffc107).
info — Informing teal/light blue color (#17a2b8).
default — Dark charcoal text color (#343a40).
lighter
disabled — Non-interactive gray color (#adb5bd).
white — Plain white color (#ffffff).
black — Plain black color (#000000).

Default: none

VariantoptionalOne of: outlined, contained

Sets the physical structural rendering of the button container layout.

Choices

outlined — Hollow body with thin perimeter strokes and matched colored text labels.
contained — Full-bleed background paint utilizing the designated theme color structure.

Default: none

Inside `onSuccess.$item.reload_table`: (reload_table) ↕

TyperequiredOne of: reload_table

Discriminator selecting which configuration variant applies.

Choices

reload_table

Default: none

Inside `onSuccess.$item.reload_table.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.save_form`: (save_form) ↕

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

Inside `onSuccess.$item.save_form.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.reload_form`: (reload_form) ↕

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

Inside `onSuccess.$item.reload_form.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.refresh_chart`: (refresh_chart) ↕

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

Inside `onSuccess.$item.refresh_chart.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.refresh_display_data`: (refresh_display_data) ↕

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

Inside `onSuccess.$item.refresh_display_data.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.refresh_geojson_field`: (refresh_geojson_field) ↕

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

Inside `onSuccess.$item.refresh_geojson_field.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.toggle_modal`: (toggle_modal) ↕

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

Inside `onSuccess.$item.toggle_modal.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.reset_input`: (reset_input) ↕

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

Inside `onSuccess.$item.reset_input.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.show_notification`: (show_notification) ↕

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

Inside `onSuccess.$item.show_notification.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.navigate`: (navigate) ↕

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

Inside `onSuccess.$item.navigate.linkTo`: (linkTo) ↕

Page IDrequiredText: Target page id in the application menu.
Default: none
ParamsrequiredKey-value map: Query parameters passed to the target page.
Default: none

Inside `onSuccess.$item.navigate.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.go_back`: (go_back) ↕

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

Inside `onSuccess.$item.go_back.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.reset_table_selection`: (reset_table_selection) ↕

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

Inside `onSuccess.$item.reset_table_selection.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Inside `onSuccess.$item.execute_connector_operation`: (execute_connector_operation) ↕

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

Inside `onSuccess.$item.execute_connector_operation.notification`: (notification) ↕

MessagerequiredText or Custom expression (text): User-visible notification text.
Default: none
PersistoptionalYes / no: Configuration for persist.
Default: none
VariantoptionalText: Sets the physical structural rendering of the button container layout.
Default: none

Sizing

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

Translatable labels

label — The main text readable string centered within the action button frame.

Expressions

Values you can read in expressions

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

elements.myCallButton.<property>

loading boolean Indicates if the function is being called right now. elements.myCallButton.loading

When True while the call is in flight. Use it to disable dependent controls so the user cannot start a second run.

error string Error message when the last operation failed. elements.myCallButton.error

When Error text from the last failed call. Show it near the button rather than relying only on a toast the user may miss.

result any The function result. elements.myCallButton.result

When What the called function returned. Display it, or branch on it, without adding a second element to re-fetch the same thing.

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.myCallButton.loading

Replace myCallButton 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.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
6
{
  "config": {
    "callName": "@@expression:'value'",
    "callArgs": "@@expression:'value'"
  }
}

 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
29
30
31
32
33
34
35
{
  "config": {
    "callName": "@@expression:'value'",
    "callArgs": "@@expression:'value'",
    "argumentDataTypes": {
      "exampleKey": "value"
    },
    "contentTypeFormat": "json",
    "icon": "@@expression:'value'",
    "color": "primary",
    "variant": "outlined",
    "showNotification": false,
    "disabled": false,
    "onSuccess": [
      {
        "type": "reload_table",
        "elementId": "myElement",
        "notification": {
          "message": "message",
          "variant": "variant",
          "persist": false
        }
      },
      {
        "type": "save_form",
        "elementId": "myElement",
        "notification": {
          "message": "message",
          "variant": "variant",
          "persist": false
        }
      }
    ]
  }
}

When to use

What you need

Examples

Avoid

Related elements

Editor properties

Sizing

Translatable labels

Values you can read in expressions

Where you can place it