I have a modern list with three columns WorkItemLink (which is a hyperlink), LinkType (which is a text telling if the work item is a bug, feature or something else) and TeamProject (which is the name of the team project) and I have been trying to figure out how json view formatting works for modern list. What I would like to do is to display some neat tiles dashboard that the user can click on to report work items or query work items for various teams.
I have found an example for tiles formatting that I have adapted, and the result is really big rectangular tiles in the List mode, which seems to be default. In the Tiles mode smaller tiles are shown, but I cannot seem to set this as default mode, so the end-user will always be presented to the ugliest version of the list. How can I avoid this?
Also, I would rather show the icons showing the link type first or above the work item link, since the text for the work item hyperlink will vary in length. Currently the icon is "jumping".
Now I am only showing one team project per view, to simplify things.
This is how it looks now, in list mode:
...and in Tiles mode:
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"tileProps": {
"hideSelection": true,
"width": "180",
"height": "150",
"formatter": {
"elmType": "a",
"attributes": {
"href": "[$WorkItemLink]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "180px",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$WorkItemLink.desc]"
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$LinkType] == 'Requirement', 'OpenEnrollment', if([$LinkType] == 'Feature', 'FavoriteList', if([$LinkType] == 'Task', 'Assign', if([$LinkType] == 'Query', 'Questionnaire', if([$LinkType] == 'Bug', 'WorkItemBug', 'ErrorBadge'))))",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
},
"rowFormatter": {
"elmType": "a",
"attributes": {
"href": "[$WorkItemLink]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$WorkItemLink.desc]"
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$LinkType] == 'Requirement', 'OpenEnrollment', if([$LinkType] == 'Feature', 'FavoriteList', if([$LinkType] == 'Task', 'Assign', if([$LinkType] == 'Query', 'Questionnaire', if([$LinkType] == 'Bug', 'WorkItemBug', 'ErrorBadge'))))",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
}
