Recently a custom card feature is added to SharePoint List Formatting. By using that feature, SharePoint allows us to add the customized cards to the column, when ever hovering / clicking in List formatting (Column / View).
The below is the schema for custom card in Column / View formatting as follows,
{ "customCardProps": { "type": "object", "description": "Object that defines custom card props on hover/click", "properties": { "openOnEvent": { "description": "Event name to decide on which the customCard should open", "type": "string", "pattern": "(click|hover)$" }, "directionalHint": { "description": "Specify the direction relative to the target in which CustomCard will be positioned", "enum": [ "topCenter", "bottomCenter", "leftCenter", "rightCenter" ] }, "isBeakVisible": { "description": "Specify if the beak is to be shown or not", "type": "boolean" }, "formatter": { "description": "JSON object that defines formatting for customCards", "$ref": "#/definitions/elm" } }, "required": [ "formatter", "openOnEvent" ] } }
Based on the schema, I like to show the simple example to display the image when ever we hovering over the Title column.
Output for the above JSON snippet is pictured below,
Leave a Reply