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 |
{
"supportsInteractivity": true,
"spacing": {
"small": 1,
"default": 5,
"medium": 8,
"large": 16,
"extraLarge": 50,
"padding": 32
},
"separator": {
"lineThickness": 1,
"lineColor": "#FFE2E8EA"
},
"imageSizes": {
"small": 24,
"medium": 48,
"large": 100
},
"fontTypes": {
"default": {
"fontFamily": "'Nunito Sans', Segoe UI, Helvetica Neue, Helvetica, sans-serif",
"fontSizes": {
"small": 14,
"default": 16,
"medium": 18,
"large": 20,
"extraLarge": 36
},
"fontWeights": {
"lighter": 200,
"default": 600,
"bolder": 700
}
},
"monospace": {
"fontFamily": "Segoe UI Mono",
"fontSizes": {
"small": 14,
"default": 16,
"medium": 18,
"large": 20,
"extraLarge": 36
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
},
"containerStyles": {
"default": {
"backgroundColor": "#4560EB",
"foregroundColors": {
"default": {
"default": "#FFFFFF",
"subtle": "#CCFFFFFF"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#ff6b6b",
"subtle": "#DDFF0000"
},
"good": {
"default": "#25c09c",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
},
"emphasis": {
"backgroundColor": "#33000000",
"foregroundColors": {
"default": {
"default": "#FFFFFFFF",
"subtle": "#FF9C9E9F"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FFFF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#FF00FF00",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
},
"accent": {
"backgroundColor": "#882E89FC",
"foregroundColors": {
"default": {
"default": "#FFFFFFFF",
"subtle": "#FF9C9E9F"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FFFF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#FF00FF00",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
},
"attention": {
"backgroundColor": "#DDFF0000",
"foregroundColors": {
"default": {
"default": "#FFFFFFFF",
"subtle": "#FF9C9E9F"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FFFF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#FF00FF00",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
},
"good": {
"backgroundColor": "#DD00FF00",
"foregroundColors": {
"default": {
"default": "#FFFFFFFF",
"subtle": "#FF9C9E9F"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FFFF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#FF00FF00",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
},
"warning": {
"backgroundColor": "#DDFFD800",
"foregroundColors": {
"default": {
"default": "#FFFFFFFF",
"subtle": "#FF9C9E9F"
},
"accent": {
"default": "#FF2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FFFF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#FF00FF00",
"subtle": "#DD00FF00"
},
"warning": {
"default": "#FFFFD800",
"subtle": "#DDFFD800"
}
}
}
},
"actions": {
"maxActions": 3,
"spacing": "default",
"buttonSpacing": 10,
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 16
},
"actionsOrientation": "horizontal",
"actionAlignment": "stretch"
},
"adaptiveCard":{
"allowCustomStyle":true
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": false,
"maxWidth": 300
},
"value": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "default",
"wrap": true
},
"spacing": 10
}
}
|
| CSS styling |
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&display=swap');
/* BASIC STYLES FOR ALL THE CUSTOM ADAPTIVE CARDS */
html,
body,
.ac-adaptiveCard {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
margin: 0;
overflow: hidden;
}
.ac-adaptiveCard:focus {
outline: 0;
}
/* SPECIFIC STYLES FOR STOCK WIDGET */
.ac-adaptiveCard > .ac-container:nth-child(3) {
margin-top: auto !important;
}
.ac-adaptiveCard > .ac-container:nth-child(3) .ac-textBlock {
text-transform: uppercase;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet .ac-container:first-child .ac-textBlock {
line-height: .96 !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet .ac-container:nth-child(3) .ac-image {
position: relative;
bottom: -0.375rem;
}
.ac-actionSet {
justify-content: flex-end !important;
}
button.style-default {
background-color: transparent;
border: none;
color: white;
cursor: pointer;
display: inline-flex !important;
flex: 0 1 auto !important;
font-family: 'Nunito Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
opacity: .8;
padding: 0;
}
button.style-default:focus {
outline: none;
}
/* RESPONSIVE STYLES */
/* Wide block tablet */
@media screen and (max-width: 25.5625rem) and (height: 13.625rem),
/* Narrow block tablet*/
@media screen and (min-height: 20.625rem) and (max-height: 20.75rem) {
.ac-adaptiveCard {
padding: 1.5rem !important;
}
button.style-default {
font-size: .875rem !important;
}
.ac-adaptiveCard > .ac-container:nth-child(3) .ac-textBlock {
font-size: .75rem !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet > .ac-container:first-child .ac-textBlock:first-child {
font-size: 2rem !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet .ac-container:nth-child(3) .ac-image {
bottom: -.25rem;
}
}
/* Narrow block tablet*/
@media screen and (min-height: 20.625rem) and (max-height: 20.75rem) {
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet {
flex-wrap: wrap;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet > .ac-container:first-child {
flex-grow: 1 !important;
flex-basis: 100% !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet > .ac-vertical-separator:nth-child(2) {
display: none !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet > .ac-container:nth-child(3) .ac-image {
bottom: -.0625rem !important;
}
.ac-adaptiveCard > .ac-container:nth-child(5) .ac-columnSet > .ac-container:nth-child(4) {
margin-top: .1875rem !important;
}
}
|