# Using interactions in components

Abstract

Describes how to use the Click property of components to add interaction to an application.

Many controls have a property called Click where you specify what happens when the click event for the control is raised. This event is raised, for example, when a visitor clicks a button, but you can also raise it programmatically.

You can specify this interaction using one of these three protocols: Click, ServerClick, or Trigger.

Specify a JavaScript string like this: javascript:alert("Hello, world");.

You can enter more useful JavaScript than the very simple example above. The following example calls the refresh method of a component called DataSource:

javascript:app.DataSource.refresh();

This works because SPEAK creates a model of the whole page during page initialization, and you have access to all components in the page as app.<component>. You can call functions defined in the PageCode script file with app.<function>, and you can call a method of a component with app.<component>.<method>.

Specify a server-side MVC controller and action. Specify the controller and the action like this: serverclick:<controller name>/<action>. The controller name does not need the Controller postfix.

Specify the event to trigger. This is the default protocol, so you do not need to prefix with trigger:.

For example, if a component has the ID item and this component listens for an event called save, you can trigger the event like this: item:save (or trigger:item:save).

You can trigger events on other components in the same SPEAK page as the component where you specify the user interaction.

The components have these standard events:

Event

Description

set

Sets attributes in the model

hide

Sets isVisible to false

show

Sets isVisible to true

toggle

Toggles the value of isVisible

enable

Sets isEnabled to true

disable

Sets isEnabled to false

Other events are specific to the individual components.