sc:FieldRenderer and EnclosingTag

If you have a piece of content that requires a surrounding tag (like ‘h2’ around a heading, or ‘p’ around the contents of a multi-line text field), you can use ‘EnclosingTag’ on the FieldRenderer control; it will not display the enclosing tag if the field is empty.

<sc:FieldRenderer FieldName="Heading" EnclosingTag="h2" runat="server" />

Produces:

<h2>My heading content</h2>

Strangely, it does not exist on the more specialised controls, like sc:Text or sc:Link.

7 comments

    1. Likewise; I only found out about it very recently.

      I’ve seen custom controls that use templates, so that you aren’t restricted in the amount of surrounding markup, e.g.:

      <custom:FieldRenderer Field="Heading" runat="server">
          <HeaderTemplate><h1 class="nostyle"><span></HeaderTemplate>
          <FooterTemplate></span></h1></FooterTemplate>
      </custom:FieldRenderer>

      I would still find a control like that useful.

      1. I had to do something similar in the past — create ITemplates for controls — but not for a custom Sitecore Field/Web Control.

        What would you recommend to be a good paradigm for inserting a field’s value, if we were to use an ITemplate in a custom Field Control? For example, in an ASP.NET ListView, you can specify an ItemPlaceholderID — an ID of a container control for each DataItem of the LIstView’s Datasource.

      2. I was thinking of something like the following (please note: I have written this code in a basic text editor, not Visual Studio, and have not tested it):

            <sj:HtmlTagFieldControl ID="MyCustomFieldControl" FieldValueContainerID="myHeading" Field="My Field" runat="server">
        	<HtmlTemplate>
        		<asp:Panel ID="myPanel" CssClass="my-div" runat="server">
        			<h4 id="myHeading" class="my-heading" runat="server" />
        		</asp:Panel>
        	</HtmlTemplate>
            </sj:HtmlTagFieldControl>    
        
        
        PlaceHolder placeHolder = new PlaceHolder();
        
        private void InstantiateHtmlTemplate()
        {
        	if (HtmlTemplate != null)
        	{
        		HtmlTemplate.InstantiateIn(placeHolder);
        		PutFieldValueInContainer(placeHolder, FieldValueContainerID);
        	}  
        }
        
        private void PutFieldValueInContainer(Control parentControl, string containerControlID)
        {
        	Control containerControl = FindControlRecursive(parentControl, containerControlID);
        	
        	if(containerControl != null)
        	{
        		Literal litFieldValue = new Literal();
        		litFieldValue.Text = GetFieldValue();
        		containerControl.Controls.Add(litFieldValue);
        	}
        }
        
        private Control FindControlRecursive(Control parent, string descendantID)
        {
        	// TODO:  find the descendant control with the given ID,and return
        }
        
        private string GetFieldValue()
        {
        	// TODO:  return the field's value
        }
        

        With this code, I can avoid using a classic ASP-type context switch as was done in the post on Boro’s blog linked above.

  1. You can also use the Before and After properties to render generic HTML before, and after the control.

    <sc:FieldRenderer Before="Before” After=”After!” ID=”id1″ FieldName=”My Field” runat=”server” />

  2. Hi. Replying to an old but still relevant post. I didn’t know about this attribute either, and while useful it’s also very limited I’ve created a more generic Enclosure control that can display or hide ‘boilerplate’ html based on the output of any or all controls contained in it. For example:
    <my:Enclosure runat=”server”>

    Some content.

    Some content.

    </my:Enclosure>

    The divs and the lines with Some content will not render when My Field is empty.
    Hope you find it useful. Best regards,
    Matthijs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s