Friday, December 31, 2021

Rebuild dev skills 2021 for M365

 After been out for some years working with community (MVP 2010 to 2017) but stopped (work and some how burn out reasons) this year have the boost to upgrade my skills and return on contributions. 

Thank you all and always take your time and reward will always arrive, just put focus on the deliveries and improve your self.

Below would like to share my list of contributions for 2021: 

SharePoint Framework React Controls

  • dragDropFiles



https://github.com/pnp/sp-dev-fx-controls-react


SharePoint Framework Client Side Web Part

  • OneDrive finder + article


  • Follow Document

https://github.com/pnp/sp-dev-fx-webparts


SharePoint Framework Extensions

  • Follow Document

https://github.com/pnp/sp-dev-fx-extensions


Viva Connection ACEs

  • follow documents ace


https://github.com/pnp/sp-dev-fx-aces


List Formatting

  • tic tac toe format
  • teams call format
  • Search Tag format
  • Tree format
  • date update format
  • Image Slider format
  • Date column compress
  • Clipboard format
  • Menu Tiles format
  • Teams group chat
Below screenshot of all format included in my demo site


(all samples are in PR state)

https://github.com/pnp/List-Formatting

Microsoft Graph Toolkit

  • mgt-file-upload

https://github.com/microsoftgraph/microsoft-graph-toolkit

https://github.com/microsoftgraph/microsoft-graph-toolkit/releases/tag/v2.3.0


And off course 

Microsoft 365 PnP Weekly РEpisode 139 РAndr̩ Lage



#Microsoft365Dev #PnP #SPFx #AdaptiveCard #ACEs #MSFTViva #MicrosoftGraphToolkit #MicrosoftGraph #m365


Hope you enjoy this article and happy new year. 😃

André L

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

Thursday, October 22, 2020

New Drag and Drop ListView @pnp/spfx-controls-react

This post is about a feature that i was expecting some and was launch in @pnp/spfx-controls-react in version V2.1.0, that was the capability to use drag and drop of files in ListView and capture the file object to make the associated actions afterwards.

The following example explain how we can use the ListView Control to use drag and drop option and  retrieve the file object from the new handler onDrop event and copy to a SharePoint Document Library.

The first thing that needs to be made is to configure the ListView properties in the control with the following:

  • dragDropFiles as True, activates the drag and drop option.
  • OnDrop handler, Method this._getDropFiles retrieves files from drop handler.

The handler  OnDrop retrieves the files object that allow us to manage the content as we want.
This can be upload files to a libraries, validate what type of file, size of file, naming with capability or renaming, in the end multiple business requirements that can be stop or validated before file is included in the system.   


When you test the control using "gulp serve" base in a existing Document Library you can see the normal list of documents as working in the older version. 



To activate the drag and drop pick some files and drag to ListView area and upload information focus will appear, in this moment you can leave the files and the upload process can start.  


After you drop the files in the List View area the handler drop sends objects to method _getDropFiles and uploads the files to a Document Library as explain the code below.
This 

  /**
  * Method that retrieves files from drag and drop
  * @param files
  */
 private _getDropFiles = (files) =>{
  let count=0; 
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (file != undefined || file != null) {
      let spOpts : ISPHttpClientOptions = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        body: file        
      };

      var url = `${this.props.context.pageContext.web.absoluteUrl}/_api/Web/GetFolderByServerRelativeUrl('Shared%20Documents')/Files/Add(url='${file.name}', overwrite=true)`;

      this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {

        console.log(`Status code: ${response.status}`);
        console.log(`Status text: ${response.statusText}`);
        response.json().then((responseJSON: JSON) => {
          count++;
          if(count=== (files.length) ) {
            this.componentDidMount();
          }
          console.log(responseJSON);
        });
      });

    }
  }
}
The following method is a reuse function componentDidMount to make refresh of ListView to display the uploaded files that was managed in method below.
public componentDidMount() {
    const restApi = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')/files?$expand=ListItemAllFields`;
    this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1)
      .then(resp => { return resp.json(); })
      .then(items => {
        this.setState({
          items: items.value ? items.value : []
        });
      });
 }
