EPiServer Web Controls | Frederik Vig

Posts tagged ‘EPiServer web controls’

EPiServer web controls: MenuList and PageTree

Aug16August 16, 2009, 16:04

Both the MenuList and PageTree control are controls that you’ll come across when building the navigation for your EPiServer site. Usually you’ll start out with the MenuList for the main navigation, and use the PageTree for the sub navigation.

MenuList

Templates

A few of its public properties.

EnableVisibleInMenu – show pages that have visible in menu unchecked
EvaluateHasChildren
ExpandAll
ExpandNodeIfStartPage
NumberOfLevels
PageLink
PageLinkProperty
RequiredAccess
ShowRootPage
SortBy
SortDirection
SortOrder

Examples

By default the MenuList will filter out pages that are not published or that the user has no access to. It will also filter out pages where the property visible in menu is unchecked.

<EPiServer:MenuList runat="server" ID="MainMenu">
    <HeaderTemplate><ul id="MainMenu"></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <SelectedTemplate><li><EPiServer:Property runat="server" CssClass="active" PropertyName="PageLink" /></li></SelectedTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:MenuList>

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
 
    MainMenu.PageLink = PageReference.StartPage;
    MainMenu.DataBind();
}

Markup rendered

<ul id="MainMenu">
<li><a href="/en/News/">News</a></li>
<li><a href="/en/Events/">Events</a></li>
<li><a href="/en/Documents/">Documents</a></li>
<li><a class="active" href="/en/Examples/">Examples</a></li>
</ul>

Separator template

I don’t use the separator template often. However, sometimes I need to add a class to distinguish the first li element.

<ul id="MainMenu">
<li class="first"><a href="/en/News/">News</a></li>
<li><a href="/en/Events/">Events</a></li>
<li><a href="/en/Documents/">Documents</a></li>
<li><a class="active" href="/en/Examples/">Examples</a></li>
</ul>

To do this I use a combination of the header and separator template.

<EPiServer:MenuList runat="server" ID="MainMenu">
    <HeaderTemplate><ul id="MainMenu"><li class="first"></HeaderTemplate>
    <ItemTemplate><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <SelectedTemplate><EPiServer:Property runat="server" CssClass="active" PropertyName="PageLink" /></li></SelectedTemplate>
    <SeparatorTemplate><li></SeparatorTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:MenuList>

Sometimes you need to add a few span tags inside the anchors. Mostly just for adding more background images. When this happens you cannot use the EPiServer:Property control for this. Instead you use a combination of regular HTML and data binding syntax.

 <ItemTemplate>
	<li>
		<a href="<%# Container.CurrentPage.LinkURL %>">
			<span class="l"></span><span class="c"><%# Container.CurrentPage.Property["PageName"].ToWebString() %></span><span class="r"></span>
		</a>
	</li>
</ItemTemplate>

PageTree

The PageTree control is the one I use when I need a more complex navigation than a simple list. It has a lot of templates that help with most things I come a cross. However it can be a little hard at first to know which of the templates to use.

Both MenuList and PageTree inherit from PageTreeData, which means they have almost identical public properties. They also share the same default filtering settings.

I think the easiest way to show you what the different templates do is with an example.

<EPiServer:PageTree ShowRootPage="false" runat="server" id="SubMenu">
<HeaderTemplate>
    <div id="SubMenu"><!-- HeaderTemplate -->
</HeaderTemplate>
	<IndentTemplate>
		<ul> <!-- IndentTemplate -->
	</IndentTemplate>
 
	<ItemHeaderTemplate>
		<li> <!-- ItemHeaderTemplate -->
	</ItemHeaderTemplate>
 
	<ItemTemplate>
		<EPiServer:Property PropertyName="PageLink" runat="server" /> <!-- ItemTemplate -->
	</ItemTemplate>
 
	<ExpandedItemTemplate>
	    <EPiServer:Property runat="server" PropertyName="PageLink" CssClass="ExpandedItemTemplate" /> <!-- ExpandedItemTemplate -->
	</ExpandedItemTemplate>
 
	<ExpandedTopTemplate>
	    <EPiServer:Property runat="server" PropertyName="PageLink" CssClass="ExpandedTopTemplate" /> <!-- ExpandedTopTemplate -->
	</ExpandedTopTemplate>
 
	<SelectedItemTemplate>
	            <EPiServer:Property CssClass="SelectedItemTemplate" PropertyName="PageName" runat="server" /> <!-- SelectedItemTemplate -->
	</SelectedItemTemplate>
 
	<SelectedExpandedItemTemplate>
	    <EPiServer:Property runat="server" PropertyName="PageLink" CssClass="SelectedExpandedItemTemplate" /> <!-- SelectedExpandedItemTemplate -->
	</SelectedExpandedItemTemplate>
 
	<SelectedExpandedTopTemplate>
	    <EPiServer:Property runat="server" PropertyName="PageLink" CssClass="SelectedExpandedTopTemplate" /> <!-- SelectedExpandedTopTemplate -->
	</SelectedExpandedTopTemplate>
 
	<ItemFooterTemplate>
			</li> <!-- ItemFooterTemplate -->
	</ItemFooterTemplate>
 
	<UnindentTemplate>
		</ul> <!-- UnindentTemplate -->
	</UnindentTemplate>
	<FooterTemplate>
	    </div> <!-- FooterTemplate -->
	</FooterTemplate>
</EPiServer:PageTree>

To connect our MainMenu (MenuList) with our newly created SubMenu (PageTree), we’ll use MenuLists OpenTopPage property (returns a PageReference to the open top page).

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
 
	SubMenu.PageLink = MenuList.OpenTopPage;
	SubMenu.DataBind();
}

<div id="SubMenu"><!-- HeaderTemplate -->
	<ul> <!-- IndentTemplate -->
		<li> <!-- ItemHeaderTemplate -->
			<a href="/en/Examples/File-explorer/">File Explorer</a> <!-- ItemTemplate -->
		</li> <!-- ItemFooterTemplate -->
		<li> <!-- ItemHeaderTemplate -->
			<a href="/en/Examples/Registration/">Registration</a> <!-- ItemTemplate -->
		</li> <!-- ItemFooterTemplate -->
		<li> <!-- ItemHeaderTemplate -->
			<a href="/en/Examples/Subscribe/">Subscribe</a> <!-- ItemTemplate -->
		</li> <!-- ItemFooterTemplate -->
		<li> <!-- ItemHeaderTemplate -->
			<a href="/en/Examples/Demo/">Demo</a> <!-- ItemTemplate -->
		</li> <!-- ItemFooterTemplate -->
		<li> <!-- ItemHeaderTemplate -->
			<a href="/en/Examples/Search/">Search</a> <!-- ItemTemplate -->	
		<li> <!-- ItemHeaderTemplate -->
			<a class="ExpandedTopTemplate" href="/en/Examples/Contact/">Contact</a> <!-- ExpandedTopTemplate -->
			<ul> <!-- IndentTemplate -->
				<li> <!-- ItemHeaderTemplate -->
					<a class="ExpandedItemTemplate" href="/en/Examples/Contact/Test/">Test</a> <!-- ExpandedItemTemplate -->
					<ul> <!-- IndentTemplate -->
						<li> <!-- ItemHeaderTemplate -->
							<a class="SelectedExpandedItemTemplate" href="/en/Examples/Contact/Test/Test2/">Test2</a> <!-- SelectedExpandedItemTemplate -->
						</li> <!-- ItemFooterTemplate -->
					</ul> <!-- UnindentTemplate -->
				</li> <!-- ItemFooterTemplate -->
			</ul> <!-- UnindentTemplate -->
		</li> <!-- ItemFooterTemplate -->
	</ul> <!-- UnindentTemplate -->
</div> <!-- FooterTemplate -->

I recommend clicking around a little to see when the different selected templates kick in.

Other resources

EPiServer web controls: NewsList

Jul25July 25, 2009, 14:43

3 Comments

The NewsList control differs from controls like the PageList, with its template options. It has four templates for the first four items. Which makes it good to use in situations where you need to have different code/markup for the first pages.

Templates

The properties are the same as with the PageList class (they both inherit from PageListData).

The NewsList is per default sorted by PageStartPublish with the newest at the top.

MaxCount – how many PageData objects (EPiServer pages)
PageLink – root page to get children from
PageLinkProperty – page property, gets the children of that page
PagesPerPagingItem – when paging is enabled, how many PageData objects per page
Paging – enable paging
PublichedStatus – takes a PagePublishedStatus enum. Default is published.
RequiredAccess – takes an AccessLevel enum. Default is read.
SkipCount – skip the first x pages. Useful when doing something else with the first x number of pages
SortBy – sort after an EPiServer property
SortDirection – takes a FilterSortDirection enum (remember to add using EPiServer.Filters)
SortOrder – takes a FilterSortOrder enum

Example

<EPiServer:NewsList runat="server" ID="News">
	<HeaderTemplate>
		<div id="Wrapper">
	</HeaderTemplate>
	<FirstNewsTemplate>
		<div id="MainNews">
			<h2><EPiServer:Property runat="server" PropertyName="PageLink" /></h2>
			<%# Container.CurrentPage.GetMainNewsImage() %><p><%# Container.CurrentPage.GetIntroText(350) %></p> 
		</div>
	</FirstNewsTemplate>
	<SecondNewsTemplate>
		<ul id="News"><li>
		<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li>
	</SecondNewsTemplate>
	<ThirdNewsTemplate>
		<li>
			<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li>            
	</ThirdNewsTemplate>
	<FourthNewsTemplate>
		<li>
			<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li></ul>
		<div id="NewsArchive"><h3>Archive</h3><ul>            
	</FourthNewsTemplate>
	<NewsTemplate>
		<li>
			<EPiServer:Property runat="server" PropertyName="PageLink" />
		</li>
	</NewsTemplate>
	<FooterTemplate></ul></div></div></FooterTemplate>
