--- title: Example - Developing a widget in MVC related: - https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md - https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/defining-widget-properties-in-mvc.md - https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/creating-inline-editors-for-widget-properties.md --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). The following scenario will guide you through the process of developing a simple widget step-by-step with full code samples. For more detailed information about the underlying development principles, see our general pages about developing [MVC widgets](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md), [widget properties](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/defining-widget-properties-in-mvc.md) and [inline editors](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/creating-inline-editors-for-widget-properties.md). > **Note:** **Prerequisite** > > To be able to use the widget in the page builder, you need to [enable the page builder feature](https://docs.kentico.com/k12sp/developing-websites/page-builder-development.md) and [set up an editable area](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc.md). When finished, the widget displays a simple message with a number of your choice. The number is set via a widget property and can be modified through an inline property editor or the properties dialog. The widget can be added to an editable area and displayed on the live site. > **Note:** **Note**: The following example is based on the [LearningKit project](https://github.com/Kentico/LearningKit-Mvc). To use the code samples in your project, you need to modify the namespaces, identifiers and other occurrences where _LearningKit_ is mentioned to match your project's name. ## Widget Create a [widget](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md) with one modifiable integer [property](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/defining-widget-properties-in-mvc.md). ### Property model Create a property model **NumberWidgetProperties.cs** in the _\~/Models/Widgets/NumberWidget_ folder: ```csharp using Kentico.Forms.Web.Mvc; using Kentico.PageBuilder.Web.Mvc; namespace LearningKit.Models.Widgets.NumberWidget { public class NumberWidgetProperties : IWidgetProperties { // Defines a property and sets its default value // Assigns the default Kentico text input component, which allows users to enter // a numeric value for the property in the widget's configuration dialog [EditingComponent(IntInputComponent.IDENTIFIER, Order = 0, Label = "Number")] public int Number { get; set; } = 22; } } ``` ### Partial view Create a partial view **\_NumberWidget.cshtml** in the _\~/Views/Shared/Widgets_ folder: ```xml @using Kentico.PageBuilder.Web.Mvc @using Kentico.Web.Mvc @using LearningKit.Models.InlineEditors.NumberEditor @using LearningKit.Models.Widgets.NumberWidget @model ComponentViewModel

The number you chose for today is: @Model.Properties.Number

@* Shows an inline editor when rendered in the edit mode of the Pages application in Kentico *@ @if (Context.Kentico().PageBuilder().EditMode) { Html.RenderPartial("InlineEditors/_NumberEditor", new NumberEditorModel { @* Use the nameof() operator to get the name of the edited property from the widget property model *@ PropertyName = nameof(NumberWidgetProperties.Number), Number = Model.Properties.Number }); } ``` ### Widget registration Register the widget into the system using the **RegisterWidget** assembly attribute. We recommend adding a dedicated code file to your project's _\~/App\_Start_ folder for the purposes of component registration, for example named **PageBuilderComponentRegister.cs**. ```csharp using LearningKit.Models.Widgets.NumberWidget; using Kentico.PageBuilder.Web.Mvc; // Registers the 'Selected number' widget (it uses the system's default controller and ComponentViewModel) [assembly: RegisterWidget("LearningKit.Widgets.NumberWidget", "Selected number", typeof(NumberWidgetProperties), customViewName: "Widgets/_NumberWidget", IconClass = "icon-octothorpe")] ``` ## Inline editor Implement an [inline editor](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/creating-inline-editors-for-widget-properties.md) able to modify the _Number_ integer property. ### Model Create an editor model **NumberEditorModel.cs** in the _\~/Models/InlineEditors/NumberEditor_ folder: ```csharp namespace LearningKit.Models.InlineEditors.NumberEditor { public class NumberEditorModel { public string PropertyName { get; set; } public int Number { get; set; } } } ``` ### Partial view Create a partial view **\_NumberEditor.cshtml** in the _\~/Views/Shared/InlineEditors_ folder: ```xml @using Kentico.PageBuilder.Web.Mvc @using Kentico.Web.Mvc @model LearningKit.Models.InlineEditors.NumberEditor.NumberEditorModel @using (Html.Kentico().BeginInlineEditor("number-editor", Model.PropertyName)) {
} ``` ### JavaScript Create a JavaScript file **number-editor.js** in the _\~/Content/InlineEditors/NumberEditor_ folder: ```js (function () { // Registers the 'number-editor' inline property editor within the page builder scripts window.kentico.pageBuilder.registerInlineEditor("number-editor", { init: function (options) { var editor = options.editor; // Click action for the 'Plus' button editor.querySelector("#plus-btn").addEventListener("click", function () { // Creates a custom event that notifies the widget about a change in the value of a property var event = new CustomEvent("updateProperty", { detail: { value: options.propertyValue + 1, name: options.propertyName } }); editor.dispatchEvent(event); }); // Click action for the 'Minus' button editor.querySelector("#minus-btn").addEventListener("click", function () { var event = new CustomEvent("updateProperty", { detail: { value: options.propertyValue - 1, name: options.propertyName } }); editor.dispatchEvent(event); }); } }); })(); ``` > **Info:** The location of the script file under _\~/Content/InlineEditors_ ensures that the script is automatically linked in the Kentico administration interface on [pages containing editable areas](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc.md) (within a bundle of inline editor scripts).