SOLVED

SharePoint List column formatting - CardProps not working if input column is hidden

%3CLINGO-SUB%20id%3D%22lingo-sub-2161864%22%20slang%3D%22en-US%22%3ESharePoint%20List%20column%20formatting%20-%20CardProps%20not%20working%20if%20input%20column%20is%20hidden%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2161864%22%20slang%3D%22en-US%22%3E%3CP%3EJSON%20Formatting%20Level%3A%20BEGINNER%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20hide%20some%20column%20in%20oder%20to%20have%20a%20clean%20list%20view%20and%20to%20provide%20information%20if%20required%20via%20CardProps%20(info%20column).%3CBR%20%2F%3EIf%20the%20input%20column%20(Description)%20for%20the%20CardProps%20is%20visible%20the%20box%20opens%20as%20expected%20once%20you%20click%20the%20icon.%3C%2FP%3E%3CP%3EIn%20case%20the%20input%20column%20(Description)%20is%20hidden%20the%20box%20does%20not%20open%20on%20click%20or%20is%20kind%20of%20empty%20and%20shows%20nothing.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Evisible%20input%20column%3C%2FP%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22CardProps%20visible%20input%20column.PNG%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F257311iCE8F7CD2CF96A372%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22CardProps%20visible%20input%20column.PNG%22%20alt%3D%22CardProps%20visible%20input%20column.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehidden%20input%20column%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22CardProps%20hidden%20input%20column.PNG%22%20style%3D%22width%3A%20970px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F257312i3A8E3DF9DDB616E5%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22CardProps%20hidden%20input%20column.PNG%22%20alt%3D%22CardProps%20hidden%20input%20column.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22elmType%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22div%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22attributes%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22iconName%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22Info%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22class%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22ms-fontColor-red%20ms-fontSize-xxl%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22customCardProps%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22openOnEvent%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22click%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22formatter%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22elmType%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22div%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22txtContent%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22%5B%24Description%5D%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EBTW%3A%20I%20would%20like%20to%20show%20additional%20input%20in%20the%20CardProps%20from%20other%20columns%20like%20a%20link%20etc.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2161864%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EUsage%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2162829%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20List%20column%20formatting%20-%20CardProps%20not%20working%20if%20input%20column%20is%20hidden%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2162829%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F103967%22%20target%3D%22_blank%22%3E%40Mehmet%20Demir%C3%B6rs%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThis%20is%20the%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3Eexpected%20behavior%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3Bin%20SharePoint%20online%20modern%20experience.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EIn%20order%20to%20add%20the%20reference%20to%20the%20column%20in%26nbsp%3BJSON%20(column%2Fview)%20formatting%2C%26nbsp%3Byou%20have%20to%20show%20that%20column%20in%20the%20list%20view%20(as%20you%20are%20referencing%26nbsp%3Bit%20using%20%5B%24Description%5D).%20Hiding%20the%20column%20from%20list%20view%20will%20not%20work%20in%20this%20case.%3C%2FSPAN%3E%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

JSON Formatting Level: BEGINNER

 

I am trying to hide some column in oder to have a clean list view and to provide information if required via CardProps (info column).
If the input column (Description) for the CardProps is visible the box opens as expected once you click the icon.

In case the input column (Description) is hidden the box does not open on click or is kind of empty and shows nothing. 

 

visible input column

CardProps visible input column.PNG

 

hidden input column

CardProps hidden input column.PNG

 

{
"elmType": "div",
"attributes": {
"iconName": "Info",
"class": "ms-fontColor-red ms-fontSize-xxl"
},
"customCardProps": {
"openOnEvent": "click",
"formatter": {
"elmType": "div",
"txtContent": "[$Description]"
}
}
}
 
BTW: I would like to show additional input in the CardProps from other columns like a link etc. 
5 Replies
best response confirmed by Mehmet Demirörs (New Contributor)
Solution

@Mehmet Demirörs 

This is the expected behavior in SharePoint online modern experience.

 

In order to add the reference to the column in JSON (column/view) formatting, you have to show that column in the list view (as you are referencing it using [$Description]). Hiding the column from list view will not work in this case.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Dear @ganeshsanap and @Mehmet Demirörs,

 

Do you know if there is an existing uservoice entry to allow using hidden fields? If not what about inserting it? Which section of https://sharepoint.uservoice.com/ would be better? I suppose SharePoint Dev Platform but I'm not sure.

 

Regards

Gianmaria

@gianmaria_leoni there doesn't appear to be an existing uservoice request to allow hidden columns in the JSON view format. The list of JSON-related requests is here.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

I am not sure if there is already a existing uservoice but I can give a hint how i solved the issue.
In the column settings I chose calculated value to make currentfield value same a hidden column value. This way I could show content in a cardprop even if the value where the content is coming from is hidden. Hope this may help you as well.