SharePoint library create a user appealing look for list of contained documents

[djohn20]

Hi,

I have a sharepoint document library with a collection of documents (pdf, word) with library fields which collects information about the document. Is there a way to make the look of the library with its contents more appealing? I am using SharePoint in Microsoft 365.

What I have tried so far:

1. Modify current view and apply different styles

2. Page Setting > Change Look

But this change the theme of the entire site, which I don't prefer.

3. I see an option to create and customize view but this requires a Sharepoint Designer. I haven't used this yet but would going this direction be the probable way forward?

Any other suggestions? Thanks.

[#2]

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

[#3]

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

[#4]

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

[#5]

@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)