Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

Followed Documents

In this blog I would explain how to create an animated jquery based document list. The documents listed will be the followed documents within SharePoint. The list will call REST api to get all the followed documents. https://docs.microsoft.com/en-us/sharepoint/dev/general-development/following-people-and-content-rest-api-reference-for-sharepoint read for more information on the api and its parameter.

My code uses the followed parameter filtered by types 2 which is documents only. SharePoint allows to follow different types like site, list, item etc. The api I am using will get only documents https:////_api/social.following/my/Followed(types=2).

You can download the full code here in my github repository. The code repository has 3 type of files .htm, .js &.css files. The htm file has all the html elements needed to load the documents. All the code is in the js file which is invoked in the document ready function. The js file is referred in the htm to invoke. CSS file for the UI and design.

The code uses the several dependency scripts & css, all the dependencies are here in the Github. Vue.js and Bootstrap are optional dependencies. The mandatory dependencies are below

1. jQuery, version is uploaded in that above github URL please use that
2. Font Awesome – is for icons like copy clipboard, folder and email option
3. jPages – for pagination of the files, you can customize it to show no of files in a page with previous and next option
4. Animate – is for fadeInDown animation when documents are loaded.
5. Tooltipster – for nicer tooltip when mouse over icons. (optional)
6. jQToast – it is for toast kind of message which is shown on the top right when you copy clipboard.

The javascript code uses 2 main function GetFollowingDocuments() & followedRetrieval(). Make sure you change the site collection URL in the GetFollowingDocuments() function to make it to work. Some javascript utility functions are there to support the UI. Like getting the extension picture for specific type of documents. I have covered only few types which are major. If you want to have more types need to add more pic url for each types. Some of sample screenshots below. The png type is unknown icon because I have not handled the image for it. So you can extend those support in the code GetImagePath()