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 build 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.
Customize the Admin App backend UI
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.
Sitefinity Component Framework
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 @progress\sitefinity-component-framework\styles\src\srcss\sitefinity-main.scss (if you're using SCSS) or @progress\sitefinity-component-framework\styles\dist\sitefinity\css\main.css (if you're using CSS) in your project
The package and the API documentation is available at the npm site.
Breaking changes for Admin App extensions
Because of breaking changes, introduced in Sitefinity CMS 13.1 release, all your previously built extensions will stop working.
Sitefinity CMS is updated use Angular 9.1.9. The Angular CLI project structure is also upgraded to improve the development experience and to make the future upgrades of the Angular framework easier.
In Sitefinity CMS, all extensions are moved from the root level to the src folder.
: To resolve changes to the file structure when merging from the master branch, we recommend updating your source code using following this procedure:
- Clone the Admin App extensions repository.
- Copy your custom extension inside the
- Update the
__extensions_index.ts file to include your custom module.
- Rebuild the extensions using npm run build:prod command.
: Angular 9.1.9 also has breaking changes. If you have a deprecated dependency, you may need to change it. For more information, see the official Angular documentation: