SharePoint Online Modern Document Library View Formatting - Thumbnail Along With Extension Icon And Created By

Introduction

 

In the previous article, We looked at SharePoint Online Modern List View Formatting. In this article, we will explore SharePoint online modern Document Library view formatting in the modern experience. In SharePoint online modern format view, it’s now possible to change the shape, size, and colors, and add the other view properties.

 

This functionality is configurable in the Modern SharePoint list views available and document Library tiles display data.

 

Scenario

 

The customer requires the display of  document library files in Tiles view to show the file extension icon and the created-by fields of library in the view.

 

Objective

 

We have created a document library, “My Documents”,  and uploaded different extension files like word, powerpoint, excel, Image, video and Zip folder files.

 

Create a View

1. Open the list in "All items" view and then, click thumbnail view (Tiles). By default select the save view as option.
   
   
2. Follow the numerical points, as shown in the below screenshot,
   
   
   
   
3. Edit the Created Custom View to use the “Type (icon linked to document)” and “Created By” fields in the format view. You need to add them to the view. When editing in a quick edit view, include the “Name” field for identification of the File Name.
   
   
4. Format JSON as per our requirements in JSON Editor

5. {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
     "tileProps": {
       "hideSelection": true,
       "height": "280",
       "width": "300",
       "formatter": {
         "elmType": "div",
         "style": {
           "align-items": "stretch",
           "margin": "3px 2px",
           "background-color": "#fbfbfb",
           "height": "380px",
           "overflow": "inherit",
           "border-radius": "2px",
           "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024"
         },
         "children": [
           {
             "elmType": "div",
             "style": {
               "display": "flex",
               "flex-wrap": "wrap",
               "position": "relative",
               "padding-bottom": "10px",
               "width": "100%"
             },
             "children": [
               {
                 "elmType": "div",
                 "style": {
                   "margin-top": "0px",
                   "height": "200px",
                   "display": "block",
                   "align-items": "center",
                   "justify-content": "center",
                   "position": "relative",
                   "border-bottom": "1px solid #EEE",
                   "overflow": "hidden",
                   "border-radius": "2px 2px 0 0"
                 },
                 "children": [
                   {
                     "elmType": "button",
                     "style": {
                       "position": "absolute",
                       "height": "100%",
                       "width": "100%",
                       "opacity": "0",
                       "cursor": "pointer"
                     },
                     "customRowAction": {
                       "action": "defaultClick"
                     }
                   },
                   {
                     "elmType": "div",
                     "style": {
                       "width": "=if([$File_x0020_Type] == '', '100px', '100%')",
                       "height": "=if([$File_x0020_Type] == '', '100px', '100%')",
                       "oveflow": "=if([$File_x0020_Type] == '', 'auto', 'hidden')",
                       "text-align": "center",
                       "overflow": "hidden"
                     },
                     "children": [
                       {
                         "elmType": "img",
                         "style": {
                           "height": "=if([$File_x0020_Type] == '', '100%', '0'"
                         },
                         "attributes": {
                           "src": "=if([$File_x0020_Type] == '', 'https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-react-assets/foldericons-fluent/folder-large_frontplate_nopreview.svg', '')"
                         }
                       },
                       {
                         "elmType": "img",
                         "style": {
                           "display": "=if([$File_x0020_Type] == '', 'none', '')"
                         },
                         "attributes": {
                           "src": "@thumbnail.383x383"
                         }
                       }
                     ]
                   }
                 ]
               },
               {
                 "elmType": "div",
                 "style": {
                   "margin": "25px 0 0 0",
                   "position": "absolute",
                   "top": "153px",
                   "width": "100%",
                   "color": "#333333"
                 },
                 "attributes": {
                   "class": "ms-fontSize-14 ms-fontWeight-semibold"
                 },
                 "children": [
                   {
                     "elmType": "img",
                     "attributes": {
                       "src": "=if([$File_x0020_Type] == 'docx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/docx.svg?v6', if([$File_x0020_Type] == 'xlsx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/xlsx.svg?v6', if([$File_x0020_Type] == 'pptx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pptx.svg?v6', if([$File_x0020_Type] == 'pdf', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pdf.svg?v6', if([$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'gif','https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/photo.svg?v6', if([$File_x0020_Type] == 'mp4' || [$File_x0020_Type] == 'avi' || [$File_x0020_Type] == 'mov', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/video.svg?v6', if([$File_x0020_Type] == 'zip', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/zip.svg?v6','Unknown')))))))"
                     },
                     "style": {
                       "flex": "none",
                       "line-height": "100%",
                       "font-weight": "normal",
                       "font-size": "2rem",
                       "margin": "5px 5px 5px 10px",
                       "height": "25px"
                     }
                   },
                   {
                     "elmType": "div",
                     "txtContent": "[$FileLeafRef]",
                     "style": {
                       "padding": "0 0 0 16px"
                     }
                   },
                   {
                     "elmType": "div",
                     "txtContent": "='edited by ' + [$Editor.title]",
                     "style": {
                       "padding": "0 0 0 16px"
                     }
                   }
                 ]
               }
             ]
           }
         ]
       }
     }
   }

   
   
6. It’s as simple as opening the MyDocuments Document library to open the view formatting pane. Then, open the view dropdown View Selector –>Select the Tiles -> “Format current view” option. Follow the numerical points, as shown in the below screenshot,
   
   
   
   
7. PAste  in the JSON that has already been constructed above-> click save button.
   
   
   

Before formatting style of view

 

 

After formatting style of view