SharePoint developers can use JSON to format columns, views and customize list form.
Let us look at an example to preview the file content using a hover card, when the user moves the mouse over the file name (or any other field of your choice).
We are going to setup a new column "preview" (single line of text) and apply JSON formatting to this column.
- Navigate to your list/library.
- Select the column in view.
- Click Column settings --> Format this column.
- This will open a pane in the right section of screen 'Format preview column'.
- Copy and paste below JSON in the text box.
- Click Preview and make adjustments, if required.
- Click 'Save' once comfortable with the hover card.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "img",
"attributes": {
"src": "@thumbnail.medium"
},
"style": {
"display": "block",
"margin": "0 auto",
"max-height": "100px"
},
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"formatter": {
"elmType": "img",
"attributes": {
"src": "@thumbnail.200x400"
},
"style": {
"max-height": "400px"
}
}
}
}
This is how the output will look. When user moves mouse and hover over the 'preview' column value of the file in Document Library, the hover card will popup and shows the contents of the file. You can adjust the height/width and other style parameters for the card.
Also note that we are showing a small thumbnail preview of the file in the same 'preview' column.
Have Questions? Post them here!
More Posts related to SharePoint,
- SharePoint error - An exception occurred when trying to issue security token: This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms..
- PowerShell iterate and get all SharePoint sites and sub sites
- SharePoint Online: Editing session has ended Message
- How to Share Microsoft SharePoint Site with Users or Groups
- How to delete SharePoint Online List Item using REST API
- SharePoint List excel import - This table exceeds the maximum number of supported rows
- How to disable SharePoint subsite creation option for owners
- SharePoint 2010 August 2015 Update KB3055049 - Duplicate Document ID issue bug fixed
- SharePoint Server 2016 Preview installation error - This Product Key isn't a valid Microsoft Office 2016 Product Key. Check that you've entered it correctly.
- How to upload file programmatically to SharePoint Document Library using Server Object Model C# .Net
- Access URL for SharePoint Tenant Admin Center (Online Office 365)
- Error when deleting SharePoint Online folder or file
- How to extend retiring SharePoint 2010 Workflows and continue with Office 365
- How to generate client id and secret to register SharePoint App with OAuth
- How to delete SharePoint List Item programmatically using C#.Net
- How to retrieve all SharePoint Online List Items using Rest API
- [Solved] SharePoint Search Internal server error exception
- Create SharePoint Site Collection using PowerShell New-SPSite
- Fix SharePoint PowerShell error - The term Get-SPweb is not recognized as the name of a cmdlet function script file or operable program
- How to enable anonymous public access for SharePoint Online site collection, file, folder without login ?
- SharePoint Server 2016 installation System Hardware requirements
- How to create SharePoint Online List Item using REST API
- Changed AD user display name showing old name in SharePoint
- Recommended size and resolution for SharePoint Online Site logo
- Microsoft 365: How to Turn Off Delve in SharePoint Online for All Users
More Posts:
- How to Add a horizontal line in Android Layout - Android
- Calculate days between dates using dateutils ddiff command - Linux
- Reading JSON file in Python with Examples - Python
- Error 404 Tomcat homepage http://localhost:8080/ not displayed - Tomcat
- 5+ Fibonacci number Series Java Program Examples [ 0 1 1 2 3 ..] - Java
- pip install see the list of all available versions of package - PIP
- Tomcat Manager Default Username and Password - Tomcat
- Open Terminal in Finder Current Location - MacOS