Interactivity

Zipper lets you add interactive elements to your output. These elements can then be used to trigger other actions within your applet.

Actions

Actions are interactive elements that can be included in your output. Zipper renders Actions either as buttons or dropdowns.

When clicked, the Action will trigger a handler function within the app to be run. There are several different approach for how to display the output of this Action (see showAs).

Actions should be described as JSON in the output of your handler function. Zipper provides a method that generates this JSON for you: Zipper.Action.create().

Calling Zipper.Action.create

To add either a button or a dropdown, call the Zipper.Action.create method with the following parameters:

{
  /**
  * Tell Zipper if you want to render a button or a dropdown
  */
	actionType: 'button' | 'dropdown'
 
  /**
  * Determine how the UI should be updated after the action has run.
  */
	showAs: 'replace_all' | 'expanded' | 'modal' | 'refresh',
 
  /**
  * The filename of the handler you want to run
  */
	path: string,
 
  /**
  * A collection of the inputs you're passing to the path.
  */
	inputs: Record<string, any>
 
  /**
  * Run automatically or require user to click Run.
  */
	run: boolean,
 
  /** FOR BUTTONS ONLY
  *
  * The text of the button
  */
	text: string,
 
  /** FOR DROPDOWNS ONLY
  *
  * Describes the options that are available in the dropdown.
  * The key of the record should match the input value you want to override
  */
  options: Record<string, { value: string, label: string | number | boolean }[]>,
}

Include the output of this Zipper.Action.create method call in the return value of the handler function.

The Interactive Applet shows an example of how to use button Actions.

showAs

The showAs property determines how the UI should be updated after the Action has run:

• replace_all: This approach replaces the current output with the result of the Action. This can only be used when run: true (because there must be output from the function that can be used to replace the existing output). This option useful for actions that drill into data.

• expanded: This approach displays the result of the Action in the expanded section below the main output. This is useful for peeking into data.

• modal: This approach displays the output of the Action in a modal. If run: false, then the background output will be automatically refreshed when the modal is closed.

• refresh: This approach runs the Action and then re-runs the handler that generated the original content using the original inputs. This is useful for actions that update data.

run

The run property specifies whether the Action should run the handler with the provided inputs automatically or if it should prefill the inputs form and require the user to click ▷ Run.