Back

Check out the new Sitefinity v11

Sitefinity Blog
Written by
Brad Hunt

The latest version of Sitefinity has some great new features. A new feature for developers is better Visual Studio integration through Sitefinity VSIX, which is a plugin developers can use to improve their productivity. Another new feature is the Web Security Module, which allows you to harden your web site and increase security. There are also some big changes for content editors, and this post will show the new content editing user interface (UI).

New installations of Sitefinity 11 come with the new interface already turned on. For sites that have been upgraded to version 11, you may need to manually turn on the new interface. To toggle the new interface off or on, look under Administration, switch new interface ON/OFF.
Admin Switch
Once you select the option to “switch new interface” you will see a screen that looks like the following figure:
Switch Detail 

From this screen you can see the current setting for the interface, and in the example above, the new interface is “switched on.” You can also switch back to the classic interface if needed by clicking the button labelled “Switch back to the classic interface.” 

From the screen shot above, you can see that the new user interface is not yet available for all modules in Sitefinity. In Sitefinity 11.0 the new UI is only available for the following:

  • News

  • Blogs

  • Lists

Note from the screen shot the new UI is also available for any custom modules you create. Let’s examine each of the modules in more detail. 

News

The first thing you might notice in Sitefinity 11 on a site with no existing posts is the slight difference in the news module default screen.

In Sitefinity 10:
Create News 10

Sitefinity 11:
Create News 11

The change is small and inconsequential. More changes are evident when creating a new news item. In Sitefinity 10, when you create a new item you see the standard form you are used to:
News Form 10
This same form in Sitefinity 11 looks substantially different:

News Form 11
A few items of note for Sitefinity 11:

The publish and save buttons have been moved away from the form and to the upper right-hand side of the screen. The summary field is already present by default without having to click to add it. The content area does not have the rich text formatting elements above it. In the new UI, the rich text editor buttons only appear when the content areas that are of that type have focus. For example, in the news section, once you click into the main content area, the rich text controls appear, but at the top of the screen.

Controls 11

The rich text tool bar itself has been updated and modernized. 

Sitefinity 10:
Toolbar 10

Sitefinity 11:
Toolbar 11
When using the buttons on the toolbar, the whole experience of inserting links, images, etc. has been improved. For example, when adding a link in Sitefinity 10 you get a small pop up window:
sitefinity-10-add-link

In Sitefinity 11, that same screen looks like this:
sitefinity-11-add-link

In addition to adding links, the process to add embedded media has been simplified. When clicking the video icon on the rich text tool bar, you are presented with the following screen, which makes it easy to add embedded video:

sitefinity-11-embed-media 

The process to add images has been streamlined also. Clicking the insert image icon allows you to upload an image or select an image from the library. This process of selecting from a library has been improved and streamlined.

Sitefinity 10:
sitefinity-10-select-image 

Sitefinity 11:

sitefinity-11-select-image

The category and tag selection process has also been improved. 

In Sitefinity 10: 

categories-tags-10

In Sitefinity 11:
categories-tags-11

And when you click on the plus sign, there is an improved interface for selecting tags and categories:

sitefinity-11-add-tag

The URL and comments section have changed slightly.

Sitefinity 10:
sitefinity-10-url-coments

And in Sitefinity 11:

sitefinity-11-url-coments

One item to note in the 11 UI: it appears that the “include in sitemap” checkbox has been removed. I’m not sure if this is intentional, but that setting does not appear elsewhere in the new UI.

A final UI note for the news module in Sitefinity 11 is that there is a right-hand side bar that you can toggle to view other news items.
sitefinity-11-toggle-sidebar

Once you have news items added, you will also see changes in the news listing page. 

Sitefinity 10:
sitefinity-10-news-list

In Sitefinity 11, the search bar is featured prominently at the top of the screen, and the right-hand side bar is collapsed until you click on gear or filter icons. This gives the content editors more screen real estate and it hides those filters and other features until you need them, keeping them out of the way for the normal day-to-day task of adding news items.

Overall, the changes to the News module make this section feel more modern and allow content editors to focus on jumping in and adding content. The performance of this new UI has also improved so the whole experience just feels faster.

sitefinity-11-news-list

Blogs

All of the features shown above for news have also been carried over to the blog section including the behavior of the rich text editors, the tagging and content entry. Adding new blog posts is quick and easy with the new UI.

Sitefinity 10:
sitefinity-10-blog-post

The new UI for Sitefinity 11:
sitefinity-11-blog-post

One great new feature I discovered when entering a new blog post is the improved HTML editing experience. In Sitefinity 10, the HTML view is just very basic text editor.
sitefinity-10-html-editor 

However, in Sitefinity 11, the editor is in full screen mode, there is color coding, and “intellisense” which helps non-technical content editors see how to properly format HTML tags:

sitefinity-11-html-editor

Lists

The final built-in module that was updated to the new UI is the Lists module. Like Blogs, the list has all the same UI improvements and updates.

sitefinity-11-list

The rich text editor appears at the top of the screen, the browse panel appears at the right-hand side and the UI is streamlined and fast.

Custom Modules

As mentioned at the beginning of this post, any custom modules you create will also have the new UI. For example, you created a recipes module to store recipe content. When you add or edit a recipe, the new UI is present too:
sitefinity-11-custom-module

Smooth Fusion is custom web and mobile development company and leading Progress Sitefinity CMS Partner. We create functional, usable, secure, and elegant software while striving to make the process painless for our customers. We offer a set of core services that we’ve adapted and refined for more than 250 clients over our 17 years in business. We’ve completed more than 1700 projects across dozens of industries. To talk to us about your project or review our portfolio, send us a message and one of our project managers will reach out to you quickly.

 

Recent Posts

Have A Project In Mind?

          

Let's Get Started