How to Easily Extend Xperience by Kentico UI Pages with Page Extenders
13/09/2024Customising the backend interface of Xperience by Kentico can be essential to meet the requirements of content editors and marketers. One powerful tool at your disposal is UI page extenders, which allow you to modify existing UI pages without needing to alter any UI code. In this post, we'll demonstrate how to use page extenders to reorder the columns of a listing layout, making it easier to find the right record quicker.
Understanding UI Page Extenders
UI page extenders enable you to extend and enhance the functionality of existing UI pages in the admin site. They allow you to add new commands/buttons, modify the existing configurations, and tailor the interface to better suit your marketers needs, without touching the original source code. This has the added benefit of being easier to maintain and manage in the future.
Reordering columns in a listing layout
To illustrate the power of UI page extenders, we'll look at a basic use case of reordering the columns in the "Form Submissions" listing layout.
In the submissions listing, the columns appear in the order you've set in the Form Builder, which makes sense as they mirror the flow on the front end of the website. However, the Form Builder does not allow you to control the position of the system field, "Form inserted." In the screenshot below, you can't see the "Form inserted" field because it is the last column in the table. It might be more useful to have this as the first column. 🤔
This is where a UI page extender becomes useful! 💡
Here’s a basic implementation:
using CMS.OnlineForms;
using Kentico.Xperience.Admin.Base;
using Kentico.Xperience.Admin.DigitalMarketing.UIPages;
using System;
using System.Linq;
using System.Threading.Tasks;
[assembly: PageExtender(typeof(FormSubmissionsTabExtender))]
public class FormSubmissionsTabExtender : PageExtender<FormSubmissionsTab>
{
public override async Task ConfigurePage()
{
await base.ConfigurePage();
var columnConfigurations = Page.PageConfiguration.ColumnConfigurations;
var orderedConfigurations = columnConfigurations
.OrderBy(x => x.Name.Equals(nameof(BizFormItem.FormInserted), StringComparison.OrdinalIgnoreCase) ? 0 : 1);
Page.PageConfiguration.ColumnConfigurations = [.. orderedConfigurations];
}
}What exactly is happening in the code snippet?
Firstly, we have an assembly attribute which registers our UI page extender with Xperience by Kentico.
Then we create a UI Page Extender class, and we ensure that it inherits from PageExtender<FormSubmissionsTab>. This inheritance is crucial as it specifies that we are targeting the "Form Submissions" tab for customisation.
The final step is to override the default ConfigurePage method. The base implementation is called first to ensure the default configurations are applied, but then we use LINQ to reorder the columns by placing the FormInserted column at the top.
Conclusion
By leveraging UI page extenders, you can enhance and customise the Xperience by Kentico interface with ease. In this example, we demonstrated how to reorder columns in a listing layout to better fit your marketers' needs. This approach not only simplifies the customisation process but also keeps your modifications clean and maintainable.
For further reading, I would recommend checking out the documentation page itself, and a couple of blog posts on the community portal, Extending Xperience by Kentico Administration UI Pages and Extending Xperience by Kentico Administration UI Pages #2 - Enhanced System Overview.
You might also be interested in...
Enable Quick Page Editing from Your Xperience by Kentico Website Channels
23/08/2024Simplify content management with this new package for Xperience by Kentico. It adds an "Edit Page" button to your website channels, allowing editors to quickly access the Kentico administration interface and make updates effortlessly. Enhance your workflow and keep your content fresh with ease.
Boost Site Speed Using Image Processing for Xperience by Kentico
05/08/2024Discover how the XperienceCommunity.ImageProcessing package can significantly enhance your website's performance in Xperience by Kentico. This integration allows for resizing images and converting them to modern formats like WebP, resulting in faster page loads and improved user experience.
A Guide to the Xperience by Kentico Certified Developer Certification
30/07/2024Discover the newly extended Xperience by Kentico Certified Developer certification, designed to showcase your expertise in the platform. Learn about the certification process, key topics covered, and tips for success from a Kentico MVP. Perfect for developers looking to validate their skills and advance their careers.