JSON list formatting + dynamic filtering

Frequent Contributor

Hi,

 

I have two lists and I use dynamic filtering. When I choose something in the top list, then items are filtered based on this the pick in the list bellow. I have tried to use JSON to look lists "nicer" but I have an issue when I use JSON with the "selection" list. I can unhide selection that I can choose the option but I have to click directly on the circle. When I click anywhere else on the button it redirect me to the item displayform. Do you have any trick how to avoid it?

 

Thanks,

 

Mirek :)

 

json-lists.png

7 Replies

@Miroslav Novák can you share the json for the first list (I would like to have the same radiobuttons style)? 

@cubalibreHi, you can find whole json below. If you want to see check box, its just about parameter "hideSelection" at the top of the script but there is the issue what I wrote about.

 {
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"height": "80",
"width": "300",
"hideColumnHeader": true,
"hideSelection": false,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "10px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "50%",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px",
"padding-left": "16px",
"padding-top": "16px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#333333",
"font-size": "16px",
"font-weight": "600",
"margin-bottom": "5px"
},
"txtContent": "[$Titulek]"
}
]
}
]
}
]
}
}
}

@Miroslav Novák thanks you can change the view to Tiles view in both source list and destination page

@cubalibre this is the question or answer? Yes, you can use Tiles view anywhere you want - in the list source or directly on the page for end users.

@Miroslav Novák it's the answer

@cubalibre ok, then I agree with you. If you find a way how to fix issue I will be absolutely greatful. :)

@Miroslav Novák- Hi were you able to resolve this issue?  If so, can you please share how you did it?   Thanks