Unable to Create New MVC Widget in Kentico 12 - kentico

I'm trying to create a new widget called "Image Summary Section". I'm at the very beginning stages and I'm just trying to get the widget to appear in the list of widgets when adding widgets to the page. Instead, I just get existing widgets that I didn't create:
You can see that I've created a class that implements IWidgetProperties and that I've called RegisterWidget for it. I've also created _ImageSummarySection.cshtml (though, I wouldn't expect that to be necessary just for the widget to appear in the widget selection dialog).
The top solution is for the MVC website, and the bottom solution is for the Kentico CMS. Both are running, and the browser shown is the Kentico CMS (I'm trying to add my new widget in this screenshot, but it's not in the list of widgets).
Any idea of what I'm doing wrong? How can I get my widget to appear in the list of widgets?
Additional information:
I've looked at various links, but here's one I was looking through: https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc/defining-widget-properties-in-mvc
I'm on the latest Kentico version, which I think is 12.0.77.
.
.
.
.
.
.
EDIT:
I just watched this video, hoping it would provide insight: https://www.youtube.com/watch?v=ljQO9on5lLM
It was more basic than I anticipated, but I did notice these two frames:
Note that it shows six available widgets to select from.
And then there was this frame:
It shows only two available widgets.
From that, I infer that sections may have some feature that allows developers to constrain which widgets are allowed in them. Is there perhaps something I need to do in order to allow my widgets to appear as options in the default section (the one shown below)?
.
.
.
.
.
.
EDIT #2:
I researched widget constraints a bit and found this: https://docs.kentico.com/k12/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc
Specifically the section titled "Limiting widgets allowed in an editable area", which says the following:
Since my view is not passing a parameter with a whitelist of widgets, all widgets should (in theory) be allowed:
#* Index.cshtml *#
#using Kentico.PageBuilder.Web.Mvc
#using Kentico.Web.Mvc
<h1>Rhythm Agency</h1>
#Html.Kentico().EditableArea("main")
So there goes that theory. I'm still at a loss as to why my new widget isn't appearing as an option when adding new widgets to the page.

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();
...
}

You're almost there. You need to create another class and register your widgets in the App_Start folder. Check out the documentation here on that. It's the section on widget registration. Be sure to enable Page builder as well.
*** Updated ***
Based on your update and not being able to see the image well on my mobile device, I was able to see you're defining/registering your widget in your Properties model. This needs to be done in the Controller. See the example below.
\Models\Widgets\JobListingWidgetProperties.cs
namespace NameSpace.Models.Widgets.JobListingWidget
{
public class JobListingWidgetProperties : IWidgetProperties
{
// property definitions here
}
}
\Models\Widgets\JobListingModelView.cs
namespace NameSpace.Models.Widgets.JobListingWidget
{
public class JobListingWidgetViewModel
{
// properties here
}
}
\Controllers\Widgets\JobListingWidgetController.cs
[assembly: RegisterWidget("NameSpace.Widgets.JobListingWidget", typeof(JobListingWidgetController), "Job Listing Widget", Description = "Displays a listing of jobs for a given path", IconClass = "icon-heartshake")]
namespace NameSpace.Controllers.Widgets
{
public class JobListingWidgetController : WidgetController<JobListingWidgetProperties>
{
public ActionResult Index()
{
// code here
}
}
}

Related

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:
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:
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:
I'm on Kentico 12.0.77.
I've tried a widget without a controller and now one with a controller.
As you can see, I have the widget registration (as an assembly attribute) in the controller class file.
The frontend of the site renders the rich text widget just fine.
I didn't see any relevant issues in the error log.
I'm using the default section.
When I call EditableArea, you can see I do not place any restrictions on the widgets that can be used.
I'm using the free edition of Kentico. I doubt that's a factor, but mentioning it just in case (the "benefits of upgrading your license" link is currently a 404).
I don't see any errors in Chrome's console.
I've read various instructions for creating widgets like 10 times. No idea what I'm missing.
I'm using Chrome on Windows 10.
I was previously calling the widget "Image Summary Section", but I renamed it on the off chance "Section" was a reserved word.
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:
So why this is failing to work is still a mystery.
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();
...
}

Creating a navigation menu item in Orchard

