Technical overview and extensibility

The new content editing experience is backed up by the Sitefinity CMS Admin App, which is referred to as the backend administration user interface. Technically speaking, the Admin App is a Single Page Application (SPA) that is built using Angular, TypeScript, and OData web services to manage content. As a result, the Admin App enables you to implement a better security model, benefit from better performance, and leverage fluid and responsive user interface. You can use the Admin App in several ways:

• Seamlessly integrated in Sitefinity CMS
  The Admin App backend UI replaces and enhances the classic content editing experience for most content types and supported operations. The new content editing experience is switched on by default. For details, see New content editing experience FAQs.
• Extend and customize the Sitefinity CMS backend
  With the Admin App, you can customize the look and feel of the content editing and management experience and make it easier for content editors to complete their tasks by adding extra functionality. For details, see the next section in this article.
• Standalone mode
  You can host the Admin App standalone and configure it to work with different Sitefinity CMS instances. For more information, contact your Account manager.

Empowering content editors to create and manage content easily and efficiently is key to having great content on your website. Depending on your content and team’s requirements and specifics, you can not only tweak the appearance of the backend but also add extra functionality for creating and managing content. The following sections describe in more detail the areas, in which you can use the Sitefinity CMS Admin App extensions, as well as give you a few ideas how to go a step further. You can find all extension samples for backend customizations, along with technical details, in the GitHub repository.

NOTE: To make sure that your extension will work once you copy the package to your Sitefinity host, especially when working with older Sitefinity CMS releases, check out the Backward compatibility section in the GitHub repository.

The website is targeted at Sitefinity clients, partners, and development agencies who want to know more about and understand the design and user experience concepts of Sitefinity's New UI.

Following the recommendations of the Design section of the website, it is easy to extend Sitefinity's New UI and keep the same user experience. In the Components section, there is information about each visual component of Sitefinity's New UI, its variations, and how it is combined with other components. Also, for each component variation, there is an example of how to use it via code - for example, from Sitefinity Component Framework or native HTML5. In the Utilities section, all utility CSS classes of Sitefinity's New UI are listed, documented, and ready to use.

To access the site, navigate to Progress Sitefinity Design System.

The Sitefinity component framework is an npm package containing reusable Angular elements, such as components, directive, services and helpers, built following the design principles of Sitefinity, and serving as building blocks for creating a user interface.

Тhe npm package can be used in Admin App extensions, as well as in all Angular projects that need the look and feel of the new Sitefinity UI.
Each component has its own Angular module and the Common module contains constants, directives, modules, pipes and services. To use them, simply import the desired modules in the module of your application.

To load the styles, in the /node_modules folder reference one of the following:

• If you are using SCSS:
  @progress\sitefinity-component-framework\styles\src\srcss\sitefinity-main.scss()
• If you are using CSS
  @progress\sitefinity-component-framework\styles\dist\sitefinity\css\main.css() in your project

The package and the API documentation is available at the npm site.