Friday, July 02, 2021

Giving new life to Follow documents in SharePoint Online and Teams sample

Hi all, 

Yes I'm not posting for a long time for multiple reasons also with a shift of information navigation regarding access the latest DEV information and features of Microsoft/Office 365 where GitHub has been the real king and Master. This made me question the real need of personal blogs to community blogs with sample learning that PnP makes a real boost on the learning process and in this area wanted to learn/contribute with my own samples specifically the "Follow Document"  sample.

I had this idea when wanted to follow closely some key documents and remember that the Classic pages have a option "Follow Document" where you could select the document to follow, but from the usability point of view was very limited and wanted to give him a boost and transform the initial to became more Workspace integrated and more productive, not only list of followed documents but give additional follow actions that you could easily interactive with your colleagues. 

Here example on how to access to you "Follow Documents" using the classic view and OneDrive option List of follow documents, to be honest not the most productive, sorry...


 

This solution sample has the goal to easily identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams. This solution uses the Out of Box Social feature "Follow Document" with combination of MSGraph Queries, extension for Microsoft Teams and Microsoft Graph Toolkit File-List and File to retrieve and display associated documents.
This solution is split in 2 different projects, the extension sample allow to manage the follow/unfollow documents and the Web Part sample to interact and integrate with Microsoft Teams the document with additional actions described below.

Follow Document Extension Sample

Available features:

  • Follow documents (individually or multiple at same time)
  • Manage followed documents (Follow/unfollow)
  • List of all followed documents and option to unfollow if needed

Usage of following Technologies:

  • Usage of Social Feature "Follow" documents and associated REST "social.following"
  • Usage of MGT (Microsoft Graph Toolkit) FileList and File.
    • Using of Template and File builder from List feature.

Follow Document Web Part Sample

Available features:
  • Display Follow Documents as Document Card Grid.
  • Click on icon redirects to Document.
  • Click on Site name redirects to Site.
  • Team icon, Form to send message with html to Teams using adaptive cards.
  • Folder Icon redirects to Library where document is located.
  • Filled Start allow user to unfollow document.
  • Info icon open the Properties of Document with capability to edit.
  • Document with search icon allow to preview Document in Side Panel.
  • Search by Filename.
  • Grouping by Site.
  • Microsoft Team integration with personal/Tab App that allow user focus on key Documents.
Usage of following Technologies:
  • Usage of Social Feature "Follow" documents and associated REST "social.following"
  • Usage of Graph queries using Graph explorer
  • Usage of adaptive cards
  • Microsoft Teams integration with following option [TeamsTab, TeamsPersonalApp]

Follow Document Web Part

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-follow-document

Follow Document Extension

https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-follow-document 

Preview of the Follow Document SPFX sample

Follow Document PnP Presentation video 

Follow Document - PnP Community presentation video sample (44:26)

Presentation PowerPoint

Bellow the PowerPoint used in the PnP presentation Sample with detail of technologies

 


This is a sample and needs to be improve specially in possible errors that i was not able to detect "Sample was made in 1 week at night".

Hope you like this simple article, 
André Lage

5 comments:

Gregory Franz said...

Hi André, this is a great wep part. How can I limit the amount of documents to display like in a compact view or in a carousel?

André Lage said...

Hi Franz,

I didn't limit the webpart or change the view, this was only a simple architecture sample with simple on how we could use key documents and make simple actions.
From the solution you can access to github and make associated changes.

Gregory Franz said...

Thank you André

Gregory Franz said...

André, we managed to get it right. We use two web parts. One as is for the normal users. Then another one for admin to determine how many documents to display.

André Lage said...

Hi Gregory,
I am changing the solution to use Microsoft Graph OOB Follow documents, could be important to be updated.