Add wrapper to CMSWebPartZone only if it contains content

Tracey Penberthy asked on September 4, 2017 17:07

Hiah

I have a Layout Web Part (CMSAbstractLayoutWebPart) that contains a web part zone (CMSWebPartZone).

I would like to wrap the web part zone with a class ONLY if it contains content.

<div class='widget-wrapper'>
Widget content here
</div>

I noticed that CMSWebPartZone has a CssClass property but if I try to set it like so I get errors on my page

CMSWebPartZone contentZone = AddZone(this.ID + "_jumpToContentZone", "Jump To Content Zone");
contentZone.CssClass = "TRACEY";

How can I achieve this?

Many Thanks Tracey

cmsabstractlayoutwebpart cmswebpartzone

Correct Answer

Tracey Penberthy answered on September 12, 2017 16:00

We figured out how to achieve our goal by creating a ZoneHasContent function that detects whether a web part zone contains any content.

        public static bool ZoneHasContent(TreeNode currentNode, string zoneCodeName)
        {
            try
            { 
                if (currentNode != null)
                {
                    // Get Xml containing what zones and widgets..
                    string xml = currentNode.GetProperty("DocumentWebParts") as string;

                    if (String.IsNullOrEmpty(xml) == false)
                    {
                        // Parse it
                        XDocument xdocument = XDocument.Parse(xml);

                        // Get the web part zones
                        var webpartZones = xdocument.Descendants("webpartzone");

                        foreach (var zone in webpartZones)
                        {
                            // do we have a zone that matches the name of the one we passed in?
                            if (zone.Attribute("id").Value == zoneCodeName)
                            {
                                // If we do, does it contain any web parts?
                                if (zone.Descendants("webpart").Any())
                                    return true;
                            }
                        }
                    }
                }
            }
            catch(Exception ex)
            {
                EventLogProvider.LogException("ContentMacros", "ZoneHasContent", ex);
            }
            return false;
        }

And then in the layout web part you have

    string zoneID = this.ID + "_jumpToContentZone";
    bool zoneHasContent = ContentMacros.ZoneHasContent(DocumentContext.CurrentDocument, zoneID);

    if (zoneHasContent)
    {
        Append("<div class='widget-wrapper'>");
    }

    CMSWebPartZone contentZone = AddZone(zoneID, "Jump To Content Zone");

    if (zoneHasContent)
    {
        Append("</div>");
    }

0 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on September 4, 2017 17:25

Have you tried something like this?

CMSWebPartZone zone = new CMSWebPartZone();
if (zone.WebParts.Count > 0)
{
    zone.ContentBefore = "<div class=\"widget-wrapper\"";
    zone.ContentAfter = "</div>";
}

0 votesVote for this answer Mark as a Correct answer

Tracey Penberthy answered on September 4, 2017 17:42 (last edited on September 6, 2017 17:16)

Thanks Brenden

I tried that but couldn't work out how to then add the zone to the layout web part (AddZone() takes id and title strings and not a control).

I tried

CMSWebPartZone zone = new CMSWebPartZone();
zone.ID = this.ID + "_contentZone";
if (zone.WebParts.Count > 0)
{
    zone.ContentBefore = "<div class=\"widget-wrapper\">";
    zone.ContentAfter = "</div>";
}
AddZone(this.ID + "_contentZone", "Content Zone");

but the content before and after were not getting added and I suspect the ID reference did not marry the control with the new zone being created

I can set ContentBefore and ContentAfter like so but it adds the div even when there is no content in the web part zone

CMSWebPartZone contentZone = AddZone(this.ID + "jumpToContentZone", "Jump To Content Zone");
contentZone.SetValue("ContentBefore", "<div class='widget-wrapper'>");
contentZone.SetValue("ContentAfter", "</div>");

0 votesVote for this answer Mark as a Correct answer