Creating Custom Page Types in Kentico
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7bf255aee773bbc2ca99_kenticopt.png)
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
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c177e5a5d45b8938e7f_-s8ITVrtOXfutz8p6eEK9258lw0A8QhDK495NCTMNVazF6KX4vUI8S3HAmEOXeCOy-kvCGZN0_-RE8oG8tA4cb0zKpnW3RXnPrIr9fm8Lxx_XXMNOixdOYTREKtofzDACvm7lyyP.png)
We have to be able to show Featured Case Studies for that particular service
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c17bb288af80be979d6_sHKToOX7PKMJwiYhmk0mlv2GYAQKFlmYOAfQMLAjhcJcLy7IFqmMYd8zTOcVIL2TipfVp37gyE9YR4Lbmz5tYFKTvwq61pca567Ac7mXvMsLGeZGA4woPTbYyzULkLGuHTJ7mmAn.png)
Finally, we have to show relevant Insights for that service :
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c1778921d72880bd03a_qO9YLypDqD2TgtTHefdPuuMFRKvrS0-4EgecT2jMc7n9XXfUdcEofVCgF4uSitCbSMRvdHAXy43NsmsC21wQzof689TTk0aY_UpjMn2ZfH50rvWFvo72RVO53Uxc9ztxHuxCkiFo.png)
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:
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c177e5a5dc0a3938e81_FpPeUgkgDcIPwGinU62XnB8uctNREk6Tp8zjHdAPcwexesMrbwygi30uDnFpPK7zxmDS0pyN8lbp_9R6ivHYj6abJTEYvN1gEagVEaLD_VNMuh99rs8G1S96Dd1ZIN21CzcZjqpe.png)
- 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.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c18bb288a4c57e979d7_q-SrpvM1vfpJfzcFk24X6O05b23tSNstNEtWMnOyO0yFEe-vgpaNHfetlOCllQg2BqcuJ8BbFokPVogBJ_Bh2Txqxz6qxTR6Sgq7UnpSuBLLkDFjus8c5FWpuZzT0S5cCqdS3IFT.png)
Step 2 : Under the “Fields” section, we created all the necessary fields such as hero image, hero title, case study path and others.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c189f805e418426822c_bEDsihzDLFU-UHlkUhJE6-UgBvQ0mKnGeifnMFs-ZXciIs0UrAiikpASvzrBvXO5cleotPFDt31D0R_XN1-X6JNDpSF1yCywstVbHopyjzkQRP-pQ7V7mr9FVKa7GIaTBGNMHnPT.png)
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.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c18d5e8b7f64097e92a_Tx-yBudWxgIu-JbjhFfjhcg4LiMa-Ooxh6biaph1gOzl6mY9BCtBRDvrc586YX36PF9v4G6YrmEEtnN-Cn8sDKKTfatrzkE-c2T3QPoivwbwPibqFUWqgBs_AvblBkzfFqPHw96T.png)
For example, the ASCX transformation below renders the hero section.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c18e2e9f97440f0f46e_CImleJ4pM6Qp2MfJZSr4ZXk-Ayd_SXne7aDCHf9S4XNoyucECqMxWWONWP3V3DjaESpUJrvrlISvsnRrGN8vZfduYVSfS_dCYWf9vmd7CsfQ6UYcFys2BmYrLXXnjR2MEJ41IfRl.png)
At the page level, you can also provide inputs to a transformation using page form fields like below:
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c18e7fca96ed1ca9b06_hYlW_dE1BAwM-bTo5CIvEvjLGe9ezNPOP0CJ87lsukntdfnAE5CuqlVb21AiUHjFHRBnet4DEc9rXvKmoaPbqoThYAyrgd7rRkC8HpPi1BPH3nkcVqMXrMORHA38Hl0SdhQAfjXF.png)
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:
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c18e7fca9c2dfca9b05_MmsaLXuCyjOtJfdOAhUssyMKDZ0fwVhzrujeCYhAgPC0ON6innPRp1kYs9b3RS0sffuOlvBRijX1iDUCzIvN9jKsX6VK2UJLgikB1_FL91DyIDKUQzxBKnNDnuOw1u21btnppSDq.png)
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.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c181d59992937afff54_P9YZN9vgqfTa09RekP5bDSEVMyGDGKHOea8JHSkV3VQMS5wcvnVFRjLyLUjfRv7kHqstWYLO5aWK08LMTDaq2s1DeXOZFFZk5lFyWqpCgFEPdQnlimsgmNUxHWFRXQPoe4gSWZcU.png)
These field values along with the associated transformations will also power the various web parts designed in the layout.
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c1985dfc9aea25bd18d__Ir07e1Fh3-4oUdoePHBb-Lg-nSj4zb0986oeGBCs7qIowlcLB0gpuY06saZYDLhRcTIj_lA4VvYPmQZqAyMzTt0HZaRdlGGWbR1m4SGu9GlmSOmM4EbOI6fr8cK5NWLTQ7_8QKC.png)
As a final step, you can now see the page as shown below :
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c199e68c469db61bf4e_XZkj_SDI_bFHhdpxATvYp3rVvlHWbElqEzCxBRSDhxswvnFPjP_8Oj2DdJIru0Zd2wOYCy1WTKkzQx8Qm-Efy_79qbS-7xQ56TO_MJ9wS5arbT2VK2uzJWACS3EJW-h8FiLoNVb5.png)
![](https://cdn.prod.website-files.com/5f8f7f6f9fe12b03286202a2/602b7c19d490c6613ab69407_fD9rTGRFZZdb9gGq1hpa6hl5DuB1n9Pb5CytkX0F69NSx1TAyEAMDAf2iLtgsvjY0Aa7qCD8KLhA8J2uaza6vQ5Z5-gv4wJLiUTpaIUKMTIz8pDOx2fw68dCPhIwbCLYX2bzFNOm.png)
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