SharePoint Framework (SPFx) is a development framework for the modern SharePoint experience. It’s platform-agnostic and works on PC and Mac and is based on open source technologies such as Node.js, Gulp, Webpack, and Yeoman.
It has an active community and a GitHub place where developers share ideas and solution samples.
In the next topics we will talk about on how can we use an existing solution (webpart) from the community and extend it to fulfill our business requirements – SharePoint Framework search with search box, refiners and paging sample.
Extending an existing solution
The SharePoint Framework search with search box, refiners and paging sample webpart is a great solution that (between other things) have the following features:
- Fully customizable SharePoint search query
- Can either use a static query or be connected to a search box component using SPFx dynamic data.
- Live templating system with Handlebar to meet your requirements in terms of UI + builtin list and tiles templates.
- Customizable refiners supporting multilingual values for taxonomy based filters.
- Sortable results (unique field).
- Results paging.
Taking advantage of Handlebars
In the above animation is an example of the webpart that uses Handlebars to render the results.
Taking full advantage of the handlebars templates concept, we have extended the solution and created a set of HTML templates to represent different types of content. It was a simple process since everything was already in place, and we only had to create the HTML templates and the options to select those templates.
Events calendar – was one of the templates developed in the handlebars, where is possible see the level of importance and access the link of which event very easily.
Listing of the last persons that joined the company. Is possible to see their picture if already uploaded, like see the job, workplace and the respective date of entry.
Expansible text – ability to expand a span, when the text is a quite extensive. Making the webpart more organized and making more enjoyable for the users.
It’s also possible to edit a template in real time, being a great help to customize/creating a layout, without requiring to recompile the solution.
Modifying the search query
One of our business needs required that the results were filtered by some user attributes (stored in user profile).
Once again, we decided to extend the solution and add an extra configuration step in the web part. In this case, when any of the filters is active, we modify the query and add the required search filter cause.
Lazy loading results preview
LazyLoad is another tool that speeds up your web application by loading images and videos just when they enter the page view port.
With this plugin is possible to soften page/image loading and make the experience more pleasant to the client.
We have added the plugin to the webpart and added the required plugin configuration/initialization.
LazyLoad at Github.
With SPFx there are a lot of new tools and technologies that we can use for SharePoint development, creating great and modern user experiences.
We don’t always need start from scratch. There are a lot of great samples in the GitHub community that we can use and extend to create complete business solutions.
Sharing is caring!