Configure Stock card – JSON custom widget

Share on print
Share on facebook
Share on linkedin
Share on whatsapp
Share on email

 

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;
}
}

 

Related Articles