In PowerApps Community forum there was the section with new ideas and exploration for new PCF controls. And one particular caught my eye - Adaptive Cards.
What are Adaptive Cards?
Adaptive Cards are an easy way to create a card like content that will adapt to host application design. You just describe your card content using JSON schema and pass it to a renderer. As a result, the card will feel like a native part of an application. Adaptive cards can be used inside Teams, Skype, Bots, Outlook, etc.
The card can contain a wide variety of things: text, images, videos, action buttons, inputs. To make developers life easier Microsoft presented visual designer where using drag-and-drop items you can compose your card easily (you can find it here).
If you want to know more about Adaptive Cards please visit their official website. Also, I can recommend a great article by Tomasz Poszytek to learn Adaptive Cards in depth.
In this article, I will use a sample from Adaptive Cards official site - Stock update. That’s how our card looks like as a sample.
Building sample PCF control with Adaptive Cards
Let’s start building our control. I will call my control StockMarketCard. I will omit steps to setup PCF control project, but if you are not familiar with that you can find everything you need in Microsoft official docs here.
First, you need to install Adaptive Cards using npm. You can do it with next command:
After the installation, you need to import AdaptiveCards module. To do so you need to add next line to your index.ts file:
Great. Now we can use AdaptiveCards in our component. Inside your init function add next code:
We still miss the key component - card schema itself. Let’s grab it from Adaptive Cards samples and insert in init function before adaptive card initialization.
That’s it. Now you can use npm run start to check out how your component looks and feels. There are a lot of examples on AdaptiveCards that you can use, so definitely check it out.
Adding logic to the control
The control that we build above looks good, but it is just an example of how easily you can add Adaptive Cards into PCF. Unfortunately, it does nothing, as all values are hard-coded. Let’s extended it a bit to fetch real data from the input and modify card depending on it.
First, we need to find an API that supports querying stock market data. My choice was Alpha Vantage - it is free and easy to use. As a part of this component, I will use their example with Microsoft and demo key, but if you want to query real data you will need to get your API key.
Demo query will return to us all the information that we need to display.
Now we need to create a function that will receive the symbol and API key as parameters and then will call some function that will build a card. I named this function getStockInfo and it uses fetch to get stock info.
Next function is called createCard - it will receive quote JSON, parse it, modify card schema JSON and render it using code that we created previously.
You might notice an interface called QuoteDetails - I made it to work more easily with quote details because demo JSON object from Alpha Vantage has naming that wasn’t easily usable.
Last is getCard function - it will use QuoteDetails object to set correct data into our card JSON schema.
Our component is almost ready. We just need to specify two input parameters in ControlManifest.Input.xml - Symbol and ApiKey.
Now our component has all the necessary parts. You can find the full code and managed solution in my GitHub repository. Below you can see how it looks like in Dynamics.
Now you know how to add Adaptive Cards to your PCF control. Hope you find this article useful.