How to Extend SCORE Components with Custom Functionality

SCORE’s Bootstrap UI layer delivers core functionality for the most commonly used components in web development. When core functionality alone does not satisfy your requirements, though, you don’t always need to start from scratch. One option may be to extend SCORE components with custom functionality.

Here at BrainJocks, we place a lot of focus on implementing components in ways that are flexible and thereby easy to extend. After all, the ability to extend and customize is what makes Sitecore great, so we’re not about to take that away.

 

How do you know if the component you need is a good candidate for extending SCORE?

If vanilla SCORE satisfies most of your requirements, but it’s missing that one super special thing, that extra bell or whistle, then I’d say it’s a perfect candidate. SCORE components need to be generic because they are used by many different types of organizations, so often the pieces that are missing are those that depend on knowledge of a company’s internal business rules.

 

Putting my code where my mouth is – Extending SCORE 2.5’s Search Results component

When given the task of demonstrating how this works, I decided to use the new Search Results component from SCORE 2.5‘s Content Search suite. This is the most complicated component that SCORE delivers as far as UI/UX goes – stuff is getting shuffled, re-sized and dynamically injected all over the place, and the CCF* force is strong with this one. I figured, if we can extend this component, we can extend ANY component. Let’s call it the Umbrella Theorem of Components.

*CCF is short for Component Communication Framework, which allows content admins to configure how components interact with one another in Experience Editor using SCORE.

 

umbrellacats

 

Out of the box, the Search Results component:
1. Shows tiles of pages that match selected search criteria
2. Inserts Promo Tiles (advertisements) into position predefined by the content author
3. Refreshes tiles as search criteria changes

My task was to add this extra functionality:
1. Display a Quick View row within the search results grid when the user clicks a product tile
2. Allow navigation through product tiles using arrows inside the Quick View (skipping over Promo Tiles)

Search Results component (SCORE 2.5+), extended with Quick View functionality

Search Results component (SCORE 2.5+), extended with Quick View functionality

 

I wanted my custom component to have a minimal footprint – so I reused SCORE classes and Sitecore items as much as possible and utilized inheritance where necessary.

Step 1 – Create a rendering definition item for the Quick View Search Results component

We need this to point to our custom View, which will add mark up for the Quick View. Everything else – the model, rendering parameters and datasource items – are reused from SCORE.
quickviewCE

 

Step 2 – Create the MVC View

We’ll use Html.RenderPartial to render SCORE’s Search Results component, unmodified. Then we’ll add our extra bit of HTML. Notice the usage of Model.UXModule and Model.Classes to help customize things.

@model Score.BootstrapUI.Web.Areas.ScoreBootstrapUI.Models.ContentSearch.SearchResultsRenderingModel

@{
    // Override the default javascript
    Model.UXModule = "score_shop/Components/QuickViewSearchResults";
    // Add a custom class for styling ease
    Model.Classes.Add("quick-view-search-results");
}

@* Render SCORE component *@
@{ Html.RenderPartial("/Areas/ScoreBootstrapUI/Views/Shared/ContentSearch/SearchResults.cshtml", Model); }

@* Add mark up for Quick View *@
@if (!Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
    <ul style="display: none">
        <li class="bj-product-quick-view">
            <span class="close"></span>
            <div class="quick-view-body"></div>
            <div class="controls">
                <span class="controls-back"></span>
                <span class="controls-forward"></span>
            </div>
        </li>
    </ul>
}

 

Step 3 – Inherit from SearchResults.js and add relevant Quick View goodies

quickViewjs

In the interest of conciseness, the shot above is just an excerpt of the code. It outlines how to implement this at a high level, but omits some details. If you’d like to see the code in its entirety, please comment below and I’ll happily share.

 

Step 4 – Style the Quick View using your favorite CSS preprocessor

That’s it! This is just one example of how to extend SCORE Components with customization to meet a unique functional need. SCORE and Sitecore are inherently flexible, so the options for extension and customization are nearly limitless.

Anastasiya Flynn

I am a front-to-back, full-stack developer with 7 years of experience in the CMS world – Sitecore and beyond. I excel in the technical aspects of software development and architecture but, personally, I really enjoy working on UI development. I am capable of detaching from my developer brain and analyzing the output from a non-technical perspective, anticipating the challenges end users will experience.

My career started out in the support department, and I keep the lessons I learned there close to my heart. When working on a project, my first priority is to amaze our customer. My second priority is to enforce practices that will make the code a pleasure to maintain. I am not the type of person who is satisfied with producing software that merely works – I am emotionally connected. I want the code to be organized and beautiful, and I am personally invested in its success, usability and longevity. Learn more about Anastasiya Flynn.

Add a Comment

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

Or request call back