Sharepoint Framework in SharePoint Search Driven Architecture

On 16.10.2017 I had a privilege to be one of speakers on ShareCon365. I had technical speech where I showed how to make Sharepoint Framework (SPFx) apps in Search Driven Architecture. If you were on my speech you are probably interested in materials which you can find here: My presentation materials.

If you were not…than keep reading ๐Ÿ™‚

ShareCon 365

ShareCon365 a is community driven conference for O365 power users, developers, IT admins. Speakers themselves are not rarely technology specialists directly from Microsoft. During conference speakers presents topics related to Office 365 products like Microsoft Teams, SharePoint Online, Microsoft Flow, PowerBI, PowerApps etc. and in any perspective like use cases, do’s and dont’s, scenarios conclusions, limitations, migrations, hybrid scenarios and many many more. Speeches are split by coffee breaks which gives additional occasion to share knowledge and make some deep dive conversation that from obvious reasons cannot be continued during speech. If that would be not enough there is always Ask The Experts session at the end of conference when all speakers are on stage and participants can ask ANY question (ok…not any. It must be related to O365 topic. Sorry, no live life recipes ๐Ÿ˜‰ ). Everything took 1 day from 9AM to 5 PM and even though people come from all around the Poland (travels sometimes even 400km in one way, so 800km totally) – for me it’s the best proof of ShareCon365 value. If you’ve never been there…well, my friend. You don’t know what you’ve missed. Don’t make that mistake again! ๐Ÿ˜‰

P.S. Did I mention that it’s totally free? Organizers provides lunch, giveaways, drinks – everything thanks to multiple sponsors. This year that was Microsoft, Datapolis, APN Pomise, Data Scientist as a Service,, CodeTwo, Action Centrum Edukacyjne and of course Findwise.

How Search Driven Architecture can be easily achieved using simple SPFx application and React?

This year agenda contained 2 paths: for IT admins/PowerUsers where every session took not longer than 1 hour and Dev path where sessions took about 1.5 hour. My presentation was dedicated for developers and titled “How Search Driven Architecture can be easily achieved using simple SPFx application and React”. It would be impossible to tell you everything about that in just one post (that’s why you should come for my next session next time ๐Ÿ˜‰ ) but I’ll try to give you at least a taste of it.

Search Driven Architecture

Search Driven Architecture (SDA) is a concept that mainly sticks to intranets. Especially in companies with 500+ coworkers. Why that much? Because the more people you have the larger structure of subsites, folders and groups you have, more different systems/software that keeps data and higher problems with productivity if there is no one, common search platforms that can fetch all data. But SDA is not only about search engine and its results page. It’s also about giving users any information they need right away without need of going to search, typing keywords, hitting enter, scrolling through results and so on. So basicly SDA is about aggregating data from all over the intranet and displaying that to user onย home page of intranet, project site, team site – you name it.

Search Driven Architecture example on intranet home site. Everything you see: tasks, events, news, projects has been firstly aggregated from multiple sources and then showed to user in unified way


For instance you have tasks in your exchange account, inย  your Visual Studio Online and on your SharePoint Team site – SharePoint search can aggregate all of it (how? I’ll explain that in my next post) via Search and feed any tool that will show it to user. And that how we come to next part which is…

SharePoint Framework

SPFx is a new cool framework that allows you for creating webparts, application pages, custom actions (ribbon buttons) and fields custom design for SharePoint. And the most important part is – you don’t need to learn any specific SharePoint tools, syntax or even now C#. In order to write using SPFx the only thing you need to know is…Javascript, HTML and CSS. Yes! And no, there is no catch like special tags syntax that you may remember from search results display templates development. Pick any kind of web development IDE (Visual Studio Online, Atom, Webstorm), install Gulp, Webpack, Yeoman and you’re ready to go.ย Using SPFx you can treat SharePoint “technologically transparently” as it was some 3rd party web application with REST API. And you don’t even have to worry about user authentication because framework handles user authentication for you (SPFx apps works only in user context). If you don’t have experience in SPFx – I advice you to read more about it.

In my webpart I used ReactJS and Typescript. Ok, but how we can do SPFx in SDA?

Funny thing but true…

In standard app developers very often like to use REST endpoint to fetch all different data and do all kind of joins, sortings, filtering on their side. Sounds familiar?

But now imagine following scenario: some webpart from main site fetches products (tasks/events/news…you name it) from multiple sources. One day product manager comes to you and say something like:

  • You know what? We need to exclude few sources because <important business reason that sounds ASAP-alike> from this webpart.
  • Ok – you say – I will need 2-4 hours to do that?
  • 2-4 hours?! It’s just few exlusions…
  • Yeah. But you know I’ve made just few changes in this code before and it was long time ago so I’m not sure where it’s stored. I think <Team Leader name> will know but he is on vacations so I need to find someone who will help me. Once I do it I will need to connect to repository, fetch it, install all dependencies, make change, package it, deploy to CDN, update webpart so…hm…maybe count it as 3-5 hours…
  • …meh, I shouldn’t ask. Ok, but please, do it ASAP
  • Ok. Since now I’m working on <project for largest client in your company> I will try to do it tomorrow. If not than I will do it the day after tomorrow for 100%
  • If you want to speed it up talk to <your project manager name> or with <dev colleague name>
  • <hitting wall with head, crying a river>

You may feel it’s a little bit exaggerated but actually it happens few times to me or my colleagues.

Wouldn’t be easier if such simple change like few exlusions could be done by no developer?

SDA + SPFx = <3

The solution for described above situation is very simple! Use SDA!

In SharePoint Search there is function called Result Sources. It contains easy to manage configuration for any data sources aggregation.

Result Sources in SharePoint Search. There are many predefined but you can add and edit your custom one

The trick is to add and manage data aggregation using custom Result Source and in SPFx application just make REST GET http requests to this Result Source. Check my sample app to see how you can do it.

Thanks to that approach you can quickly respond to any data aggregation change via editing Result Source because rendering data still will be untouched in your SPFx webpart. As long as you don’t need to change anything on UI level you don’t need to touch code. Simple but efficient!

You can download my code and presentation here.

Let me know what you think about that or if you would have any questions ๐Ÿ™‚

One thought on “Sharepoint Framework in SharePoint Search Driven Architecture

  1. Pingback: SharePoint optimized - part 1, CSOM calls

Leave a Reply

Your email address will not be published. Required fields are marked *