Enable Quick Page Editing from Your Xperience by Kentico Website Channels

If you’ve worked with earlier versions of Kentico using Portal Engine and ASP.NET Web Forms, you might remember the handy "Edit Page" button that appeared on the website’s front-end for authenticated content editors.

Does that sound familiar? 🤔

I’d actually forgotten about it 😂 until one of our Xperience by Kentico clients asked if it was possible to enable this feature. Given their experience with it on their previous site, it was a natural request to see if it could be integrated into Xperience by Kentico.

I thought it was a brilliant idea to develop an open-source package that reintroduces the "Edit Page" button functionality in Xperience by Kentico. My main challenge was figuring out how to determine if a website visitor was authenticated in the administration portal. Unlike earlier versions of Kentico, where front-end users and administration users were the same, Xperience by Kentico differentiates between administration users and front-end members. This change added a layer of complexity, making the implementation of this feature both intriguing and valuable.

Before diving into development, I wanted to explore the best method for checking if a website visitor was authenticated in the admin site. After discussing various ideas in the community portal, I found that using HttpContext.AuthenticateAsync was the most effective approach. This method allows you to verify if a user is authenticated under a specific authentication scheme. For instance, you might have a specific scheme set up for your front-end visitors if it has an account area with gated content. To make sure that this new package was using the right scheme, I used the following constant, AdminIdentityConstants.APPLICATION_SCHEME.

Once I resolved the authentication check, I proceeded to create a ViewComponent to manage the rendering of the "Edit Page" button. This component not only handles the display of the button but also dynamically generates the correct admin page URL based on the current page being viewed on the front-end. This setup ensures that content editors can easily navigate to the appropriate administration page for quick editing. ⚡

I recommend checking out the GitHub repository for detailed instructions on setting up the package in your project. You'll find comprehensive guidelines as well as the source code for the ViewComponent that handles the button rendering and URL generation. 👀 Explore the repository to get a closer look at how it all works!