On


Recently the new SharePoint document library experience has been released, you probably have already seen it if your tenant is on First Release.

Exactly one week ago Stefan Bauer published a very insightful blog post focusing on the main building blocks of the new SharePoint document library experience.

Although I have no previous experience with either ReactJS or knockoutJS I decided to give it a try and attempt to figure out the building blocks in more details:

Let's have a look on the Files 

 I won't write any details around the framework used as Stefan covers it brilliantly in his blog in addition to the main pillars (RequireJS , React, Knockout JS), you can find bundled and minified version of files delivered via akamaihd.net CDN with the subdomain spoprod-a (SharePoint Online Production) can't really figure out the "-a" part of the subdomain name.



Note: facebook use the same CDN as well.

After a quick look at the HTML elements, I can see several components within the page, when you trace it down you have two main components ms-spo-app and ms-files

ms-file contains around 14 child components:

  • ms-suite-nav                       (top navigation component)
  • ms-left-pane                       (left navigation component)
  • ms-search                           (search)
  • od-userFeedback                (feedback link)
  • ms-drag-and-drop               (enabling drag and drop files)
  • od-overlay-host                   (container for the ECB Item menu) 
  • od-dialog-host                     (container for dialogs like rename dialog)
  • ms-panel-host
  • ms-hidden-dom-host
  • od-transclusion-host          ( info right panel)
  • ms-standalone-list              (This is the main component for the list
  • ms-command-bar               (list commands "ribbon replacement")
  • ms-siteHeaderKOHost


In this blog i will focus on one component , so let's take a look at the new right info

The new Info Panel


If you click on the info icon to the right you can see recent activities and number of documents in the current view. However if you do select a specific file you can see file preview and number of sections:

Overview Section

This section always appear. However, it appears in two different renditions if the document is selected an iframe will be rendered to review the document using wopiFrame.aspx page.

Other sections 

The other sections:
Recent Activity, Properties, Sharing, Information will appear based on collection calculated by function called availableSections()

here is function execution in case of  no file is been selected ,we notice that it's only single section with a component named "ms-activities-feed"



and if a single file is been selected, more sections appears in the availableSections call to render 
document edit form , sharing and infomation




What happens when you change item selection 

When the user select a document and the right information panel is active, series of network activities is fired up to get the data necessary to render the right information panel



File Sharing Settings

Two different calls to  2 different point to gather sharing information 



File Properties

A single request to RenderExtendedListFormData which  passes the following parameters:
  • Item Id  
  • form Id  : string representation of the form 'edit form'
  • mode 
  • options 

I couldn't figure out either the mode or the options yet

In the next part I will talk more about different actions which can be found in file https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-07-11_20160715.004/splistdeferred.js:

and I will focus on one particular action odsp-next/actions/odb/CustomActionNavigationAction which handles the execution of UrlAction custom action and how the new document library experience affects (at the moment) any existing document library based customization.