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.
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:
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:
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.
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 toolbar button
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.
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.
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.
Peter Filipov (Pepi) is a Product Manager focused on expanding Sitefinity ecosystem. His prior experience as a Developer Advocate and Manager of Engineering helps him to understand the customers’ and market needs of Sitefinity. He also is passionate about being active and healthy 24/7 😊.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You have the right to request deletion of your Personal Information at any time.
You can also ask us not to pass your Personal Information to third parties here: Do Not Sell My Info
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Copyright © 2021 Progress Software Corporation and/or its subsidiaries or affiliates.All Rights Reserved.
Progress, Telerik, Ipswitch, Chef and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.