JSON list formatting + dynamic filtering

%3CLINGO-SUB%20id%3D%22lingo-sub-1663896%22%20slang%3D%22en-US%22%3EJSON%20list%20formatting%20%2B%20dynamic%20filtering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1663896%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20two%20lists%20and%20I%20use%20dynamic%20filtering.%20When%20I%20choose%20something%20in%20the%20top%20list%2C%20then%20items%20are%20filtered%20based%20on%20this%20the%20pick%20in%20the%20list%20bellow.%20I%20have%20tried%20to%20use%20JSON%20to%20look%20lists%20%22nicer%22%20but%20I%20have%20an%20issue%20when%20I%20use%20JSON%20with%20the%20%22selection%22%20list.%20I%20can%20unhide%20selection%20that%20I%20can%20choose%20the%20option%20but%20I%20have%20to%20click%20directly%20on%20the%20circle.%20When%20I%20click%20anywhere%20else%20on%20the%20button%20it%20redirect%20me%20to%20the%20item%20displayform.%20Do%20you%20have%20any%20trick%20how%20to%20avoid%20it%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMirek%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22json-lists.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F218128iB295A4B3D52BEDFD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22json-lists.png%22%20alt%3D%22json-lists.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1663896%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EJson%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1783921%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20list%20formatting%20%2B%20dynamic%20filtering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1783921%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5245%22%20target%3D%22_blank%22%3E%40Miroslav%20Nov%C3%A1k%3C%2FA%3E%26nbsp%3Bcan%20you%20share%20the%20json%20for%20the%20first%20list%20(I%20would%20like%20to%20have%20the%20same%20radiobuttons%20style)%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1787207%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20list%20formatting%20%2B%20dynamic%20filtering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1787207%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5245%22%20target%3D%22_blank%22%3E%40Miroslav%20Nov%C3%A1k%3C%2FA%3E%26nbsp%3Bthanks%20you%20can%20change%20the%20view%20to%20Tiles%20view%20in%20both%20source%20list%20and%20destination%20page%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1787222%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20list%20formatting%20%2B%20dynamic%20filtering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1787222%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F477437%22%20target%3D%22_blank%22%3E%40cubalibre%3C%2FA%3E%26nbsp%3Bthis%20is%20the%20question%20or%20answer%3F%20Yes%2C%20you%20can%20use%20Tiles%20view%20anywhere%20you%20want%20-%20in%20the%20list%20source%20or%20directly%20on%20the%20page%20for%20end%20users.%3C%2FP%3E%3C%2FLINGO-BODY%3E
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