Make Umbraco fields disappear when null, using in-line XSLT

How can you make Umbraco fields disappear from your Content page when the field is 'null', or blank?

Example

You may setup a Contact page on your website. First, you create a Document Type called "Contact", and several elements:

Name, Type:Textstring, Required

Address Line 1, Type:Textstring, Required

Address Line 2, Type:Textstring, Optional

City, Type:Textstring, Required

State, Type:Textstring, Required

Postal Code, Type:Textstring, Required

Next, you create your template to show those fields:

Name: <umbraco:Item field="Name" runat="server"></umbraco:Item><br/>

Address: <umbraco:Item field="Address1" runat="server"></umbraco:Item><br/>

<umbraco:Item field="Address2" runat="server"></umbraco:Item><br/>

<umbraco:Item field="City" runat="server"></umbraco:Item>, 

<umbraco:Item field="State" runat="server"></umbraco:Item> 

<umbraco:Item field="Postal Code" runat="server"></umbraco:Item><br/>

The <br/> and other text at the end of some lines will format the HTML, so that the output looks like the following:

Name: Joe Doe

Address: 111 Park Place

Apartment #12C

Las Vegas, Nevada 89044

Problem

This is all fine, except that "Address Line 2" is optional. If the Umbraco User does not enter a second address line (perhaps they live in a house, rather than a flat), then there will be a blank line in the output, which looks poor:

Name: Joe Doe

Address: 111 Park Place

                                                                                             <----- WTF?

Las Vegas, Nevada 89044

This is because the Umbraco output will always present the line break "<br/>" after Address Line 2, regardless of whether there is data in that field.

So how can one make the Address Line 2 appear when the Property is populated with data, but remove the blank line when the Address Line 2 is left blank?

Solution

One way to do this is to use XSLT on the output. But since it is a small transformation, it is too much effort to create an entire separate XSLT file in the Developer section of Umbraco. Instead, some simple in-line XSLT is all that is required. Returning to the template:

Name: <umbraco:Item field="Name" runat="server"></umbraco:Item><br/>

Address: <umbraco:Item field="Address1" runat="server"></umbraco:Item><br/>

<umbraco:Item field="Address2" runat="server" xslt="concat({0},'&lt;br/&gt;')" 

	xsltDisableEscaping="true"></umbraco:Item><br/>

<umbraco:Item field="City" runat="server"></umbraco:Item><br/>,

<umbraco:Item field="State" runat="server"></umbraco:Item> 

<umbraco:Item field="Postal Code" runat="server"></umbraco:Item><br/>

The key is adding the

xslt="concat({0},'&lt;br/&gt;')"

and

xsltDisableEscaping="true"

elements to the Address Line 2  umbraco:Item.

The xslt 'concat' command (version 1.0), as defined in the XSLT function reference (http://www.w3schools.com/xpath/xpath_functions.asp), will append two strings together. The first part is the reference '{0}', which self-references the field (in this case, the value that lives in the "Address2" field). The second part is the equivelant HTML code for a line-break "<br/>". Notice that the characters < and > have been replaced by &lt; and &gt; - this is because XSL does not allow those characters in a string reference. Now the XSL will either show the entire Address Line 2 and the line break (in the case that the field is populated with data), or it will show neither the Address Line 2 nor the line break.

Finally, the xsltDisableEscaping="true" flag has been set. This will prevent the Microsoft XSL parser from displaying the HTML as standard text on the page, and then the browser can treat it as normal HTML code.

So now, the output will look like this, with no extra line space:

Name: Joe Doe

Address: 111 Park Place

Las Vegas, Nevada 89044

And if the user does enter the Address Line 2, the result will be:

Name: Joe Doe

Address: 111 Park Place

Apartment #12C

Las Vegas, Nevada 89044

Other Uses

If you insert an image into the template, then it will show only if the Umbraco User has uploaded an image to that field. If there is no image, the browser will show a Broken Image icon. Since this is ugly and unprofessional, one can use the same technique to display images, or not display anything if the Image hasn't been uploaded:

<umbraco:Item field="MyImage" runat="server"></umbraco:Item>

 will show a broken image icon (in Internet Explorer and some other browsers). To correct this, use the following:

<umbraco:Item field="MyImage" runat="server" 

xslt="concat('<img src="',{0},'"/>')" 

xsltDisableEscaping="true"></umbraco:Item>