Creating Custom Page Types in Kentico

The Client Use Case

The www.epiqglobal.com website has several pages that describe the company’s services that they offer. Each of these services pages has a specific structure to the content. Specifically, we need to do the following things:


The Hero Unit has to be editable for the Title, Description and Image

We have to be able to show Featured Case Studies for that particular service

Finally, we have to show relevant Insights for that service : 


To achieve these requirements, we need to design a custom “Page Type” in Kentico and create pages based on this Page Type. 


Creating a Custom Page Type

There are several key dimensions to a Page Type as shown below:

  • Fields : We can create custom fields and associate them with this page. 
  • Layout : This has the basic structure of the page type. 
  • Transformations : These are ASCX, HTML or other controls that let you control the visualization of the fields that you selected earlier. 
  • Queries : Queries allow you to load any type of data stored in the Kentico database. For example we can create a custom table and use queries to fetch data from the table.


Next we will illustrate how we used these Page Type dimensions to create a custom page type for the Services use case described earlier. 


Step 1 : We created a page type called “Epiq Experience” and we should define a unique Code name and database table name to store the content.



Step 2 : Under the “Fields” section, we created all the necessary fields such as hero image, hero title, case study path and others.



Step 3 : We added Transformations that contain render code for the fields we created. These transformations support ASCX, HTML, Text/XML, XSLT and jQuery code.


For example, the ASCX transformation below renders the hero section. 



At the page level, you can also provide inputs to a transformation using page form fields like below:




These steps complete the creation of a Page Type needed to support the Services use case. 


Creating a Services Page based on the custom Page type

When we create a page, we select the Page Type to be “EPIQ Experience” as shown below: 



When you click on the “Forms” tab, you will now see all the form fields that were defined in the Page Type earlier. You can select the relevant values. 



These field values along with the associated transformations will also power the various web parts designed in the layout. 




As a final step, you can now see the page as shown below : 





Additional References

  • To learn more about building custom Kentico web parts click here
  • To learn about the intricacies of applying different designs to a multilingual Kentico site, go here

No items found.

Related Insights

Launching International Sites on Kentico

We make launching international sites on Kentico Easy!

Vasi Eswar

Kentico

Building Interactive Experiences in Kentico with VueJS

Creating an interactive interface using Kentico and VueJS

Vasi Eswar

Kentico

Step-by-Step Guide to Setup Kentico on Azure

We all love Kentico and we all love Microsoft Azure, but is there a way that we can bring the best of both worlds together? With Kentico’s strength in adaptability and Azure's scalability and easy learning curve, it's a no-brainer that they belong together.

Vasi Eswar

Kentico

Subscribe to our newsletter