How to Create an MVC Widget in Kentico 12 Page Builder - kentico

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

Related

How to add a New Action to the mobile App

Good day
Build 20.107.0026
I have created a New Action and want to add it to my Mobile app. Is it possible to add a custom action to a mobile screen? I have created the below action in the Appointment screen(FS300200)
namespace PX.Objects.FS
{
// Acuminator disable once PX1016 ExtensionDoesNotDeclareIsActiveMethod extension should be constantly active
public class AppointmentEntry_Extension : PXGraphExtension<AppointmentEntry>
{
#region Event Handlers
public PXAction<PX.Objects.FS.FSAppointment> DoWork;
[PXButton(CommitChanges = true)]
[PXUIField(DisplayName = "DoWork")]
protected void doWork()
{
}
#endregion
}
}
Mobile code below. If I want to add the button to the main menu; the 3 dots on the side do I use AppointmentRecords as the container?
update screen FS300200 {
update container "AppointmentRecords" {
add listAction "StartTravelAPICall" {
behavior = Void
displayName = "StartTravelAPICall"
}
}
}
The short answer is YES! The long answer depends in part on what version of Acumatica you are using. For the purpose of this answer, I'll assume you are in 2019R2 and already know how to add or edit a Mobile App screen in Acumatica. If not, the training guides referenced below should give you all the detailed information you need to accomplish your goal.
Manipulating the Mobile App screens/actions is relatively easy if the screen/action works in the browser interface. The T410 course material explains how to add an action in 2019R2. I don't work with Field Services, so I'll have to explain more generically as per the training guide.
First you must either add or edit the screen in the Mobile Application section of the Customization Project. (In your case, you want to Update the existing screen.) This will create a section of code in the customization project that looks like this:
As you can see, the original screen definition in the mobile app is shown on the right, and you will be updating the screen to add your action. You will need to add the appropriate container (not shown in your question) and then the action within that container.
To continue the answer, let's switch to the training guide example on page 12 of the T410 course updating the SO303000 screen. You can compare to your screen to see what needs to be changed.
add container "InvoiceSummary" {
# fields declaration
…
add recordAction "Save" {
behavior = Save
}
add recordAction "Cancel" {
behavior = Cancel
}
add containerAction "Insert" {
behavior = Create
}
add recordAction "ReleaseAction" {
syncLongOperation = true
behavior = Record
}
}
I believe your action would follow the ReleaseAction portion at the bottom of the example, and the need for syngLongOperation = true would depend on what your action is doing (i.e. if you need the action performed asynchronously).
Assuming your container is already defined in the page, which I suspect it is, let's instead look at the example for PO302000 on page 35. This example shows how to UPDATE a container to add your action.
update screen PO302000 {
update container "DocumentSummary" {
add recordAction "AddPOOrderLine" {
displayName = "Add PO Line"
behavior = Void
redirect = True
redirectToContainer = "AddPurchaseOrderLine$List"
}
}
}
That was a more complex action, but yours may be as simple as.
update screen FS300200 {
update container "ServiceOrderTypeLine" {
add listAction "DoWork" {
Behavior = Void
displayName = "Do Work"
}
}
}
If you need guidance on how to read the WDSL Schema to identify the container, etc. that training is found in T400 starting on Page 13.
I highly recommend reviewing both T400 and T410 if you are working with the mobile app as there is a lot more detail in those training guides than can be explained easily in a Stack Overflow post/answer.

Unable to Create New MVC Widget in Kentico 12

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
}
}
}

Custom View WIth Part Orchard

Anyone knows if there is anyway to show the build editor of an espefic part, inside a custom view.
I'm creating profesional, but not in the standard way orchard propose, I have a custom view, but that profesional has a DomicilioPart witch i created, that part has a driver with the overriden method BuildEditor. Is there any way of displaying that especific editor in my custom view?
You have to use the method _contentManager.BuildEditor(contentItem) to create the corresponding Edit template.
public ActionResult Example(int id) {
var ci = _contentManager.Get(id);
var editShape = _contentManaget.BuildEditor(ci);
// more code
viewModel.Edit = editShape;
return View(viewModel);
}
#Template
<div>#Display(Model.EditShape)</div>
This training module will teach you about the creation/edit and delete of ContentItems.

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