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.jsGulpWebpack, and Yeoman.

With SPFx it’s possible to add web parts to classic and modern pages, the controls are responsive and accessible. Its performance is reliable and in between other things its possible to use any JavaScript framework (React, Angular, Handlebars, etc).

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

Within SharePoint Framework we can use our preferred tools and plugins, and the Handlebars plugin is a great example. It’s a very useful engine that make’s possible to add and use html templates to render specific content sections of our page. It let’s you build semantic templates without frustration. Keeping your HTML page clean and separates the logic-less templates from the business logic in your JavaScript files.

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.

Conclusion

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!


1 Comment

SharePoint Online Multi-language Modern Sites - real case, pros and cons - DevScope Ninjas · January 30, 2019 at 4:07 pm

[…] have created, among others, a search based results web part (see this topic) with the ability to filter by user language (and some other user properties) and other query […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: