Skip to content

Button

The Button widget is a clickable button that does something when pressed: it opens a window, goes to another page, shows a notification, or closes the window it sits in. It is the only widget that runs an action. Use it for things like a View details button in each table row or a Close button at the bottom of a dialog.

See also Actions and Windows for everything an action can do, Nav Link for a plain link, and Window for the frame of a dialog.

Using it

Say you want a View button in each row of an orders table that opens the order's page.

  1. Drop a Button into the table row and set its Text to View.
  2. In the Action section, choose Navigate to page and pick the orders detail page.
  3. Under Page parameters, fill in the order id with {$record.id}. $record is the row the button sits in.

When a visitor clicks the button, the portal opens the detail page with that order's id filled in. The same steps work for Open window. The window gets the values through its own parameters.

Options

Option Values Default Description
Text Any text or template Button The text on the button
Icon An icon key None An icon shown before the text
Action See below No action What happens when the button is pressed
Variant Theme variants Default Picks the button's look from the theme. See Variants
Custom Style CSS Empty Extra styling for the button
Box Style Sizing and spacing — The box around the button

Actions

The Action field offers these choices:

Action What it does
No action Nothing happens. Use it for a button you have not wired up yet
Open window Opens one of the portal's windows over the current page and passes values to its parameters
Show toast Shows a notification in the corner of the screen, with a title, a description and a timeout
Navigate to page Goes to another page of the portal and passes values to its parameters
Close window Closes the window the button sits in. Offered only for buttons inside a window

Every field of every action is described in Actions and Windows.

Tips

A few things to keep in mind:

  • Buttons do nothing on the designer canvas. Open the portal preview to test a flow.
  • To act on one table row or list item, put the button inside the row and pass a row value such as {$record.id}.
  • Parameter values are worked out when the button is clicked, so {$vars.selectedCustomerId} passes whatever is selected at that moment. Leave a parameter blank to use the target's default.
  • Navigate to page puts the values in the address bar, so the visitor can bookmark the result.
  • A window gets a snapshot of the values when it opens. Later changes on the page behind it do not reach the open window. The window's own data sources run again each time it opens.
  • A failed action shows an Action failed toast. See When an action fails.