Zapier Data Sources with Adaptive Cards
The data source in the Private API Article instructs how to pull JSON data from your own API. The following section describes how to pull data from Zapier into your card using the “webhook” format.
Create a card to show Twitter data
For this tutorial, create a new file in Notepad, paste in the following JSON, and save it to a file called Zapier Twitter Card.hapact.
{"template":{"type":"AdaptiveCard","$schema":"http://adaptivecards.io/schemas/adaptive-card.json","version":"1.5","body":[{"type":"TextBlock","text":"Twitter","wrap":true,"size":"Large"},{"type":"TextBlock","wrap":true,"text":"${$root.account}"},{"type":"TextBlock","text":"Followers","wrap":true},{"type":"TextBlock","wrap":true,"text":"${$root.data.followers}"}],"styleName":"default"},"sampleData":{"dataSource":{"type":"webhook","url":"https://hooks.zapier.com/hooks/catch"},"data":{"followers":"7"},"account":"Microsoft"}}
Drag and drop this card file into the Files folder of a new board. It should look like this when you Edit:
Creating a Zap in Zapier with a Web Hook
We will be updating the webhook url in this card to a new Zap that we will create in Zapier. In Zapier (https://zapier.com/), we are going to create a 3-step zap to update our Twitter card like this:
When you create a new zap you have the option of starting with a Web Hook like this:
Copy the webhook url from the trigger here:
Updating your adaptive card data source
We will edit your new Twitter card back in Alleo and paste this into the data source.
Be sure to set the type to webhook.
Update the url field to your trigger url.
Notice that the data is expecting a field called followers … we will update that in Zapier next.
Notice that there is an account field that can be used to specify which Twitter data to query.
Save this card and then drop it onto your new board.
Alleo will call the webhook at this point and we should be able to see an event in the Zap like this:
Notice that the boardId and objectId and account of the card are coming in from Alleo. The next step in the zap is to query Twitter data using the account field:
The last step in the zap is to add an Alleo Action to Update our board object:
Set the BoardId from the Querystring:
Set the objected from the querystring:
The contextdata field must be set to JSON in the following format. Be sure to include the quotes as illustrated below:
You should now be able to test your zap like this and turn the Zap ON:
Testing your new card
Back in Alleo, you should now be able to Refresh your card and see the data: