Forum Discussion
SharePoint library create a user appealing look for list of contained documents
Hi djohn20,
if you use SharePoint Online and the modern UI, then you can use SharePoint JSON list formatting
Go to All Items->Format Current View
Select "Advanced Mode" and paste in a JSON Formatting Sheet
Take a look at these samples:
https://pnp.github.io/List-Formatting/viewsamples/
Using that you can get something like this
Best Regards,
Sven
- djohn20Feb 01, 2023Copper Contributor
Hi SvenSieverding,
Thanks for the reply. What you have shown seems to apply for SharePoint list rather than a document library.
When I try to edit the current view of my document library, I do not see the option to apply row wise formatting, though there is option to do this column wise. I don't see this option even when I create a new view for the document library.
Thanks
- RobElliottFeb 02, 2023Silver Contributor
djohn20 as Sven SvenSieverding said, it works on document libraries as well. We use it on every page of our Business Management System site to display a simple but nicer view of the library documents that relate to the page:
The JSON view formatting for that is as follows:
{ "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralDark ms-fontColor-themePrimary--hover" }, "style": { "font-size": "18px", "height": "100%" }, "children": [ { "elmType": "img", "style": { "width": "30px", "height": "30px" }, "attributes": { "src": "https://bms.sharepoint.com/:i:/r/sites/BMS/SiteAssets/train-travel-round.png?csf=1&web=1&e=r1SgnO" } }, { "elmType": "span", "txtContent": "[$Title]", "style": { "padding-left": "8px" } } ] } }Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver) - SvenSieverdingFeb 02, 2023Bronze Contributor
Hi djohn20
no, this works for document libraries, too..... (The upper screenshot is even from a sample that is called "Custom Document Library Gallery Card" )
Go to All Items->Format Current View
Select "Advanced mode"
Now just paste the formatting stylesheet into the editor and press save
Using this JSON https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/product-catalog/product-catalog.json
I got that result
But not all of the samples work for the view type "List" (That is a "normal" view in lists and document libraries). Some only work if you switch the view to the "Gallery" type.
Best Regards,
Sven