Sign In

Blog

This tweak will allow you to create configured widgets from your configured web parts.

It works as follows. I have added a new option called "Widgetize!". The option is available when you click on the little arrow next to a web part in the design mode of a document.

widgetize.png

The "Widgetize!" button creates a new widget based on the selected web part. But that's not all! It not only copies the web part type but also copies all the filled in properties of the web part and adds it to the widget creating a nice little preconfigured building block.

If you go to the Widgets in Site Manager you can find the newly created widget:

widgets.png

By default the widgets name will be the same as the name you provided for the web part. You can see this by selecting the widget:

widget_edit.png

In the properties tab, notice that the default values for the attributes are all filled in and that the "Display attribute in the editing form" is unchecked. They are not visible because we do no want to bother the website editors with these properties. Of course feel free to tweak these to your desired setup.

widget_properties.png

The next step is to add the widget to the page:

add_widget.png

Hit OK and notice that all properties are hidden because they are already setup in the widget and do not have to be configured.

widget_dialog.png

Add the widget to the page and view the result below:

added_widget.png

Pretty cool huh!? In my opinion this tweak is a real time saver and I am looking forward to tweaking it some more to really get the most out of it.

If you would like to add this tweak to your Kentico CMS installation then follow the steps below:

Step 1: Download the following file and place it in the App_Code folder (e.g. ~/App_Code/Global/Dude).

Step 2: Locate the file: WebPartMenu.ascx in ~/CMSModules/PortalEngine/Controls/WebParts and add the following code:

line 84 - 91:
<cms:UIPlaceHolder ID="pnlUIWidgetize" runat="server" ModuleName="CMS.Content" ElementName="Design.Widgetize">
    <asp:Panel runat="server" ID="pnlWidgetize" CssClass="ItemLast">
        <asp:Panel runat="server" ID="pnlWidgetizePadding" CssClass="ItemPadding">
            <asp:Image runat="server" ID="imgWidgetize" CssClass="Icon" EnableViewState="false" />&nbsp;
            <asp:Label runat="server" ID="lblWidgetize" CssClass="Name" EnableViewState="false" Text="Widgetize" />
        </asp:Panel>
    </asp:Panel>
</cms:UIPlaceHolder>
line 135 - 137:
function ContextWidgetizeWebPart(definition) {
    WidgetizeWebPart(definition[0], definition[1], definition[2], definition[3]);
}
Step 3: Open the code behind of WebPartMenu.ascx and adjust it as follows:

