Sift

Project Details

Sift is an add-on package for the Umbraco content management system that I developed to allow the creation of content filters on websites. The dynamic filters are automatically based on the Umbraco content, with no coding required, simply add classes and attributes to the HTML.

  • Date: Spring 2021
  • Category: Web
  • Technologies: .NET, JavaScript, Umbraco

Sift is a free add-on package that I created for the Umbraco content management system (CMS). It consists of a .NET Framework class library (DLL) written in C# and a JavaScript library that calls the C# endpoints. These have been packaged up so that they can easily be installed using NuGet or Umbraco's own packaging system.

Once installed, a front-end developer need only create some HTML with specific classes and attributes and a fully functioning filter will be rendered, allowing the website user to search the Umbraco content as specified.

<div class="sift"
     data-sift-result-document-type="film">

    <form class="sift-criteria">

        @Html.AntiForgeryToken()

        <label for="filmName">Film</label>
        <input type="text" id="filmName" name="filmName"
               class="sift-criterion"
               data-sift-match-property="nodeName" />
        <p></p>

        <input type="submit" class="sift-search" value="Search" />

    </form>

    <div class="sift-result">
    </div>

</div>

<script src="~/Scripts/sift.js" type="text/javascript"></script>

The front-end developer has the flexibility to style the form as required, and can even override the default results to display and style the filtered content. The code above will return content with a document type of "film", filtered on the node name according to the text the user has entered in the input field.

Sift is available for Umbraco 8. If you want to find out more about using Sift then please take a look at the user guide.