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

}
Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker