To see the first installment of the Kentico 101 series, check out Kentico 101 - Kentico’s Pages Application.
Kentico is an extremely robust tool for building and maintaining your website. Like any tool, however, if you don’t know how to use it well, its potential is wasted. Kentico is strong enough to handle the demands of large sites with some of the most rigorous requirements, (read about some of our most complex projects such as, BDO USA, LLP, National Office Furniture, and National Heritage Academies) while being simple enough to be managed by even the busiest content managers; even those with little to no programming experience.
The goal of this second installment of the Kentico 101 series blog post is to help bridge the gap between an awesome tool and having the skills to use that tool. Even with the much-anticipated move to MVC, the ability to design systems that allow users to structure content well is crucial. With that in mind, let’s jump right in and walk through creating a brand new custom Page Type.
Kentico Page Types
While our tour of the Pages Application was geared toward content editors, this blog will focus more on the developers in the audience. That is not to say that tech-savvy content folks couldn’t create new page types but, typically, these will be customized enough that you may want to pass off your requirements to a developer and let them deal with the complexities (seriously, we don’t mind).
The interface for the Page Types application is very straightforward. The bulk of the main screen is a list of the Page Types currently on the site along with a filter/search utility at the top. The “Scopes” and “Code” tabs in the gray sidebar offer some additional functionality that we’ll get to in a later blog post.
If you’re anything like me when you read documentation … you don’t read the documentation. You skip right to the examples and waste time trying to figure out what’s going on without looking at the dry parts. In this case, though, I think we’ll be better off creating our own custom page type step-by-step before peeking under the hood of one of the pre-built ones.
Step 1: General Info
After clicking on the “New Page Type” button you’ll be brought to Step 1 to begin filling out some basic information about your new Page Type. You’ll choose a display name, namespace, and code name for the Page Type.
Pro-tip: choose a naming scheme and stick with it. At BizStream we prefix all of our display names with an asterisk. This lets us not only easily pick out which items we’ve developed versus the built-in Kentico Page Types, but also allows our custom ones to float to the top of the alphabetical list. We have also set some internal standards concerning namespaces and code names to make sure we stay consistent across all of our projects.
Let’s say we want to start listing some statistics on coffee drinkers on our Dancing Goat site.
Step 2: Data Type
On Step 2 we can go ahead and leave everything as-is. Most of the time you’ll want a Page Type with custom fields.
Step 3: Fields of Gold (or, you know, text)
Now we get to the fun part - adding some custom fields. For this example, let’s say we need an image, a description, and the statistic itself. We’ll click “New field” and name the fields something descriptive so we can remember it later.
There are a lot of options for each field but for now let’s keep it simple and just make sure we have a “Field caption” added (this will be what your content editor sees when completing the form). After that just make sure to click “Save” before creating the next field.
One other area to look at is the “Form control” selection. This determines what kind of input the user has on the form in the Pages Application. For the actual statistic, I left it as the default “text box”, for the description I selected “text area” which will provide a little more room for writing, and for the image I chose “Media selection”. That form control will allow access to any items in the media library!
Step 4: Wrapping Up
Okay, we have our fields set but we’re not quite finished creating the page type yet. Clicking next will bring you to the “Additional settings” screen where you can choose a Page name source. This will determine what field is used to display a name in the tree of the Pages Application. Kentico will pre-select a field for you but, in this case, I don’t want to use the Statistic field since it might be something generic like “70%”. I’ll select “Use page name field” which will add another field to the form used only for naming the page in the tree.
Step 5: Meet The Parents
Next, we’ll be asked to decide what parent types are allowed. This allows you to set some basic scopes (a topic we’ll cover in more detail in a later post). By default, you’ll probably see Page (menu item) and Root. This means the only place we’ll be allowed to add a * Statistic page type would be as a direct child of one of those types. In this case, I only want statistics to be used on article pages so I’ll remove the default Page Types and replace it with the “Article (Dancing Goat)” Page Type.
Step 6: See the Sites
Kentico will confirm which sites you want this page type added to (yep, you can run multiple sites on a single instance of Kentico!). We only have the Dancing Goat site in this case so we’ll leave it as is.
Pro tip: this list and the Parent types list display what has already been added. You do not need to check the box for any items you want to leave there.
Step 7: The Wizard Has Finished
Not quite. This is a step that has bitten me more than once. You must click the “Finish” button
or else you’ll need to start over from scratch. If you navigate away from this page to somewhere else, the page type you created will appear in the Kentico admin but will not have an associated database entry; making it useless. If you miss that step you’ll have to delete what you just created and start over (I can’t tell you how many times I’ve had to do that).
Wrapping Up (for real this time)
Here are a few finishing touches to keep in mind.
Once you’ve clicked the finish button your newly-created Page Type is ready to use. There are still a million things you can do with your new Page Type; this guide barely scratched the surface. One housekeeping thing I would do would be to set a custom icon to be able to more easily distinguish this Page Type from others in the content tree.
Other Best Practices
Now you have a good sense of what goes into a Page Type in Kentico. Properly structuring your data will not only make it easier to develop with but will make life easier on your content editors as well. Some other things to think about:
- DO - Check out the pre-built Page Types Kentico includes with your install. They have lots of examples of different types of fields and form controls to learn from.
- DON’T - Modify the pre-built Page Types Kentico includes with your install. This is a very bad idea. Modifying the built-in Page Types can cause issues when doing hotfixes and upgrades. If you need to modify something like the Page (menu item) a better practice would be to clone that Page Type and make your modifications on the new one.
- DO - Set Page Type scopes. This will provide a much better user experience for your content editors and will ensure they aren’t overwhelmed with options that aren’t relevant to what they are trying to do.
- DON’T - Hesitate to add Explanation Text (just below your Field Caption) to provide more information to your content editors on how to correctly complete that field. Things like image size recommendations and reminders about where this data will be displayed will go a long way to making content editors happy.
Like with any of our Kentico 101 articles, we just barely scratched the surface. There are A LOT of other things that can be done within the umbrella of Kentico Page Types. Far too much to cover in a single post. This walkthrough, however, should get you started in creating structured content for your site.
What did you think of this blog post? Would you like to see more Kentico 101 articles? What would you like to learn more about? Comment below!
To see the second installment of the Kentico 101 series, check out Kentico 101 - Page Types