How to Extend the New Sitefinity Admin App

When we released Progress Sitefinity 10.2, we debuted a Beta version of the new Admin Panel in the content creation area. If you haven’t familiarized yourself with it yet, please go back and read this post. In Sitefinity 11.0 this capability will become the default for new projects (for existing projects it needs to be switched on). This can be done on the website or user level.

This part of the Admin Panel is a SPA using the latest version of Angular, TypeScript and the OData capabilities of the CMS to operate with the data. My goal is to focus your attention on the technical side of the product and to ask you to play with the current implementation to try and extend the default functionality.

Note: The Sitefinity widgets are not going to be re-written on Angular. They will continue using MVC and Angular JS will remain for their designers. For your front-end you can use Angular or any other framework that covers your needs.

Basic Architecture and Workflow

When you want to change this part of the Admin Panel, the actual coding happens outside of the Sitefinity project. First, you have to clone/download the development kit repo from GitHub called Sitefinity Admin App Extensions. Keep in mind that this is an Angular project and a Mac machine can be used too.

In short this is a simulated instance of the content creation area that you see in your Sitefinity website, running as a separate site. It is connected to your Sitefinity website data and you can manipulate it from there. Once you are done with the changes in your Extensions project you must build the code and a JS bundle file is generated. You have to place it in the Sitefinity application under the AdminApp folder and restart the website. The changes will appear in the Admin Panel once you open it after the restart, and the good news is that no rebuild is required.

Here are two diagrams outlining the different stages during the development and the communication between the Admin App and the website:

 

Stages

 Communication

Details around the Setup

Before you can grab the development kit, you will need to have npm and NodeJS installed (NodeJS installs npm). Once that’s done, get the DevKit from GitHub. Once you have it, locally run “npm install” in its root folder. The next command is “npm start”. The Admin App will be up and running on http://localhost:3000/. This is a fresh instance that you will need to point to the Sitefinity application in order to get its data. Those two applications don’t know about each other and we need to set them up to start consuming data in the Admin App. To do that, we take the following steps:

• Allow CORS in the Sitefinity website:
  • <your_sitefinity_url>/Sitefinity/Administration/Settings/Advanced/WebServices => Routes => Sitefinity => Services => system and set the CORS of the sf/system route to <your_admin_app_url> or *
• Go to <your_sitefinity_url>/Sitefinity/Administration/Settings/Advanced/Authentication => SecurityTokenService => IdentityServer => Clients => Sitefinity
  • Under RedirectUris Click the Create new button, type <your_admin_app_url>/assets/auth/silent-renew.html
  • Under RedirectUris Click the Create new button again, type <your_admin_app_url>/auth/oidc/sign-in and save the changes.
  • Under Allowed CORS origins add < your_admin_app_url>, but DO NOT set it as "*" as it will NOT work
  • Under PostLogoutRedirectUris add < your_admin_app_url>/auth/oidc/sign-out
• Restart the website

Now Sitefinity is ready to share data with the Admin App. Next, point your instance of the Admin App to Sitefinity. Open http://localhost:3000/config/ and paste the URL of the website in the input.

Keep in mind that if you are not developing on your localhost, HTTPS is the recommend way to go. Once it is saved you will be redirected to a login form and you should enter your backend credentials. Once you are logged in the following screen will appear.

At the moment, only content creation is available in the admin app. In following releases we will add more functionalities from the list. You are able to access the content items, including dynamic types and classifications. The Admin App Extensions repo comes with four places where the UI is extended.

Extensibility Points in the Admin App

The idea is that only specific features are extendable and everything else is encapsulated. This way we will prevent unexpected behavior in the Admin App over time. There are four sample implementations – a new column in the grid showing random images, an action item in the context menu of a content item, a field to change the title and custom buttons in the toolbar showing the word count and the ability to insert videos from the Sitefinity libraries.

Custom column

Custom command

Custom field

Custom toolbar button

Custom toolbar button

Extensibility Points Implementation

Open the Admin App in the IDE/code editor of your choice and look at the folders structure where the actual implementation resides. In my case I am using Visual Studio Code.

You can look at the current samples and modify them to fit your scenario. When you save the files, the changes are applied immediately. No rebuilding is necessary and the browser automatically refreshes. Keep in mind that the “npm start” command in the console shouldn’t be interrupted.

Apply Changes to Your Sitefinity Website

Once you are ready with the changes and want to apply them in your Sitefinity application, you need to build the project by typing “npm run build” in your CLI. The Admin App will generate a combined JS file with the proper mapping in the “/dist/” folder. The mapping file is used for debugging and it is optional to have it.

Copy/Paste those files in the AdminApp folder of your Sitefinity website and they will be applied in the admin panel after the website is restarted.

Adoption

Give it a try and let us know if you have questions. The approach and the technology stack here is very different than the standard ASP.NET implementation that admin panel previously supported. Thanks to the new architecture and UX, the new part of the Admin Panel shows great improvements in productivity and performance. Download the latest version and give it a try, or schedule a demo to learn more.