Tweaks: Widgetize!

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

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.



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:



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:



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.



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



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



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



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.