Kentico - Bynder integration - asp.net-mvc-5

I'm using Kentico 13 .NET Core and want to integrate with Bynder
https://github.com/Kentico/xperience-module-bynder
https://www.kentico.com/discover/blog/powerful-integrations-kentico-xperience-13-refresh
It works fine with the page types and I can see the new form control under the form control selection but how do I use it in a widget in the .NET core MVC app?
Ex:
I want to replace this UrlSelector component with the Bynder component. How do I do that?
[EditingComponent(UrlSelector.IDENTIFIER, Order = 5, Label = "Image Slider Selector")]
[EditingComponentProperty(nameof(UrlSelectorProperties.Tabs), ContentSelectorTabs.Page)]
public string ImageSliderSelector { get; set; }

The "integration" is only with the page type selector. There are no other controls. You have to make those on your own. This would mean you'd need one for the CKEditor and the Froala editor as well.

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

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)

Custom Web property to refresh a webpart for 60 secs

I have a visual web part where in i want to refresh this webpart for every 60 secs. Can any one give me an example of building a custom webpart property . This should be similar like OOB Webpart AJAx options.
Thanks,
Sandy
Something like this would suffice.
http://mmman.itgroove.net/2011/05/adding-an-auto-refresh-content-editor-web-part/
You can register the javascript on the page several ways.
Personally i would put this in the content editor web part and update the time as and when you need.
The below code is for a web part property.
[WebBrowsable(true)]
[WebDisplayName("Message")]
[WebDescription("Message to display to users")]
[Personalizable(PersonalizationScope.User)]
[Category("Message Configuration")]
public string Message
{
get; set;
}
You might also want to look in to the updatepanel control.
http://msdn.microsoft.com/en-us/library/bb386454(v=vs.100).aspx
Hope this helps

Name of control for toggle boxes in sharepoint editor part

I'm trying to modify the EditorPart controller for my web part. Basically what I want is to have my custom controls inside a box like the standard properties that can toggle between visible and hidden.
I've been googling for a while, but I cannot seem to find an answer.
Just to clarify: I know I can use the Category property to accomplish this when adding web part properties directly to the web part, but I've extended the EditorPart controller and so I don't think I can simply add [Category("Feed settings")] to the TextBox and LiteralControls I'm creating (correct?).
What you'd need for a standard property is to mark it with the Category attribute:
[Category("My Category")]
public string FeedQuery { get; set; }
(You'll need to add the System.ComponentModel namespace to your class file).
For editor parts it is not so simple. It appears that you can't add them to the standard categories. It is possible to style the editor part to resemble the OOB panels as shown here

MVC 3 Layout and Controllers

I m building a MVC 3 applications. The application should be able to display a different layout according to the sub domaine (ex: customer1.mysite.com -> layout1; customer2.mysite.com -> layout2; etc...) it will have also a layout for mobile and IE 6.
I have seen that their is the _ViewStart.cshtml that I can leverage to do the logic to set the layout. But what I don't get is where is the controler for that? Should I write all the code in the view?
An other question with layout how to do you factor out the code for the common behaviours? Do you have a controler for that?
And a last one I have seen the concept of areas in asp.net MVC2 is it obsolete now that we have Razor?
Thank you for your help
Fred
This sounds like a good time to use ViewBag.
The idea is that during OnActionExecuting, you would look up the subdomain and shove it into the ViewBag. This can be done in a custom BaseController from which your other controllers inherit, or from an ActionFilter.
Then, in your _ViewStart, you can write a switch statement on ViewBag to control layout.
For example, here is an ActionFilter that will populate #ViewBag.Subdomain in any of your Razor views, including _ViewStart.cshtml.
public class AddSubdomainToViewDataAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var subdomain = filterContext.HttpContext.Request.Url.Authority.Split('.').First();
var controller = filterContext.Controller as Controller;
controller.ViewData.Add("Subdomain", subdomain);
}
}
Then, decorate your controllers with this new [AddSubdomainToViewData] attribute.
Finally, in _ViewStart.cshtml, do something like this:
#{
Layout = "~/Views/Shared/" + ((#ViewContext.ViewData["Subdomain"] as String) ?? String.Empty) + "_layout.cshtml";
}
This will use a different Razor layout for each subdomain.
While you could do this in the _ViewStart I think that a better way would be to write a custom view engine in which based on the user agent or the domain include a different layout. Then you would have common controllers and views, only the layout will differ.

Resources