line 20:
public partial class CMSModules_PortalEngine_Controls_WebParts_WebPartMenu : CMSAbstractPortalUserControl, IPostBackEventHandler
line 48 - 52:
// Widgetize
this.imgWidgetize.ImageUrl = GetImageUrl("CMSModules/CMS_PortalEngine/ContextMenu/Clonewidget.png");
this.lblWidgetize.Text = ResHelper.GetString("Widgetize!", culture);
this.imgWidgetize.AlternateText = this.lblWidgetize.Text;
this.pnlWidgetize.Attributes.Add("onclick", "ContextWidgetizeWebPart(GetContextMenuParameter('webPartMenu'));");
line 93 - 107:
/// <summary>
/// PreRender event handler
/// </summary>
protected override void OnPreRender(EventArgs e)
{
    // Prepare the widgetizer scripts

    string script = "function WidgetizeWebPart(webPartZoneId, webPartId, aliasPath, instanceGuid) {" +
                "setZone(webPartZoneId); setWebPart(webPartId); setAliasPath(aliasPath); setGuid(instanceGuid);" +
                Page.ClientScript.GetPostBackEventReference(this, "WidgetizeWebPart") +
            @"};";

    // Register the script
    ScriptHelper.RegisterClientScriptBlock(this, typeof(string), "Widgetizer", ScriptHelper.GetScript(script));
}
line 109 - 130:
/// <summary>
/// RaisePostBack event handler
/// </summary>
/// <param name="eventArgument"></param>
void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
    if ((eventArgument == null))
    {
        return;
    }

    if (PortalContext.ViewMode == ViewModeEnum.Design)
    {
        // Perform the action
        switch (eventArgument.ToLower())
        {
            case "widgetizewebpart":
                WidgetizeWebPart();
                break;
        }
    }
}
line 132 - 189:
private void WidgetizeWebPart()
{
    string webPartControlId = String.Empty;
    string zoneId = String.Empty;
    string aliasPath = String.Empty;
    Guid instanceGuid = Guid.Empty;

    // Get the web part control ID from the hiddenfield
    HiddenField hidSelectedWebPart = CMS.ExtendedControls.ControlsHelper.GetChildControl(Page, typeof(HiddenField), "hidSelectedWebPart") as HiddenField;
    if (hidSelectedWebPart != null)
    {
        webPartControlId = ValidationHelper.GetString(hidSelectedWebPart.Value, "");
    }

    // Get the selected zone ID from the hiddenfield
    HiddenField hidSelectedZone = CMS.ExtendedControls.ControlsHelper.GetChildControl(Page, typeof(HiddenField), "hidSelectedZone") as HiddenField;
    if (hidSelectedZone != null)
    {
        zoneId = ValidationHelper.GetString(hidSelectedZone.Value, "");
    }

    // Get the alias path from the hiddenfield
    HiddenField hidSelectedAliasPath = CMS.ExtendedControls.ControlsHelper.GetChildControl(Page, typeof(HiddenField), "hidSelectedAliasPath") as HiddenField;
    if (hidSelectedAliasPath != null)
    {
        aliasPath = ValidationHelper.GetString(hidSelectedAliasPath.Value, "");
    }

    // Get the instance guid from the hiddenfield
    HiddenField hidSelectedGuid = CMS.ExtendedControls.ControlsHelper.GetChildControl(Page, typeof(HiddenField), "hidSelectedGuid") as HiddenField;
    if (hidSelectedGuid != null)
    {
        instanceGuid = ValidationHelper.GetGuid(hidSelectedGuid.Value, Guid.Empty);
    }

     // Widgetize the web part
    if ((webPartControlId != "") && (zoneId != "") && (aliasPath != ""))
    {
        // Get source data
        PageInfo pi = CMSContext.CurrentPageInfo;
        if (pi != null)
        {
            // Get template instance
            PageTemplateInstance pti = DUDE.Widgetizer.GetTemplateInstanceForEditing(pi);
            if (pti != null)
            {
                // Get the web part instance
                WebPartInstance webPart = pti.GetWebPart(instanceGuid) ?? pti.GetWebPart(webPartControlId);
                
                // Get the web part info from the web part type
                WebPartInfo wpi = WebPartInfoProvider.GetWebPartInfo(webPart.WebPartType);

                // Create the widget
                DUDE.Widgetizer.CreateWidget(webPartControlId, wpi.WebPartID, webPart.Properties);
            }
        }
    }
}
Please note: this tweak is not fully tested and I cannot be liable for any defects or incompatibilities with Kentico CMS.
Posted: 28-06-2011 | 2 comments | Filed under: Web Parts, Widgets, Tweaks


The guys at Kentico released a first ctp version of the upcoming 6.0 version which is scheduled for this September. This version was offered to all the attendees of the UK and Irish partner conference. Although I did not attend this conference, I could not resist to download and play with it.
Posted: 28-04-2011 | 6 comments | Filed under: Web Parts, CTP, Ecommerce, Newsletter, Widgets, 60

Here is a quick tip that is useful if you work a lot with widgets in Kentico. You might know that macros are not allowed in the widgets editing form because of security reasons. Luckily for us developers there is a nice little workaround to enable macro resolving in widgets: Add the macro parameter as default value for the field and make sure to uncheck "Display attribute in the editing form". In the screenshot below you can see an example of this where the title querystring is used in the news lists where condition.
Posted: 08-11-2010 | 0 comments | Filed under: Tips and Tricks, Widgets, Macro

A couple of weeks ago, I posted a tip and trick on how to adjust the default properties of web parts and widgets. I wrote the post so that I could easily locate the xml files whenever I needed them. Since that time I have often used the post, but didn’t want to go to the actual files to find the id’s and types of the properties. That’s why I...
Posted: 31-08-2010 | 0 comments | Filed under: Web Parts, Widgets, Tips and Tricks

This tip and trick is something I find very useful when working with web parts and widgets. You are probably aware of the dialogs that you get when adding or modifying web parts and widgets. These dialogs consist out of default properties which apply to all web parts and widgets and some custom properties which can be set per web part and widget...
Posted: 11-08-2010 | 2 comments | Filed under: Web Parts, Widgets, Tips and Tricks

About me

Jeroen Furst 
  • Facebook
  • LinkedIn
  • RSS
  • Twitter

Kentico DevNet

IBL-Software

Sponsored links

Interview with Kentico

You have an old version of Adobe's Flash Player. Get the latest Flash player.
Kentico blogs and websites
Martin Hejtmanek - Kentico CTO
Thomas Robbins - Kentico product evangelist
Petr Vozak - Kentico team leader
Brian McKeiver - BizStream
Johnny Bubriski - Wakefly, Inc.
Bryan Soltis - Bit-Wizards
Kentico Developer - Reed Business Information
Kentico Solutions - Data, Inc.

My trees

Latest Kentico Knowledge Base Articles

Kentico Developer Posters

Kentico CMS 5.5 Macro Reference