Hello, I have a problem with my Json and tried to modify it couple of times but my changes does not work at all.
1. Display Duration and duration value in the same line
2. The spaces/vertical distance between Title, Link to the Event and Location are very big... I put 0.1 px but they are still big. I want to have one right after another.
{
"height": 360,
"width": 330,
"hideSelection": false,
"fillHorizontally": false,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"style": {
"background-color": "#FEDB00",
"border": "6px solid #003DA5",
"box-shadow": "0px 0px 0px gray",
"padding": "5px",
"border-radius": "10px",
"font-size": "12px"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-pink sp-css-borderColor-blue sp-card-borderHighlight sp-card-subContainer"
},
"style": {
"border": "6px solid #003DA5"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-label"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "5"
},
"style": {
"margin-bottom": "0px",
"color": "black",
"font-size": "12px"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
}
},
{
"elmType": "a",
"attributes": {
"title": "[$LinktotheEvent]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"href": "[$LinktotheEvent]",
"target": "=if ([$LinktotheEvent] == '', '', '_blank')"
},
"style": {
"margin-top": "0px",
"pointer-events": "=if ([$LinktotheEvent] == '', 'none', 'auto')",
"text-decoration": "=if ([$LinktotheEvent] == '', 'none', 'auto')",
"font-size": "15px"
},
"txtContent": "=if ([$LinktotheEvent.desc] == '', '–', [$LinktotheEvent.desc])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$Location]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Location] == '', '–', [$Location])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Duration.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$Duration.displayValue] == '', '–', [$Duration.displayValue] + 'h')",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Duration.displayValue] == '', '–', [$Duration.displayValue] + 'h')"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Timezone.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Timezone]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$Timezone] == '', '–', [$Timezone])",
"style": {
"margin-bottom": "0px",
"-webkit-line-clamp": "2",
"height": "6px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$DateTime]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$DateTime] == '', '–', [$DateTime])",
"style": {
"margin-top": "0px",
"-webkit-line-clamp": "2",
"height": "50px"
}
}
]
}
]
}
]
}
}