I have written an Orchard Module and would like an item to appear in a Navigation list when the module is Enabled. Ideally, I would like to be able to remove the item when the Module is disabled.
Where should I hook into to for when the module is enabled and disabled?
How do I programmatically add a menu item to an already existing Navigation?
You can implement the IMenuProvider interface for this. An example implementation might look something like this:
namespace Orchard.Bar {
public class SuperMenuProvider : IMenuProvider {
private readonly IOrchardServices _orchardServices;
public SuperMenuProvider(IOrchardServices orchardServices) {
_orchardServices = orchardServices;
T = NullLocalizer.Instance;
}
public Localizer T { get; set; }
public void GetMenu(IContent menu, NavigationBuilder builder) {
string position = "10";
builder.Add(T("Foo"), position, item => item.Url("http://foo.com").AddClass("someClass"));
builder.Add(T("Bar"), position + ".1", item => item.Action("Index", "Foo", new { area = "Orchard.Bar" }));
if (_orchardServices.Authorizer.Authorize(Orchard.Security.StandardPermissions.AccessAdminPanel)) {
builder.Add(T("Secure FooBar"), position + ".2", item => item.Action("Index", "Secure", new { area = "Orchard.Bar" }));
}
}
}
}
This will appear on all menus on the front end. You may want to put in the name of the menu you are targeting if you know for sure that is what it is called (default in Orchard is "Main Menu", people don't generally change it to be honest). This could be a little brittle, so you may want it customizable, either with a site setting or you could create a part that you attach to the menu content type that lets the admin specify whether to show your menu items on the said menu.
An alternative approach would be to hook into the modules enable event using IFeatureEventHandler and using the content manager to create menu items with urls and adding them to a specified Menu. I don't really recommend this approach; you lose control of the menu items (e.g. to update a url), they can be removed from the menu accidentally, you have to know the name of the Menu you are adding them to, you are more limited (cant do permissions checks etc.).
I assume you are talking about showing up on the front end. If you talking about the admin menu then check out pretty much any module for a file generally called AdminMenu.cs, plenty of examples :)
The question doesn't specify what the module does so I guess we're to assume that it creates a content type. In that case you have (at least) two options:
In the Content Type's Content Definition go to Add Parts and add the Menu part. This will allow you to add a content item to a menu from the item's content editor.
From the Navigation menu choose the appropriate Menu and select add a Content Menu Item. Note that the content type must be set as "listable" in Content Definition in order for the items to be listed as a choice.
Disabling the module should remove the item from the navigation in either case.

Customizing Xamarin.Forms layouts

I'm building an Android and iOS app using Xamarin Forms.
What I'm simply trying to do is set a background drawable on my Android app for my ListView items. The root view of my ListView items are StackLayout's:
var listView = new ListView
{
ItemsSource = items,
ItemTemplate = new DataTemplate(() =>
{
return new ViewCell
{
View = new StackLayout(...)
};
}
};
I know I can access the native element by using a custom renderer:
public class MyEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (e.OldElement == null) {
var nativeEditText = (EditText)Control;
...
}
}
}
But I'm not sure how this would work for a StackLayout (or any other layout for that matter).
I first extended StackLayout:
public class ListViewItem : StackLayout
{
}
And I read somewhere that layouts use the VisualElementRenderer, so I tried the following:
public class ListViewItemRenderer : VisualElementRenderer<StackLayout>
{
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
// any way to access the native element?
}
}
But VisualElementRenderer does not seem to give me access to the native element.
So is there any way I can access the native elements of Layout elements? Or maybe there is a different way to simply set a background drawable on layouts within my Android app?
Even though I still don't know how to access the native element of a layout, the VisualElementRenderer has a method for setting the background drawable on Android (which was exactly what I needed). So I ended up with the following:
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.listViewItem));
}
I understand you want to hook into an existing Layout renderer and extending it to access the native element with extra capabilities like background image.
Eventually the support for background-image will be supported just like background-colour is, I imagine, across the Layout controls. It may be worth while waiting for this as I can't see why they wouldn't implement these in a later release.
In the mean time you would need something that would work and is quite easy to implement?
Creating the background drawable via inheriting the renderer from a Layout may not be the simplest of solutions therefore, although does have its advantages as you can then re-use easily with the extra functionality across all Layouts for an application.
In your code for ListViewItemRenderer, however, it is inheriting from a Xamarin.Forms control (you specified StackLayout) and have not specified a native, platform dependent, control to be the base for the layout control that would have to match the Xamarin.Forms platform dependent control used.
Each Renderer is tied to a native element. Layout controls will be no different than other custom native control renderers.
For a custom control, you will write a renderer something like the following (note I haven't specified a layout renderer as I haven't had a need to do this yet and am just going from past experience - but similar rules should apply to implementing a renderer for a layout as opposed to a custom control):-
// System.Windows.Controls.Grid in this case is the root native control for a WindowsPhone renderer of MyControl
public class MyControlRenderer : ViewRenderer<MyControlView, System.Windows.Controls.Grid>
There is a simpler approach, however to achieve what you want to do:-
The simpler approach would be instead of inheriting from the Stack Layout control, it would be better to inherit from Grid as the root of the control.
Then you can add an Image control to the Grid and also a Stack Layout for the same Grid Row and Column.
By doing the above you will be able to achieve a background-image across the entire listview item row.

Overriding editor template in theme affects admin view

I created a form using the CustomForms module and need to control the markup of the input fields I've included on the form (to add bootstrap specific classes). I added a view to my theme at the location /Views/EditorTemplates/Fields/Input.Edit.cshtml and that allowed me to update the markup for the input fields.
My problem is that the view in my theme is also being picked up in the admin views. I didn't expect this behavior but it's happening. I tried scoping the view override to the url (Input.Edit-url-contact.cshtml) and content type (Input.Edit-ContactRequest.cshtml) using the alternate naming conventions but they do not appear to work in this case.
Is there a way to scope the Input.Edit.cshtml view in my theme so it only applies to the front-end of the site? Or is there a better way to achieve what I'm trying to do?
I ended up working around this issue by implementing a shape table provider (based on Bertrand's suggestion) to specify different template names in my theme so they weren't picked up in the admin. Here's what it looks like:
public class EditorFieldShapeProvider : IShapeTableProvider
{
public void Discover(ShapeTableBuilder builder)
{
builder.Describe("EditorTemplate")
.OnDisplaying(displaying =>
{
var shape = displaying.Shape;
if (shape.ContentField is InputField) {
shape.TemplateName = "CustomInputField";
}
});
}
}
Just drop that class somewhere in your theme and create your view at /ThemeName/Views/EditorTemplates/CustomInputField.cshtml

Xpage Component using UIDialog, UIDialog does not render its children

I am trying to develope a component for my company wich should have an integrated dialog. Creating the component was easy until i hit the point with the Dialog. I want to use the com.ibm.xsp.extlib.component.dialog.UIDialog for my component because it has some nice features wich i want to use so creating my own dialog with a ClientSideDojo is not an option.
Normaly when adding a component to another i use component.getChildren().add(MyNewComp),but when i try this Code:
public class myComponentWithADialog extends UIComponentBase implements FacesComponent {
//...other Code...
public void buildContents(FacesContext context, FacesComponentBuilder builder)
throws FacesException {
UIDialog dialog = new UIDialog();
TypedUtil.getChildren(container).add(dialog);
dialog.setStyleClass("dlgUserPref");
dialog.setTitle("titelxyz");
dialog.setId("TagDialog");
UIPanelEx panel = new UIPanelEx();
panel.setTagName("div");
panel.setStyle("border:2px solid red;");
panel.setStyleClass("lotusList lotusTags lotusRelatedTags");
dialog.getChildren().add(panel);
this.getChildren.add(dialog);
}
//....
}
My Panel does not display inside the dialog when calling XSP.openDialog('dialogClientId') in my browser the dialog is shown but empty.
I already tried several other methods like dialog.getPopupContent.getChildren().add() but then i get the error: javax.faces.component.UIPanel incompatible with com.ibm.xsp.extlib.component.dialog.UIDialog$PopupContent.
Also i tried to find a solution on google but i only found a entry at openNTF from someone with the same problem but also without any solution.
Note: I also tried to 'inject' some content to a standard <xe:dialog> and to a <px:panel> inside the <xe:dialog> via a button with SSJS like keithstric does in his blog. Code:
var dialog:com.ibm.xsp.extlib.component.dialog.UIDialog =
getComponent('extlibdialog');
if(dialog.getChildren().size() > 0) {
dialog.getChildren().clear();
}
var TextField:com.ibm.xsp.component.xp.XspOutputText = new com.ibm.xsp.component.xp.XspOutputText();
TextField.setTitle("test");
TextField.setId("testTextField");
TextField.setValue("<p>This is the new Content</p>");
dialog.getChildren().add(TextField);
This code works fine for a standard <xp:panel> outside a dialog but not on the dialog itself or a panel inside it.
The dialogue is not pre - rendered when the page is loaded, but when you actually call for it in XSP.openDialog(...)
So you need to get your code run in that event (mobile now, can't check if it is exposed).
Plan B: do use a Dojo dialogue that is backed by a rest control, so you can transport whatever data you need back and forth.
A word of caution: popup dialogs are a UI concept transplanted from desktop apps. They are alien to Web apps and mostly not working in mobile. Consider and Inline form instead (or a wizard)

Resources