Card Actions

There are times when you'd like your Now Assistant Cards to execute custom functionality on a user generated event. For example, let's say you wish to create a Card with an image gallery, but you'd like to show only 5 images at a time. You could load the data from an API, limit it to display only the 5 first entries when the card is initialized and then add a button that would load the next 5 images when clicked. Card actions will help you to supplement Now Assistant Cards with custom logic.

If you'd like to see a real life example of Card Actions, please have a look at our guide of building a Youtube Gallery Card.

How it works

You can define Card actions, by navigating to the Actions tab in the Card Designer:

Navigate to Actions tab

Card actions are defined as Javascript functions and have to be appended to the action object. For example:

action.someCardActionName = function(state) { 

Some code here...

}

The Card state gets passed as the function parameter, therefore it is accessible in every Card action you define.

Events

To execute a Card action it is necessary to associate it with an event e.g. a user click on a button. The number of supported events is constantly increasing as we add new functionality and at the moment the supported events are as follows:

at-click-action
Generated when an element is clicked

Associating an event with an action

To associate an event with a Card action we need to add the event as a property to a html element and set the name of the action as the value. For example, if we want to execute a Card action named someCardActionName when a button is clicked, we would add a at-click-action property to the button element and would set its value to the action name:

<button at-click-action="someCardActionName" name="button" />

'Initialize' Card action

You can also use a special Card action named initialize, which gets called once as soon as the Card is rendered. For example:

action.initialize = function(state) { 

// code here gets executed once when the card is rendered on the page

}