EPiServer web controls: Property

July 5, 2009, 14:53

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>

14 Comments

EPiServer web controls: NewsList | Frederik Vig - ASP.NET developer says:

July 25, 2009 at 14:43

[...] EPiServer web controls: Property [...]
EPiServer web controls: PageList | Frederik Vig - ASP.NET developer says:

July 25, 2009 at 14:46

[...] EPiServer web controls: Property [...]
EPiServer web controls: MenuList and PageTree | Frederik Vig - ASP.NET developer says:

August 16, 2009 at 16:04

[...] EPiServer web controls: Property [...]
Part 2: Creating a foundation – Create an EPiServer site from scratch | Frederik Vig - ASP.NET developer says:

December 7, 2009 at 13:17

[...] learn more about some of the techniques used in this code, I recommend checking out my blog posts: EPiServer web controls: Property and EPiServer web controls: MenuList and PageTree. <%@ Control Language="C#" [...]
Part 4: Creating the standard page – Create an EPiServer site from scratch | Frederik Vig - ASP.NET developer says:

December 13, 2009 at 01:04

[...] and everything inside it, into MainBody.ascx. Replace the text with the EPiServer Property control, and set the PropertyName to MainBody. Add a new extension method for getting the heading of the [...]
SreeRaghavendra says:

February 2, 2010 at 10:52

Great Post.

In case of Dynamic List,the property displays the value and not the Text .How do I access the selected text (without accessing from web.config).Is there any control which will fetch the same??
Frederik Vig says:

February 2, 2010 at 23:05

By display you mean in edit mode? Could you post the code you used in web.config under appSettings?
Visual Studio 2010 EPiServer Snippets | Frederik Vig - ASP.NET developer says:

February 11, 2010 at 18:38

[...] one of the first things I did was add the EPiServer Property web control to the snippet manager . This turned out to be very easy! So I continued on adding snippets for [...]
SreeRaghavendra says:

April 6, 2010 at 12:37

Sorry for the such a long delay for giving a reply….

In appSettings foreg if I have added

then in the View mode how do I view the “data2″ on the page If I have selected the same in the Edit Mode as currently it will show “datavalue2″ in View Mode.

In short by using Episerver Property Control I am able to access the value selected and not the Text.

Thanks in advance.
SreeRaghavendra says:

April 6, 2010 at 12:38

Oops forgot to paste the value of appsettings
SreeRaghavendra says:

April 6, 2010 at 12:40

Consider the same appsettings as displayed above for Dynamic list.
the settings are not getting pasted for some reasons
Frederik Vig says:

April 6, 2010 at 17:51

Hi SreeRaghavendra
You’re correct that the EPiServer Property Control will render the selected value. If you need the text, why not just put the text as value?

Hope this helps.

Frederik
SreeRaghavendra says:

April 29, 2010 at 08:53

Hi Frederik,

Ok that means the Text contents will only be visible to the Editor.
the value that he selects will be rendered on the web page.

So I think the only way to access this is by using a Dynamic Propety .
I was in a dillemma whether I am missing any EPiServer control which will display the Text of a Dynamic List property.
Thank you very very much for your reply.
Sorry for the late response.

Regards,
SreeRaghavendra
SreeRaghavendra says:

April 30, 2010 at 10:32

Hi Frederik

Oops it is not Dyynamic property.. It is Custom Property.

Regards,
S.K. SreeRaghavendra

Frederik Vig – ASP.NET developer

Follow me