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-1787172%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-1787172%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%3EHi%2C%20you%20can%20find%20whole%20json%20below.%20If%20you%20want%20to%20see%20check%20box%2C%20its%20just%20about%20parameter%20%22hideSelection%22%20at%20the%20top%20of%20the%20script%20but%20there%20is%20the%20issue%20what%20I%20wrote%20about.%3C%2FP%3E%3CP%3E%26nbsp%3B%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22tileProps%22%3A%20%7B%3CBR%20%2F%3E%22height%22%3A%20%2280%22%2C%3CBR%20%2F%3E%22width%22%3A%20%22300%22%2C%3CBR%20%2F%3E%22hideColumnHeader%22%3A%20true%2C%3CBR%20%2F%3E%22hideSelection%22%3A%20false%2C%3CBR%20%2F%3E%22formatter%22%3A%20%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22flex%22%2C%3CBR%20%2F%3E%22align-items%22%3A%20%22stretch%22%2C%3CBR%20%2F%3E%22margin-bottom%22%3A%20%2216px%22%2C%3CBR%20%2F%3E%22min-width%22%3A%20%2210px%22%2C%3CBR%20%2F%3E%22flex-grow%22%3A%20%221%22%2C%3CBR%20%2F%3E%22justify-content%22%3A%20%22space-around%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%225px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22width%22%3A%20%22100%25%22%2C%3CBR%20%2F%3E%22height%22%3A%20%2250%25%22%2C%3CBR%20%2F%3E%22box-shadow%22%3A%20%220px%201.6px%203.6px%200%20%2300000024%2C%200px%200.3px%200.9px%200%20%2300000024%22%2C%3CBR%20%2F%3E%22overflow%22%3A%20%22hidden%22%2C%3CBR%20%2F%3E%22border-radius%22%3A%20%222px%22%2C%3CBR%20%2F%3E%22padding-left%22%3A%20%2216px%22%2C%3CBR%20%2F%3E%22padding-top%22%3A%20%2216px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22ms-bgColor-neutralLighterAlt%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22text-align%22%3A%20%22left%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22color%22%3A%20%22%23333333%22%2C%3CBR%20%2F%3E%22font-size%22%3A%20%2216px%22%2C%3CBR%20%2F%3E%22font-weight%22%3A%20%22600%22%2C%3CBR%20%2F%3E%22margin-bottom%22%3A%20%225px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%5B%24Titulek%5D%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%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
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

6 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.

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