Show Description on Modern SharePoint Document Libraries

Build an application extension as per the tutorial Build your first SharePoint Framework Extension

Install sp-pnpjs and include this import line

import pnp from "sp-pnp-js";

Replace the class content as follows

/** A Custom Action which can be run during execution of a Client Side Application */
export default class ListPropertiesApplicationCustomizer
  extends BaseApplicationCustomizer {
  @override
  public onInit(): Promise {
    this.getList();
    return Promise.resolve();
  }
  public getList(): Promise {
    //get the ID of the list from the page context
    const listId: Guid = this.context.pageContext.list.id;
    console.log(listId);
   
      pnp.sp.web.lists.getById(listId.toString()).get().then(r => {
        // the list object properties are all returned as per the object model
        console.log(r.Description);
        //Find the list title element using native typescript 
        var parent = document.getElementsByClassName("StandaloneList-title");
        //create a new div
        var newDiv = document.createElement('div');
        //style the new div as you wish
        newDiv.setAttribute("style", "color:red; border-bottom: 1px solid blue; font-size:14px; ");
        // add the decription content
        newDiv.textContent = r.Description;
        //append to the document under the list title
        parent[0].appendChild(newDiv)
      });   
    return Promise.resolve();
  }
}

The styling and the placement is up to you.

 

Advertisement