In the traditional sense, a web widget is a portable chunk of code that can be embedded and executed within any separate HTML-based web page without requiring any additional compilation. It is derived from the idea of code re-use, usually for sharing and collaboration. For the purposes of this series, we can extend the definition to include any self-contained area of content within a website that is likely to appear more than once—either identically or in some variation.
A great example of this would be boxes that contain advertisements, promotional items, calls to action or login forms. The red oval in the right-hand column below indicates examples of a couple of the widgets on cancer.ca, the website of the Canadian Cancer Society (a recent NLC client).
The right-hand column is a great place to position smaller pieces of content like these. If you’re a Sitecore 6 user, there are several ways of implementing widget functionality for easy, intuitive creation and mixing-and-matching of widgets for your public-facing site. Each approach involves trade-offs from the perspective of content granularity, layout flexibility and the complexity of your implementation. More on that later.
This 5-part series of blog posts outlines several possible implementations based on common requirements scenarios. While it is not exhaustive, it will give you a sense of your options and concrete guidelines for moving forward.
- Part 1: Introduction, key questions and terminology
- Part 2: Clean and Simple: Using a rich text area
- Part 3: Usability Plus: Using the Page Designer
- Part 4: Mix n’ Match: Building a widget library
- Part 5: Ultimate Flexibility: Complementing the Page Designer with a data source
Each entry briefly outlines particular architecture details, levels of difficulty for content authors and the implementation team, and pros and cons for each approach.
Terminology
This series assumes a familiarity with the Sitecore content management system. If you are comfortable with Sitecore concepts and web programming terminology, feel free to skip this section. If, on the other hand, you have little or no experience with the Sitecore CMS, then this brief overview of Sitecore terms and concepts should render the rest of the series more understandable.
Content Authors – Users of the Sitecore CMS, who are responsible for the input and approval of content. All content authors have a username and password to access the Sitecore CMS.
Content Item – A piece of content that has been created using a template and assigned a location in the content tree. A content item can exist in one or more languages and may also be controlled by a workflow process.
Content Tree – The content tree is the method of organizing content items in Sitecore, using a folder-like structure.
Data template – a set of content fields that represent a distinct content type within Sitecore. For example, a news article data template might contain a title field, a text field and a date field.
Multi-list field – The multi-list is a data type in Sitecore that allows content authors to select items from a pre-existing list of content items.
Modularity – The extent to which the website is composed from separate parts, or modules. Modules improve maintainability by enforcing logical boundaries between components. In this context, a truly modular solution would involve the widget as a completely independent component of the website.
Presentation object – a piece of HTML or .NET code that displays content stored in Sitecore and defines the general look-and-feel of a web page. Presentation objects take the form of layouts (ASP.NET pages), sublayouts (ASP.NET user controls) and renderings (XSLT stylesheets).
Page designer – The Page Designer is a feature that enables non-technical people – like the marketing group – to rearrange the elements on a page without needing to program any code.
Placeholder – An area that can be defined within a layout, where sublayouts and renderings can be placed.
Rich text area – a type of content field in Sitecore that is edited via the Rich Text Editor, which features a Word-like editing interface.
Key questions
When considering your approach to widget architecture, the first thing to do is decide which scenario best fits your situation. Keep the following questions in mind while perusing the scenarios in parts 3-5.
- Do your widgets need to appear more than once on the site? (Please note, this series assumes repeatable widgets will be identical in all locations)
- Do they include static content, or will the content (text, images) need to change based on the context? (i.e.: where they are placed)
- Will they appear more than once, but always on the same page/layout?
- Will they appear more than once, but on different pages?
- How will the widgets be governed? That is, who will have permission to select and/or edit them?
- How skilled are your authors with the Rich Text Editor?
With these questions in mind, continue on to the next post, which outlines the first (and simplest) scenario for building widgets in Sitecore 6.
Continue to next post >> Clean and Simple: Using a rich text area