Forum Discussion
Nigel_Price9911
Feb 08, 2018Iron Contributor
Modern Document Library does not allow any text explaing what the document library is for.
Hi
I have a document library which opens in the Modern UI.
I cannot for the life of me find how to add some text to explain what the document library is for. I cannot edit the page so ca...
- DeletedFeb 08, 2018Create a word file, or Txt file in notepad, with the description, save the file name as Library Description or something similar. Upload it to your library. Once there, select the file and on the top menu is Pin on top button or something similar to that.
Ryan Healy
Mar 12, 2018Brass Contributor
A simple SPFX app extension could provide this. Using the placeholders, or the message at, or even a modal from a command bar button, you could show the library description. What would be preferable?
Nigel_Price9911
Mar 12, 2018Iron Contributor
Hi Ryan
I am always interested in SPFx solutions.
I know about using SPFx Extensions to add headers and footers to site.
But using SPFX extensions to add instructions to a Document Library ?
Can you tell me more ?
Thanks
Nigel
- Ryan HealyMar 12, 2018Brass Contributor
Build an application extension as per the tutorial https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-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<IListPropertiesApplicationCustomizerProperties> { @override public onInit(): Promise<void> { this.getList(); return Promise.resolve(); } public getList(): Promise<void> { //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. I chose the List/Library title but I believe this area also houses any breadcrumb content when you navigate down folders. I haven't tested how well this works.
Let me know what you think.
Thanks
Ryan
- Nigel_Price9911Mar 12, 2018Iron Contributor
Thanks - Thats great !