kenticokentico-12kentico-mvc

How to Create an MVC Widget in Kentico 12 Page Builder

Previous question for context (the previous question was going nowhere, so I created this new one to start fresh): Unable to Create New MVC Widget in Kentico 12

I'm trying to create a widget called "Image with Summary". For now, I'm just trying to add a single property to it (a summary property that will have a rich text editor).

It isn't appearing as a widget option when I add a new widget to page builder:

Page Builder with Widget Dialog

From this, you can see that I have page builder configured properly (there is already a "Rich text" widget added), you can see that adding widgets is possible (the "Rich text" widget comes from a NuGet package that I installed called "Kentico.EMS12.MvcComponents.Widget.RichText"), and you can see that I only have two widgets available ("Form" and "Rich text"), neither of which are the widget I'm trying to add.

I need your help figuring out why my new widget is not appearing in this dialog.

Here is the Solution Explorer in Visual Studio showing all the files I've created for this new widget:

Visual Studio Solution Explorer showing files related to Image with Summary widget

Here is what my properties class looks like:

// ImageWithSummaryProperties.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    using Kentico.PageBuilder.Web.Mvc;

    public class ImageWithSummaryProperties : IWidgetProperties
    {
        public string Summary { get; set; }
    }
}

Here is what my view model looks like:

// ImageWithSummaryViewModel.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    public class ImageWithSummaryViewModel
    {
        public string Summary { get; set; }
    }
}

Here is what my controller looks like:

// ImageWithSummaryController.cs
using System.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary;

[assembly: RegisterWidget(
    identifier: "Rhythm.ImageWithSummary",
    controllerType: typeof(ImageWithSummaryController),
    name: "Image with Summary",
    Description = "An image with summary text.",
    IconClass = "icon-l-img-3-cols-3")]

namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    public class ImageWithSummaryController : WidgetController<ImageWithSummaryProperties>
    {
        public ActionResult Index()
        {
            var properties = GetProperties();
            return PartialView("Widgets/_Rhythm.ImageWithSummary", new ImageWithSummaryViewModel()
            {
                Summary = properties.Summary
            });
        }
    }
}

Here is what my view looks like:

@* _Rhythm.ImageWithSummary.cshtml *@
@using Kentico.PageBuilder.Web.Mvc
@using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
@using Kentico.Components.Web.Mvc.InlineEditors
@model ImageWithSummaryViewModel

@if (Context.Kentico().PageBuilder().EditMode)
{
    Html.Kentico().RichTextEditor(nameof(ImageWithSummaryProperties.Summary), null);
}
else
{
    <div class="fr-view">
        @Html.Raw(Html.Kentico().ResolveRichText(Model.Summary))
    </div>
}

I wouldn't focus too much on the view file, as I'm not even able to add the widget to the page builder, so the view has never even had a chance to be called.

Here's my home view file:

@* Views/Home/Index.cshtml *@
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

<h1>Rhythm Agency</h1>

@Html.Kentico().EditableArea("main")

I'm really at a loss as to why this widget isn't appearing in the list of available widgets to add to the page section. Here's some extra context:

EDIT:

Somebody is curious as to why this and the previous question are different, so this edit clarifies that. The previous question was about a widget I was attempting to implement using just a properties class. This newer question uses a different approach (namely, using a controller), which is an alternative way of implementing widgets in Kentico.

EDIT #2:

Somebody recommended I put the widget registration assembly attribute in the App_Start folder, which I did, but it didn't help:

Widget Registration Code

So why this is failing to work is still a mystery.

Solution

  • For the controller and widget to be recognized you need to put your controller in the '/Controllers' folder. I have my widget controllers located in the '/Controllers/Widgets' folder.

    I had issues which included not having added the suffix 'Controller' in the class name and issues with the widget controller not being in the '/Controllers' folder.

    Also you aren't working in an seperate project? Because this would need you to use the following in the 'AssemblyInfo.cs'

    using CMS;
[assembly: AssemblyDiscoverable]

    And make sure you have enabled the page builder feature in your kentico project. For example:

    protected void Application_Start()
{
    ...

    // Gets the ApplicationBuilder instance
    // Allows you to enable and configure Kentico MVC features
    ApplicationBuilder builder = ApplicationBuilder.Current;

    // Enables the preview feature
    builder.UsePreview();

    // Enables the page builder feature
    builder.UsePageBuilder();

    ...
}