EPiServer web controls: Property

Posted on July 5, 2009 by Frederik Vig in EPiServer

In this post we’ll take a look at the EPiServer Property web control, which is one of the most used EPiServer web controls.

You can find EPiServer Property’s properties here.
It is very likely that you’ve used it before, so I’m not gonna bore you with the basics. Instead I’ll focus on how this server control renders markup based on what property type you’re using.

To start with I have a simple web form page with one EPiServer Property control.

<EPiServer:Property runat="server" PropertyName="TestProperty" />

For the dynamic lists I added this to my web.config file under appSettings.

<add key="TestProperty" value="data1;datavalue1|data2;datavalue2"/>

Properties that render a span

Category selection

<span id="ctl02_ctl00_TestProperty">News,Event,Example</span>

Date/Time

<span>6/28/2009 8:00:00 PM</span>

Dynamic list (multiple options)

<span>datavalue1,datavalue2</span>

Dynamic list (one option)

<span>datavalue1</span>

Floating point number

<span>34</span>

Integer

<span>34</span>

Language

<span>en</span>

Renders a span with the language code

Page language (multiple options)

<span>en,sv</span>

Page language (one option)

<span>en</span>

Page Type

<span>3</span>

Property on current page

<span>TestProperty</span>

Selected/not selected

<span>True</span>

If not selected an empty span is rendered

Sort order for files

<span>1</span>

Sort order for pages

<span>According to creation date (latest first)</span>

System language

<span>en</span>

VirtualLink

<span>some text</span>

WebPart

 

Weekday

<span>1</span>

If you select more than one it adds the key values together

Div

XHTML string (>255)

<div>
	<p>Some text...</p>
</div>

Long string (>255)

<div>
	<p>Some text...</p>
</div>

Link

URL to document

<a href="/Documents/Document.txt">/Documents/Document.txt</a>

URL to image

<a href="/Global/LogoTypes/logo.png">/Global/LogoTypes/logo.png</a>

URL to page/external address

<a href="http://www.frederikvig.com">http://www.frederikvig.com</a>

Internal and external pages, documents and email address render exactly like the LinkCollection except that its not inside an unordered list.

Page

<a href="/en/News/">News</a>

Other

Frame

_blank

Notice that it only renders the value and not any span or div around it.

Link collection

<ul>
<li><a href="http://www.frederikvig.com">http://www.frederikvig.com</a></li>
<li><a href="/en/News/">News</a></li>
<li><a href="mailto:frederikvig@hotmail.com" target="null">frederikvig@hotmail.com</a></li>
<li><a href="/Documents/Document.txt?epslanguage=en">Document.txt</a></li>
</ul>

The first is a link to an external website, the next is an EPiServer page, third is an email address and the last a document.

Password

<div class="">
	Enter password<br />
	<input name="ctl02$ctl00$ctl00$Password" type="password" maxlength="255" size="50"
	    id="ctl02_ctl00_ctl00_Password" class="passwordfield" value="" /><br />
	Repeat password<br />
	<input name="ctl02$ctl00$ctl00$PasswordVerify" type="password" maxlength="255" size="50"
	    id="ctl02_ctl00_ctl00_PasswordVerify" class="passwordfield" value="" /></div>
</div>

XForms form

<table id="id_matrix">
<tbody>
    <tr>
	<td valign="top">
	    <label for="ctl02_ctl00_ctl00_Name">
		Your name:</label><input class="value" title="Your name" id="ctl02_ctl00_ctl00_Name"
		    name="ctl02$ctl00$ctl00$Name" value="" /><span id="ctl02_ctl00_ctl00_Namerequiredvalidator"
			class="xformvalidator" style="display: none;">*</span>
	</td>
    </tr>
    <tr>
	<td valign="top">
	    <label for="ctl02_ctl00_ctl00_Email">
		Your e-mail address:</label><input class="value" title="Your e-mail address" id="ctl02_ctl00_ctl00_Email"
		    name="ctl02$ctl00$ctl00$Email" value="" /><span id="ctl02_ctl00_ctl00_Emailregexvalidator"
			class="xformvalidator" style="display: none;">*</span><span id="ctl02_ctl00_ctl00_Emailrequiredvalidator"
			    class="xformvalidator" style="display: none;">*</span>
	</td>
    </tr>
    <tr>
	<td valign="top">
	    <label for="ctl02_ctl00_ctl00_Message">
		Your message:</label><textarea class="textbox" title="Enter your messgage here" id="ctl02_ctl00_ctl00_Message"
		    name="ctl02$ctl00$ctl00$Message" cols="20" rows="2"></textarea><span id="ctl02_ctl00_ctl00_Messagerequiredvalidator"
			class="xformvalidator" style="display: none;">*</span>
	</td>
    </tr>
    <tr>
	<td valign="top">
	    <input type="submit" value="Send" name="ctl02$ctl00$ctl00$ctl00" class="button" title="Send you message"
		onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl02$ctl00$ctl00$ctl00&quot;, &quot;&quot;, true, &quot;XForm&quot;, &quot;&quot;, false, false))" />
	</td>
    </tr>
</tbody>
</table>

Plus all the JavaScript for validation…

Change default rendering

Sometimes you might want to change the default rendering of the EPiServer Property Control.

Mari and Steve have both blogged about methods to change the default rendering of the EPiServer Property. But the method I like the most is Anders’ PropertyAdapters which extends the EPiServer Property and lets you use 4 more properties (Format, Remove, Text and Translate)

Good to know

DisplayMissingMessage=”false”

When you have no property with that name you will get this error message
[Error: No property 'TestProperty'.]

To not render this error message you can set the DisplayMissingMessage property to false

<EPiServer:Property runat="server" PropertyName="TestProperty" DisplayMissingMessage="false" />

PageLinkProperty property

If you have a property on your page of type Page and would like to get the content of one of that pages properties you can set the PageLinkProperty to the name of your Page property.

<EPiServer:Property runat="server" PropertyName="TestProperty" PageLinkProperty="MyPageProperty" />

PageLink property

I usually use the the start page for storing some common properties, instead of using dynamic properties (which require much more resources). Say we have a property for referencing the sitemap page on the start page, and need to render a link to the sitemap page. We can simply do something like this.

        <EPiServer:Property runat="server" PropertyName="SitemapPage" ID="Sitemap" />
protected void Page_Load(object sender, EventArgs e)
{
    Sitemap.PageLink = PageReference.StartPage;
}

EPiServer Property inside a templated control

Another interesting thing is that if you’re using the EPiServer Property control inside a templated control, like the PageList or even a regular Repeater or the ListView control, it will use the PageData object that it is currently on (when data binding).

<asp:Repeater runat="server" ID="rptSections">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

If you bind a PageDataCollection to it, it will render something like this.

<ul>
	<li><a href="/en/News/">News</a></li>
	<li><a href="/en/Events/">Events</a></li>
	<li><a href="/en/Rss/">RSS</a></li>
	<li><a href="/en/Documents/">Documents</a></li>
	<li><a href="/en/Examples/">Examples</a></li>
</ul>

Other posts in this series

Related Posts: