| This is a Developer task |
Content list sample
The following example shows a desktop list where the filter uses ⅓ of the page and the result items use ⅔ of the page. On mobile, both use the full width of the available space, so they will render one after the other.
You may notice that the opening div of the body top template is closed in the body bottom template. This is because the templates are combined in the order explained [Link to above diagram] above to build the full content list template.
Body top template
<div class='grid'>Header template
<div class='col-xs-12 col-lg-4'>
<div class='search-filter'>
<label for="<DataListControl type="ControlId" control="searchListKeyword" params="normal" />">Keyword</label>
<DataListControl type="SearchKeywordInput" controlid="searchListKeyword" />
<DataListControl type="SearchTriggerNoJS" text="Search" />
</div>
</div>
<div class='col-xs-12 col-lg-8'>Item template
<div class="list-item-container">
<article>
<a href="<ItemData DataDefinition="Link" Template="default" />">
<h2 class="list-item-title">
<ItemData DataDefinition="OC Title" Template="OC Name If Empty" />
</h2>
<p>
<ItemData DataDefinition="OC Short Description" Template="default" />
</p>
</a>
</article>
</div>Footer template
</div>Empty template
<p class="no-item-text">
No results found. Please try searching again.
</p>Body bottom template
</div>RSS feed sample
The following example shows how to build a template for an RSS feed. You may have to build a few field templates to render the data in the expected format.
Body top template
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>City of Point Russell News Feed</title>
<language>en</language>
<link>http://pointrussell.opencities.com/feed.rss?listname=News%20RSS%20feed</link>
<description>City of Point Russell News</description>
<generator>City of Point Russell News</generator>
<managingEditor>team@opencities.com</managingEditor>
<webMaster>team@opencities.com</webMaster>
<atom:link href="http://pointrussell.opencities.com/feed.rss?listname=News%20RSS%20feed" rel="self" type="application/rss+xml" />Item template
<item>
<title><![CDATA[<ItemData DataDefinition="OC Title" Template="OC Name If Empty" />]]></title>
<link><![CDATA[<ItemData DataDefinition="Link" Template="default" />]]></link>
<guid><![CDATA[<ItemData DataDefinition="Link" Template="default" />]]></guid>
<pubDate><ItemData DataDefinition="Activate Date" Template="RSS date" /></pubDate>
<description><![CDATA[<ItemData DataDefinition="OC Short Description" Template="default" />]]></description>
</item>Body bottom template
</channel>
</rss>Create pagination for your content list
OpenCities provides a special device variable you can use to include pagination for your content list. Once you configure your content list to have a specific page size, please place the following code snippet in the footer template to render the pagination.
<DeviceVar var="OC DV Pagination" />You can create your own pagination control using the template parts available within the footer template. However, we recommend the use of the above code so the pagination for your list stays consistent with rest of your site.