Closed jaxkookie closed 1 year ago
jaxkookie
commented
1 year ago I was able to apply some CSS for a quick fix. It seems like Microsoft has a property with a min-height:1px. Adding this code to the page works, but it is not the best solution.
tecchan1107
commented
1 year ago Hi @jaxkookie .
Hmmm, I think the links used to be displayed in the List Web Part... Maybe the specification of the List Web Part has changed😔 I modified it so that the link is also displayed in the list web part. The modified code is as follows.
The spacing between links is a little wider than before.
I hope you will try the modified code and give me your feedback.
jaxkookie
commented
1 year ago @tecchan1107 thanks for the quick reply. I made some changes to the script to allow for setting colors and icons from the source list, so I had to compare both to see where you made your changes. At first, it didn't work. Once I cleared the cache, it did work. Thank you again. This issue may be closed
jaxkookie
commented
1 year ago @tecchan1107 ,
I played around with the code a bit, and I was able to close the gap. in the anchor element, around line 30+, I added this:
"top": "=if(floor(@rowIndex / 4) % 4 != 0,((floor(@rowIndex / 4) % 4) * -10) + (((floor(@rowIndex / 4) % 4) * -10)) + 'px','') "
I have 4 items in a row, but I am sure it is easily adjusted for 5
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"height": "150px",
"display": "=if(@rowIndex%4==0,'','none')"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "150px",
"height": "150px",
"left": "=if(floor(@rowIndex / 4) % 2 == 0 , @rowIndex % 4 * 150 + 'px' , @rowIndex % 4 * 150 + 75 + 'px' )",
"top": "=if(@rowIndex%4 == 0,'','-150px')"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "100%",
"fill": "=if([$bgColor],[$bgColor],'#002855')",
"top": "=if(floor(@rowIndex / 4) % 4 != 0,((floor(@rowIndex / 4) % 4) * -10) + (((floor(@rowIndex / 4) % 4) * -10)) + 'px','') "
},
"attributes": {
"id": "[$ID]",
"href": "[$URL]",
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "=if([$bgColor],[$bgColor],'#002855')",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px",
"color": "=if([$fColor2],[$fColor2],if([$fColor],[$fColor],'#cedbea'))"
},
"attributes": {
"iconName": "=if([$Icon],[$Icon],'Globe')"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center",
"color": "=if([$fColor],[$fColor],'#cedbea')"
},
"txtContent": "=[$Title]+if([$SubTitle],'\n'+[$SubTitle],'')"
}
]
}
]
}
]
}
]
}
}
tecchan1107
commented
1 year ago @jaxkookie Wooooow! Very cool and nice idea😍😍!! I would like to take your idea and modify the original code!
Thank you for the issue and for your great ideas!
jaxkookie
commented
1 year ago @tecchan1107 absolutely; let me know if you need anything.
jaxkookie
commented
1 year ago One thing I added to a secondary view for this was a way to see the colors visually. I have the honeycomb view and a secondary input view. Without replicating the honeycomb, I formatted a column called ColorPreview to see it easily. I hope it helps. Thanks again!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "inline-flex",
"text-align": "center",
"background-color": "=if([$bgColor],[$bgColor],'#002855')",
"justify-content": "center",
"align-content": "center",
"align-items": "center",
"border-width": "2px",
"border-style": "solid",
"border-color": "=if([$fColor],[$fColor],'#cedbea')"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "1.2em",
"font-weight": "bold"
},
"children": [
{
"elmType": "div",
"style": {
"color": "=if([$fColor2],[$fColor2],if([$fColor],[$fColor],'#cedbea'))",
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"color": "=if([$fColor],[$fColor],'#cedbea')",
"font-size": "14px",
"width": "100%",
"text-align": "center"
},
"txtContent": "=[$Title]+if([$SubTitle],'\n'+[$SubTitle],'')"
}
]
}
]
}
tecchan1107
commented
1 year ago Awesome🤩🤩 It would be very useful to be able to see the colors in the list view!!!
I will merge the modified code and close this issue.
Once again, thank you very much!
Great script and works perfectly in the list view. Something has changed. Previously this worked on a web part page, now there seems to be a height issue and it does not display more than a few pixels from the first row only on a web part page.