jQuery based Followed Documents list with animation and pagination


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

GIF
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()

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: