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
