Forum Discussion

djohn20's avatar
djohn20
Copper Contributor
Jan 30, 2023

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

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 ...
Document Library
SharePoint Online
SvenSieverding's avatar
SvenSieverding
Bronze Contributor
Jan 30, 2023

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

  • djohn20's avatar
    djohn20
    Copper Contributor
    Feb 01, 2023

    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

    • RobElliott's avatar
      RobElliott
      Silver Contributor
      Feb 02, 2023

      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)

    • SvenSieverding's avatar
      SvenSieverding
      Bronze Contributor
      Feb 02, 2023

      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

Resources