OfficeDev: The New Intranet a Loosely Coupled Approach
On Search
One Major pain-point when building a custom branded UI intranet is the number of times that you have your HTML works perfectly and the moment you integrate this HTML into your SharePoint it stop working. Today I will present a more loosely coupled approach. In this approach we still have our content and authoring side using OTB SharePoint online experience and we will try to build an app that leverage SharePoint Search and list APIs to retrieve data from SharePoint Online.
As we can see we have the following different components:
- Single Page App: Angular App used to render the content and it uses adal.js to authenticate users
- NodeJs: Used as web app
- Azure AD App: define delegate permissions
- SharePoint Online: where the content and authoring experience resides
At the first go ,It was pretty straight forward to execute search and return search results, one catch is the images returned in HTML format so you need to get the image URL from the HTML representation of the image.
I've created an angular directive that takes these parameters:
- Search Query
- Row Limit
- select properties
- Search base url
- title
- template
- property map: a mean to map the search managed property
- WebUrl: Image Website url
- resource Url
Sample usage of the Search results directive is below:
Search results directive
after executing the search and display the results using directive template
directive template
I noticed that Images are not displayed correctly , although you are logged in images are not displayed , recalling similar issue at this blog http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2014/06/27/displaying-cross-domain-secure-images-from-sharepoint-apps.aspx
Image not showing correctly
Adapting similar solution with the usage of redis cache to cache the images, using the image url as a key for the key/value pair while the value is a link to a cached version of the image with a new unique identifier. The cached version is aved toa temp folder called CachedImages so it can be retrieved easily.
all the logic is been encapsulated in an angular directive called spImage which takes care of retrieving and image using a new end point at the node server, which has a different router to handle the directive requests for the images.
The new flow of requesting image from SharePoint is explained in the below figure
Note: make sure to use the 'binary' encoding parameter when getting the image binary stream from SharePoint online
This is how the new links stored in redis
And this is how it looks
Full source code will be published to Github Soon
Amr