Kentico 13 Custom Section: Dropdown and Checkbox in Configuration Modal Properties

Dave Mueller asked on February 10, 2022 22:07

Hello! I've built a handful of custom sections following the developer docs for Kentico 13 Core, but can't seem to locate an example of how to implement either a simple dropdown property with a handful of options OR a checkbox property to be available as configuration options in the section's configuration modal.

I'm trying to implement a dynamic column selector exactly like the one shown here: https://www.bizstream.com/blog/april-2021/xperience-page-builder-complex-sections-widgets

Any help would be greatly appreciated!

Thanks!

Correct Answer

Liam Goldfinch answered on February 11, 2022 00:53

Follow the example here to create a section properties model and assign it to your section.

Then you can add a dropdown property to the section like this:

public const string ColumnsDataSource = "1;1\r\n2;2\r\n3;3";

[EditingComponent(DropDownComponent.IDENTIFIER, Order = 1, Label = "Number of Columns")]
[EditingComponentProperty(nameof(DropDownProperties.DataSource), ColumnsDataSource)]
public string Columns { get; set; } = "1";

0 votesVote for this answer Unmark Correct answer

Recent Answers

Dave Mueller answered on February 11, 2022 16:07

Thank you! That worked like a charm. Can you also describe how to configure a checkbox property?

0 votesVote for this answer Mark as a Correct answer

Liam Goldfinch answered on February 11, 2022 16:52

No problem, there's a checkbox form component too, so maybe something like this?

[EditingComponent(CheckBoxComponent.IDENTIFIER, Order = 0, Label = "Single Column?")]
public bool IsSingleColumn { get; set; } = true;

The out of the box form components can be found here.

0 votesVote for this answer Mark as a Correct answer

Dave Mueller answered on February 11, 2022 16:57

That's perfect! Thanks for your help, Liam!

0 votesVote for this answer Mark as a Correct answer