After refresh the ListView should display the files as defined in the method.


The demo below uses "@pnp/sp": "^2.2.0" to upload stream into SharePoint Library.
 /**
  * Method that retrieves files from drag and drop
  * @param files
  */
  private _getDropFiles  = async (files) => {
    for (var i = 0; i < files.length; i++) {

      const fr = await  sp.web.lists.getByTitle("Documents").rootFolder.files.configure({
        headers: {
            "content-length": `${files[i].length}`,
        },
    }).add(files[i].name, files[i]);
      console.log(files[i].name);
    }
  }
Simple and in my opinion a very useful feature that was missing for some time in my point of view.
It's always interesting how the concept of open source give opportunity that everyone could contribute, like i did with this new feature ListView Drag and Drop.
If you have a good idea for a improvement and feature that you can identify a very good business case, you can always propose or bug fixing to PNP community, they are pro active and very open to improvements.

Hope you like this simple articles, 
André Lage

Tuesday, June 16, 2020

List of Frameworks that could help you start with SPFX

Since the last years the PnP team is creating a very solid and super fast evolutionary SharePoint framework where developers can make their work, a real integration with Microsoft Teams and Microsoft Graph, not only SharePoint, a real "stonk" case of growth :).

It's really impressive what everyone involve was able to do at this point, since documentation, videos to code..., i remember the beginning of the PnP concept and follow what Vesa Juvonen was generating on the initial steps, cannot believe the amount of years that already past...

But at this point i see people creating samples for everything and reuse existing frameworks without clear information, for people that is working, this can be very confusing on what is provided by SPFX or what needs to be added, i don't what to talk about the SPFX versioning that another article on how to keep everything on track.

But if you are beginning and can understand in what are you in, this Frameworks could help start you development and response the normal question that you make, where i can add a calendar, can i include a metadata control and all this questions that doesn't have a direct  but external answer. :) 

Here a compilation of some Frameworks that i found very useful, you can use to include in your SharePoint Framework (SPFX) solutions.

tui.image-editor

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.
https://github.com/nhn/tui.image-editor

fullcalendar

A full-sized drag & drop JavaScript event calendar
https://fullcalendar.io/
https://github.com/fullcalendar/fullcalendar

SharePoint Framework React Controls

Reusable React controls for your SharePoint Framework solutions
https://pnp.github.io/sp-dev-fx-controls-react/
https://github.com/pnp/sp-dev-fx-controls-react/

PnP Modern Search solution

This is a open source solution that helps you to build engaging search based solutions in the SharePoint modern experience.
https://microsoft-search.github.io/pnp-modern-search/
https://github.com/microsoft-search/pnp-modern-search/

PnP/PnPjs

Fluent JavaScript API for SharePoint and Microsoft Graph REST APIs
https://github.com/pnp/pnpjs/
https://pnp.github.io/pnpjs/

Chart.js

Simple, clean and engaging charts for designers and developers
https://github.com/chartjs

FluentUI

A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
https://developer.microsoft.com/en-us/fluentui#/
https://github.com/microsoft/fluentui

Fontawesome

Popular icon toolkit
https://fontawesome.com/
https://github.com/FortAwesome/Font-Awesome

tui.image-editor

Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
https://github.com/nhn/tui.image-editor

tesseract

Pure Javascript OCR for more than 100 Languages
https://github.com/naptha/tesseract.js



All NPM installers commands can be found in the following web site.
https://www.npmjs.com/


I am sure there are a bunch of other frameworks i didn't reference that make a huge difference, but this ones will give you a huge boost to start and became motivated to develop in this platform.
Lot of the are being used in the samples provided by the PnP team.

SharePoint Framework
https://github.com/SharePoint/sp-dev-docs
Samples SPFX
https://github.com/pnp/sp-dev-fx-webparts
https://github.com/pnp/sp-dev-fx-extensions

Personal thought:
I remember when i was starting (in 1985 copying code from a magazine to my spectrum 128k that generate a game of falling pieces and needed to escape from them. Draw a circle with a line and thinking "i just draw Saturn, how fascinating this is.", more than 30 years and now i am going to internet to find code... some things never change)

Best regards,
Andre Lage