Widgets: Add content and functionality to pages

Content and functionality of Sitefinity CMS pages are defined through widgets. Anything you want your page to do, you must do it with a widget. Widgets allow you to display the content you create and configure how you want your content displayed. Sitefinity CMS comes with a set of built-in widgets, which can be directly used in the pages you create. Such widgets are, for example, the News, Image gallery, and Video gallery.

To use widgets, you simply drop them on the page (in page content editing mode) and configure them to display already existing content. You can configure widgets to display different parts of the content by combining widgets and by tagging and classifying content.

Widgets have the purpose of making available specific content and functionality to the frontend user, or visitor, of your website. The widget frontend is basically an HTML representation of the widget functionality, for example, buttons or input fields, that is, the frontend functionality that the user interacts with. The backend of a widget includes its business logic and configuration, as well as the widget template and widget designer.

There are special types of widgets that serve specific purposes. For example, Form fields are used to read and write value from a single field. Such fields help administrators, designers, or developers to perform their jobs. For example, the Scripts and styles widgets enable you to add resources like JavaScript files or CSS files.

Widgets have properties that you set per widget and that modify the functionality of the particular widget. If you want to display blog posts using the Blog posts widget, you need to tell the widget which blog to use, how many posts to display on one page, and how to display them. You configure a widget through its widget designer, that is, in the Edit mode of widgets. For more information, see Overview: Widget designers.

With widget templates you can change the look of the build-in Sitefinity CMS widgets – Blog posts, News, Events, Image, Video and so on. For more information, see Overview: Widget templates.

Apart from modifying Sitefinity CMS built-in MVC widgets, you can also create your own widgets and use them side by side with the default ones. That is, implement new widget to specifically serve your business case needs and functionality requirements by implementing your own custom logic. For more information, see Create widgets.

You can also use Sitefinity CMS VSIX to create and customize MVC widgets. For more information, see Sitefinity CMS VSIX.

Technically speaking, Sitefinity CMS widgets leverage the ASP.NET MVC technology for a simplified development, enabling you to take control of markup. You benefit from:

• All widgets are built with a mobile-first mindset. Responsive design is provided by the CSS framework, used in the Bootstrap package.
• Widgets, designers, templates, and views are all wired-up based on a simple convention that does not require mappings and XML.
• AngularJS SPA implementation of widget designers helps you create new designers or modify existing ones in a quick and straightforward way.
• Bootstrap framework - Bootstrap is installed with Sitefinity CMS out-of-the-box. You can work with other frameworks, as well.
• You can package your CSS, images, widget templates, layout templates, and a master template, all in one package.
• You can find the code for all built-in Sitefinity CMS widgets in the GitHub repository.

When working with and developing widgets in Sitefinity, you need to make sure you are acquainted with the principles of MVC development. Widgets follow the model-view-controller architectural pattern: