Skip Navigation LinksClientSideUX

Responsive Highly Dynamic UX and SharePoint

I had to do some really fun​ client side development with a spattering of server-side code.  The challenge was they wanted to make the site fit on any device, have it respect WCAG, be multi-lingual, support Twitter Bootstrap and prevent as many screen refreshes as possible.  All this while proving a media rich and very socially driven site.

So we did.  We first created a set of easy to configure and manage web parts using the OOB Web Part Properties interface and with a Master Page and a set of layout pages we could create very complex columns and rows that respected Twitter's Bootstrap.  We married these with a JavaScript library that brought the web parts to life.  This included loading all translations and dynamic content and applying those translations as required.  As the users browsed, sorted, filtered and behaved socially (liking and commenting), the interface would respond and present itself accordingly.  If you are an editor you see the ribbon, otherwise, you simply see the rendered interface as we want it. 

Below is a sample landing page showing several of the web parts like:   a Featured Article, a list of article thumbnails in 16.x, a survey that has been augmented to show inline on the page with embedded video, comments and most liked article lists.  Notice that the layout is using Twitter's Bootstrap and the interface is in French (mostly - it is a dev. site ).

 

SharePoint provided us will all the REST and API required for every piece of the interface.  The custom JavaScript kept everything client side and ready for use.  For example, applying a single filter impacted all other web parts without screen refreshes or taxing the server with rendering content (below we add some filters and see the new content after the restrictions).

 

Since all the web parts worked together and were simple to configure, the client was able to apply it throughout the site to present various SharePoint elements like photos, blogs, custom list items...  In this case the photos were to be presented in 16x9 rather than square thumbnails (a fun challenge!) with dynamic category, date, comment and like filters.

 

Below is the same but for blog posts.

 

These same tools also worked for the SharePoint out of the box Survey and custom lists.  The survey presentation was further customized using the custom JavaScript that rendered the survey within pages or in popups.

We also incorporated the PNP Responsive from Microsoft and all the web parts were responsive from a 4K monitor right down to the smallest smartphone.  They will collapse columns and layouts as required and change the screen presentation for the navigation, headers and footers.

 

All of this was really cool on its own. Every single part of the interface below the blue navigation bar is dynamically generated and dynamically translated.  When the page loads, it detects if there are any screen elements coded to be translated or if there are any of our web parts that need to be fleshed out.

The web parts simply produce a single DIV element with class indicating it is a web part and uses data tags in the div tell us what settings we are using and the JavaScript does the rest after the page is loaded.

It first checks if it needs to load translations using REST asynchronously to get the Pointfire Multilingual Translations (not required that you have PointFire, but I did in this case) then it cycles and corrects any static screen elements like the footer and the image logo and then loads any other objects it requires to present within the Web Parts - Photos, Articles, Custom list items, Surveys... and after that is cached it presents it.

As users "Like" objects the screen will dynamically change to present the new changes.

A fun project that just shows that SharePoint isn't a simple OOTB product and it can create very responsive dynamic interfaces in many ways.

This solution was an on-prem solution but it could have just as easily have been created for Office 365 replacing the web parts with content editor web parts that just present a DIV tag and load our script.