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, now Perficient, 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.
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
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.
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
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.