</EPiServer:NewsList>

As you can see I’m using a few extension methods (GetIntroText, GetNewsImage, GetMainNewsImage):

public static string GetIntroText(this PageData pageData, int maxLength)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	var text = pageData["MainIntro"] as string;
	if (!string.IsNullOrEmpty(text))
	{
		return TextIndexer.StripHtml(text, maxLength);
	}
 
	text = pageData["MainBody"] as string;
 
	if (string.IsNullOrEmpty(text))
	{
		return string.Empty;
	}
 
	//If the MainBody contains DynamicContents, replace those with an empty string
	var regexPattern = new StringBuilder(@"<span[\s\W\w]*?classid=""");
	regexPattern.Append(DynamicContentFactory.Instance.DynamicContentId.ToString());
	regexPattern.Append(@"""[\s\W\w]*?</span>");
	text = Regex.Replace(text, regexPattern.ToString(), string.Empty, RegexOptions.IgnoreCase | RegexOptions.Multiline);
 
	return TextIndexer.StripHtml(text, maxLength);
}
 
public static string GetMainNewsImage(this PageData pageData)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	if (pageData.IsValue("MainNewsImage"))
	{
		string altText = pageData["MainNewsImageAlt"] as string ?? pageData.PageName;
		return string.Format(@"<img src=""{0}"" alt=""{1}"" />", pageData["MainNewsImage"], altText);    
	}
 
	return string.Empty;
}
 
public static string GetNewsImage(this PageData pageData)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	if (pageData.IsValue("NewsImage"))
	{
		string altText = pageData["NewsImageAlt"] as string ?? pageData.PageName;
		return string.Format(@"<img src=""{0}"" alt=""{1}"" />", pageData["NewsImage"], altText);
	}
 
	return string.Empty;
}

You also have to add <%@ Import Namespace="EPiServer.Templates.Util"%> (replace it with your namespace for your extensions class) to your web form.

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
	if (IsValue("NewsContainerPage"))
	{
		News.PageLink = PageReference.Parse(CurrentPage["NewsContainerPage"].ToString());
		News.DataBind();
	}
}

HTML markup rendered

<div id="Wrapper">   
	<div id="MainNews">
		<h2><a href="/en/News/In-nunc-eros1/">News1</a></h2>
		<img src="http://dummyimage.com/200x150" alt="News1" /><p>Nullam ut lorem augue. Duis id erat at felis blandit porttitor sit amet ac ligula. Integer enim tortor, sagittis tempus imperdiet in, dignissim vel orci. Ut id metus massa. Praesent at metus vel lorem consequat varius. Sed viverra est sit amet eros ultricies imperdiet. Aenean sit amet metus tortor. Donec rutrum sagittis mi, et consequat orci fri...</p> 
	</div>
 
	<ul id="News">
		<li>
			<h3><a href="/en/News/In-nunc-eros2/">News2</a></h3>
			<span class="date">12.11.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News2" /><p>Donec tincidunt erat sed erat lobortis sed molestie dolor placerat. Integer volutpat dictum ante eu semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeo...</p> 
		</li>
 
		<li>
			<h3><a href="/en/News/In-nunc-eros3/">News3</a></h3>
			<span class="date">12.10.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News3" /><p>Fusce libero sem, tempor in commodo sit amet, feugiat id augue. Duis at nunc libero. Phasellus dui tortor, iaculis ac sollicitudin at, dignissim vitae lectus. Nulla facilisi. Vivamus ut porttitor l...</p> 
		</li>            
 
		<li>
			<h3><a href="/en/News/In-nunc-eros4/">News4</a></h3>
			<span class="date">12.09.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News4" /><p>Phasellus mi tellus, imperdiet eu semper ut, varius ut nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam gravida, neque bibendum dapibus malesuada, ...</p> 
		</li>
	</ul>
	<div id="NewsArchive">
		<h3>Archive</h3>
		<ul>            
			<li>
				<a href="/en/News/In-nunc-eros/">News5</a>
			</li>
			<li>
				<a href="/en/News/Lorem-ipsum-dolor/">News6</a>
			</li>
		</ul>
	</div>
</div>

Now with a little CSS we can do a lot of cool things to the layout.

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
 
p {
	float: left;
	margin-top: 0;
}
 
img {
	float: left;
	margin-right: 1em; 
}
 
#MainNews img {
	width: 17%;
}
 
#News img {
	width: 26%;
}
 
#News p {
	width: 62%;
}
 
#MainNews p {
	width: 73%;
}
 
.date {
	display: block;
	font-size: 0.8em;
	margin-bottom: 0.3em;
}
 
#News {
	clear: left;
}
 
#News li {
	float: left;
	width: 33%;
}
 
#NewsArchive {
	clear: left;
}
 
#NewsArchive ul {
	padding: 1em;
	list-style: square inside
}

Result

EPiServer web controls: PageList

Jul20July 20, 2009, 17:53

4 Comments

The PageList is very similar to other data controls you’re familiar with like the Repeater. It has a few cool built in features that make it easier to use in certain scenarios. For instance, you can easily filter the data and add paging to it.

Below are the template options it offers.

A nice blog post explaining how to create your own ItemDataBound template (like the Repeater and Listview have): EPiServer:PageList with ItemDataBound.

A few of the most used public properties of the PageList class.

MaxCount – how many PageData objects (EPiServer pages)
PageLink – root page to get children from
PageLinkProperty – page property, gets the children of that page
PagesPerPagingItem – when paging is enabled, how many PageData objects per page
Paging – enable paging
PublichedStatus – takes a PagePublishedStatus enum. Default is published.
RequiredAccess – takes an AccessLevel enum. Default is read.
SkipCount – skip the first x pages. Useful when doing something else with the first x number of pages
SortBy – sort after an EPiServer property
SortDirection – takes a FilterSortDirection enum (remember to add using EPiServer.Filters)
SortOrder – takes a FilterSortOrder enum

The SortOrder is by default set after the container pages Sort order.

For reference, this is a build in EPiServer property called PageChildOrderRule.

Examples

Simply listing all the child pages of the start page

<EPiServer:PageList runat="server" ID="MyPageList">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:PageList>

protected override void OnLoad(System.EventArgs e)
{
    base.OnLoad(e);
    this.MyPageList.PageLink = PageReference.StartPage;
}

With paging

<EPiServer:PageList runat="server" ID="MyPageList" Paging="true" PagesPerPagingItem="10">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:PageList>

Paging with the EPiServer PageList control

The HTML markup rendered is bad.

<div class="PagingContainer">
	<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID3" class="SelectedPagingItem" title="Current page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID3','')">1</a><span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID4" class="UnselectedPagingItem" title="Page 2" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID4','')">2</a>
<span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID5" class="UnselectedPagingItem" title="Next page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID5','')">></a>
<span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID6" class="UnselectedPagingItem" title="Last page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID6','')">»</a>
</div>

The links won’t work without JavaScript (users without JavaScript enabled, like search engines, won’t be able to get to the content). For a solution on this see my post: Creating a Custom EPiServer Paging Control.

Filtering the data

The PageList has a filter event you can use to filter the data. In this example we’re filtering out all the pages that do not have a PageName that starts with the letter A

private void MyPageList_Filter(object sender, FilterEventArgs e)
{
    var pages = e.Pages;
 
    for (int i = pages.Count - 1; i > -1; i--)
    {
	if (!pages[i].PageName.ToUpper().StartsWith("A"))
	{
	    pages.RemoveAt(i);
	}
    }
}

And then you need to assign the event to the event method.

this.MyPageList.Filter += new EPiServer.Web.WebControls.FilterEventHandler(MyPageList_Filter);

EPiServer web controls: Property

Jul5July 5, 2009, 14:53

8 Comments

In this post we’ll take a look at the EPiServer Property web control, which is one of the most used of 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>

Frederik Vig – ASP.NET developer

Follow me

EPiServer web controls: MenuList and PageTree

MenuList

Templates

Examples

Markup rendered

Separator template

PageTree

Other resources

Other posts in this series

EPiServer web controls: NewsList

Templates

Example

HTML markup rendered

Result

Other posts in this series

EPiServer web controls: PageList

Examples

Simply listing all the child pages of the start page

With paging

Filtering the data

Other posts in this series

EPiServer web controls: Property

Properties that render a span

Category selection

Date/Time

Dynamic list (multiple options)

Dynamic list (one option)

Floating point number

Integer

Language

Page language (multiple options)

Page language (one option)

Page Type

Property on current page

Selected/not selected

Sort order for files

Sort order for pages

System language

VirtualLink

WebPart

Weekday

Div

XHTML string (>255)

Long string (>255)

Link

URL to document

URL to image

URL to page/external address

Page

Other

Frame

Link collection

Password

XForms form

Change default rendering

Good to know

DisplayMissingMessage=”false”

PageLinkProperty property

PageLink property

EPiServer Property inside a templated control

Other posts in this series

Series

Recent Posts

Archives

Categories

Pages