Widgets come up frequently on this blog. And for good reason—Sitefinity uses them to build in a huge assortment of capabilities.

Like webpages and blogs, widgets use templates. Widget Templates are a different animal though. A widget template acts in a similar manner to Page Templates. But it does things Page Templates don’t.

Definition of a Widget Template

A widget template is a set of rules for how to display a widget. All widgets must have a template for use in the Sitefinity CMS–both the default widgets included, and any custom widgets you create.

Examples of default widget templates are:

  • Content Block (Displays text/HTML)
  • Blog Posts (displays blog posts)
  • Navigation (displays a navigation menu)

Using Widget Templates in Sitefinity

Widget templates, like their Page counterparts, are accessible under Design in the main CMS top navigation. There’s a “Widget Templates” section just for them.sfinsider_widgetsmenu

Each template lays out how the widget looks & works on the webpage. Many govern how the site’s content works. So in using widget templates, you have control over what your content does.

Each default widget already has a template; nothing you need to do here. Think of these templates like a miniature page template, inside a normal page template.

Except for one thing: Widget templates can perform actions in response to a user’s actions.

When you open a page in the Page Editor, you’ll see a list of widgets down the right side.

Each time you drag a widget out onto a webpage, it’s displayed according to the template pre-assigned to that widget type. You can modify the widget once it’s in place. In some instances, you can modify the template from here (within the widget) as well. Other times though, you’ll want to customize the widget template first.

Customizing Widget Templates

Widgets have a little bit more customization capability than other Sitefinity elements. You can customize their templates, and many widgets include built-in customization.

Let’s take the Navigation widget for an example.

Editing the Navigation widget lets you customize how many navigation levels it presents, in what order, etc. Maybe you want three levels to show up, and the menu needs a blue color.

Modifying its widget template lets you change the navigation style, orientation, etc. Do you want the “About Us” link in navigation clickable, or not?

Customize the Navigation Widget – Sitefinity Docs

Widget template customization does require development work. You’re changing the backend code – the markup – of the template itself.

You customize a widget template one of two ways:

  1. Modify the existing widget template.
  2. Create a new widget template file & upload it.

widgettemplatelist—List of widget templates, both default and custom

We often take the B approach for new custom widgets. It gives us control over every display aspect, without messing up other widgets in the process (a caveat common to modifying templates, as we’ve referenced in past Sitefinity Template posts).

If you’d like to see how to create & apply a new widget template file, here’s how: Use external widget template file – Sitefinity Docs

Caveats & Cautions

You can use HTML to customize widget templates. However, to really modify them you’ll need scripting skills. Sitefinity uses ASP.NET and JavaScript in its coding. If you want to do major modifications to widgets & their templates, hire a Sitefinity developer to do them. Saves a lot of time.

widgettemplatesamplecode—Sample of widget template code

Changing the only copy of a widget template WILL change how all widgets using that template on your site look. The same caution I’ve mentioned about Blog and Page templates. It’s still true here, so be careful what you change!

Next up, let’s talk about responsive design templates. That’s a big one.

Do you use custom widgets in Sitefinity? What do they do? Please comment or email the URL. This is one area where you’re pretty much limited by creativity only, so I’d love to hear what you’ve built!

Sitefinity Templates: What is a Widget Template?
Tagged on:                     

Leave a Reply

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

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