How to Create a Custom Data Type for Combined URL or Page Selector in Xperience by Kentico 30.0.1?

2025/01/13 5:59 AM

Hello,

I am working on a project using Xperience by Kentico 30.0.1 and need to create a custom data type for content types. My requirement is:

  1. The custom data type should allow content editors to input either:

    • A URL (external or internal), or
    • A page selected from the page tree (using the page selector).

  2. The two fields (URL and page selector) should not be separate but combined into one data type. The editor should only interact with one input at a time, based on their selection (e.g., a input field choose between "URL" or "Page Selector").

  3. This data type should be reusable across content types.

In Sitecore, there is a Link field that provides similar functionality, where users can choose between an external link, an internal page, or even a media link. I am looking for a way to implement something equivalent in Xperience by Kentico.

I understand that URLs and page selectors are fundamentally different in Kentico, so I want guidance on:

  • The best approach to creating such a custom data type.
  • Any examples or resources for creating custom form components in Xperience.
  • How to handle the storage of these two different types of inputs in a single field in the database.

Any help or direction would be greatly appreciated!

Thank you!

Answers

2025/01/13 2:50 PM

Hey Rahul,

This one will be a bit tricky, but i understand the need. Firstly, just be aware of the one downside that if you link to a Web Page and save it just as the URL, it will not be able to dynamically adjust for language (although coming up there will be the System redirects for delete and unpublish - Xperience by Kentico - Roadmap | Product Roadmap, which should handle that).

Ultimately, you'll want to build out your own Form Component and register it for string types. Form components | Xperience by Kentico Documentation

You'll want to inherit FormComponent<YourProperties, string> so it will show up.

Then you'll want to use Kentico's React components and such to try to build it out, i would probably have a text box with a button "Link from Page" that launches the normal Kentico WebpageSelector (@kentico/xperience-admin-websites/WebPageSelector)

Here's the full list of Kentico Admin UI Components:
Reference - Admin UI form components | Xperience by Kentico Documentation

Lastly, Kentico's installer provides an Admin UI Boilerplate that you'll want to use as your starting point:

https://docs.kentico.com/developers-and-admins/installation#available-project-templates


I think you just run dotnet new kentico-xperience-admin-sample and it will create that for you once you have the normal install (which i assume you already do).

Are you on the Kentico Community Slack? If not, email me at tfayas through my gmail.com and i'll get you on, then you can message me and i'll help you out.

2025/01/13 4:38 PM
Answer

I know this need and I use to achieve this with a combination of radios and different selectors, which depend on the radio option. Kentico can toggle visibility for fields depending on another field.

I would use selectors which store a reference to the item, not store the URL as string. You should keep usage tracking and URL configuration working.
The backend can use different providers and helpers to get URLs from any referenced item type.

Maybe you can implement this combination as reusable field schema. Doing this, you would be able to use it on multiple content types. The view model constructor can also use a provider for that reusable field schema. So it can be inherited as well.

2025/01/14 1:29 PM

Take a look at the blog post Embedded structured content and the power of custom data types here to see how you can create custom data types and UI Form Components to interact with them in the administration UI.

However, we don't expose the built-in React components, like the Content Item selector, for you to combine with your own components.

Until that option becomes available in the future you have 2 options.

  1. Model your 3 states as content types and allow the marketer to select from each of those for the content item field

    1. You will model a link to a web page as a selected web page item in the Content Item selector. Additionally, your media assets should be stored as content items in the Content hub anyway, so this all fits your goals.
    2. However, this will be a little awkward for external URLs because they will need to be a separate content item. This will feel like extra work for marketers when they initially enter the data, but it does improve identifying where you use an external URL across all your channels. You could also add additional data points for this content item - UTM parameters, link label, description, taxonomy.

  2. Use 2 fields to store this content - 1 uses the Content Item selector (media item and web page item) and 1 uses a text box (external URL). You can use field visibility conditions along with a 3rd field to determine which of the 2 URL fields/components should be displayed - for example, use a drop down with 3 "URL" options - None, Internal, External.

    1. This is more convenient for content authoring but requires 2 separate fields and you'll always need to check the URL options drop down value to know which field you should pull the URL information from.

To answer this question, you have to login first.