Let us remind you that this is an excellent example of what can be achieved. If you want to improve it, feel free to do your own development. And have in mind that with the browsers’ evolution in next versions this development could be outdated. In this case, you have to tweak this code to fix any errors.
If you need the files go to this repository.
We leave here the different values for the custom widget fields:
| Source Data URL (based on your intention, use any of these URL) |
|
| Template JSON |
| { “$schema”: “http://adaptivecards.io/schemas/adaptive-card.json”, “type”: “AdaptiveCard”, “version”: “1.3”, “body”: [ { “type”: “Container”, “items”: [ { “type”: “ColumnSet”, “columns”: [ { “type”: “Column”, “width”: “stretch”, “items”: [ { “type”: “Image”, “url”: “data:image/svg+xml,%3Csvg width=’48’ height=’48’ fill=’none’ viewBox=’0 0 48 48’%3E%3Cpath fill=’%23fff’ fill-rule=’evenodd’ d=’M25.142 40c1.183 0 2.142-.952 2.142-2.125V28.31c0-1.174-.959-2.125-2.142-2.125h-3.235c-1.184 0-2.152.942-2.152 2.116v9.564c0 1.173.99 2.134 2.174 2.134h3.213zM14.387 40c1.183 0 2.142-.952 2.142-2.125v-4.25c0-1.175-.96-2.126-2.142-2.126l-3.267-.01c-1.183 0-2.12.952-2.12 2.126v4.25C9 39.04 9.968 40 11.151 40h3.236zM30.51 37.866c0 1.173.969 2.134 2.152 2.134h3.235c1.184 0 2.143-.952 2.143-2.125V22.998c0-1.174-.96-2.126-2.143-2.126h-3.235c-1.183 0-2.151.943-2.151 2.117v14.877z’ clip-rule=’evenodd’/%3E%3Cpath fill=’%23fff’ d=’M34.659 13.323v1.571c.207 2.943 4.328 2.75 4.341 0V8.157C39 6.965 38.116 6 36.83 6h-6.787c-2.868.153-2.895 4.12 0 4.314h1.58l-6.384 6.318-7.65-.014h-.008c-.676 0-1.306.31-1.715.85l-5.994 5.62c-1.932 2.018 1.075 5.314 3.43 2.557l5.365-4.773 7.463.014h.007c.57 0 1.112-.227 1.514-.62l7.008-6.943z’/%3E%3C/svg%3E%0A”, “size”: “medium” } ]}, { “type”: “Column”, “width”: “stretch”, “horizontalAlignment”: “Right”, “items”: [ { “type”: “ActionSet”, “actions”: [ { “type”: “Action.OpenUrl”, “title”: “${symbol}”, “url”: “https://www.tradingview.com/symbols/NZX-SMW/”, “style”: “default” } ], “spacing”: “none”, “horizontalAlignment”: “right” } ]} ], “spacing”: “none” } ]}, { “type”: “Container”, “items”: [ { “type”: “TextBlock”, “text”: “{{TIME(${formatEpoch(latestUpdate, ‘yyyy-MM-ddTh:mm:ssZ’)})}} ・ ${primaryExchange}”, “weight”: “Bolder” } ], “spacing”: “ExtraLarge” }, { “type”: “Container”, “items”: [ { “type”: “ColumnSet”, “columns”: [ { “type”: “Column”, “width”: “auto”, “items”: [ { “type”: “TextBlock”, “text”: “${formatNumber(latestPrice, 2)} €”, “size”: “ExtraLarge”, “weight”: “Bolder” } ], “verticalContentAlignment”: “Bottom” }, { “type”: “Column”, “width”: “auto”, “items”: [ { “type”: “Image”, “$when”: “${change > 0}”, “url”: “data:image/svg+xml,%3Csvg width=’18’ height=’10’ fill=’none’ viewBox=’0 0 18 10’%3E%3Cpath fill=’%23fff’ d=’M2 0h8v8H8V3.464L1.464 10 0 8.536 6.536 2H2V0z’/%3E%3C/svg%3E” }, { “type”: “Image”, “$when”: “${change == 0}”, “spacing”: “None” }, { “type”: “Image”, “$when”: “${change < 0}”, “url”: “data:image/svg+xml,%3Csvg width=’18’ height=’10’ fill=’none’ viewBox=’0 0 18 10’%3E%3Cpath fill=’%23fff’ d=’M10 2v8H2V8h4.536L0 1.464 1.464 0 8 6.536V2h2z’/%3E%3C/svg%3E” } ], “verticalContentAlignment”: “center”, “spacing”: “Large” }, { “type”: “Column”, “width”: “stretch”, “items”: [ { “type”: “TextBlock”, “$when”: “${change > 0}”, “text”: “${formatNumber(change,2)}”, “color”: “default”, “size”: “default”, “weight”: “default”, “spacing”: “None” }, { “type”: “TextBlock”, “$when”: “${change == 0}”, “text”: “${formatNumber(change,2)}”, “color”: “default”, “size”: “default”, “weight”: “default”, “spacing”: “None” }, { “type”: “TextBlock”, “$when”: “${change < 0}”, “text”: “${formatNumber(mul(change,-1),2)}”, “color”: “default”, “size”: “default”, “weight”: “default”, “spacing”: “None” } ], “verticalContentAlignment”: “Bottom”, “spacing”: “none” } ]} ]} ]} |
| Hostconfig styling |
{
|
| CSS styling |
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&display=swap');
|