Experience Notes
Website Toolkit
Project websites
Workshops
IW Jobs
E-BulletinDocument Actions
Creating a Plone Help Center like view
Learning how to create a Plone Help Center like view.
The Plone Help Center shows the most recent content in portlet like boxes, which gives you a pretty good insight whats happening in this area.
This code is heavily based on the PHC helpcenter_view.
Add a pagetemplate folder_boxed_view to your custom folder. Cut and
paste this code into it:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="here/main_template/macros/master"
i18n:domain="plone">
<head>
<title tal:content="here/title_or_id"> title </title>
<metal:block fill-slot="css_slot">
<style type="text/css" media="screen"
tal:content="string: @import url($portal_url/boxed_folder.css);"></style>
</metal:block>
</head>
<body>
<div metal:fill-slot="main">
<h1 tal:content="here/title_or_id" class="documentFirstHeading">
Title or id
</h1>
<div metal:use-macro="here/document_actions/macros/document_actions">
Document actions (print, sendto etc)
</div>
<tal:foldercontents define="folderContents python:here.getFolderListingFolderContents(suppressHiddenFiles=1)">
<div class="documentDescription"
tal:content="here/Description">
description
</div>
<div id="portal-searchbox" metal:define-macro="quick_search">
<form name="searchform"
action="search"
tal:attributes="action string:${here/absolute_url}/search" >
<fieldset style="float: right;">
<legend i18n:translate="bfv_doc_search">Search for ...</legend>
<label for="searchGadget" class="hiddenStructure" i18n:translate="text_search">Search</label>
<input id="searchGadget"
name="SearchableText"
type="text"
size="30"
value=""
alt="Search"
style="font-family: Verdana; font-size: 110%; margin-bottom: 3px; margin-right: 0; padding: 3px;"
title="Search"
accesskey="accesskeys-search"
i18n:attributes="alt accesskey title"
tal:attributes="value request/SearchableText|nothing;
tabindex tabindex/next" class="visibility:visible;" />
<input class="searchButton"
type="submit"
value="Search"
accesskey="accesskeys-search"
tal:attributes="tabindex tabindex/next"
i18n:attributes="value accesskey" /> <br/>
in
<select id="searchContext" name="path" style="font-family: Verdana; font-size: 100%;"
tal:define="path request/form/path|nothing;">
<!-- the path is hardcoded here change it according to the path of your site -->
<option value="/iwlearn"
tal:attributes="selected python:test(path=='/iwlearn', 'selected', nothing)">All of iw:learn</option>
<tal:entry tal:repeat="obj folderContents">
<option tal:condition="python: obj.isPrincipiaFolderish"
tal:attributes="value python:'/'.join(obj.getPhysicalPath())"
tal:content="obj/Title">folder title</option>
</tal:entry>
<option tal:condition="python: here != portal_object"
tal:attributes="value python:'/'.join(here.getPhysicalPath())"
tal:content="here/Title">folder title</option>
</select>
</fieldset>
</form>
</div>
<div class="visualClear"></div>
<tal:listing condition="folderContents">
<tal:entry tal:repeat="obj folderContents">
<tal:block tal:define="bfresults python:container.portal_catalog(review_state=['published','visible'],
path='/'.join(obj.getPhysicalPath()),
sort_on='Date',sort_order='reverse');
numResults python: len(bfresults)">
<!-- use class portletHalfWidth to display 2 collumn s or portletThirdWidth for 3 collumns -->
<div class="portlet portletThirdWidth">
<h6>
<a tal:attributes="href obj/absolute_url"
tal:define="icon python: obj.getIcon(1)">
<img src="" alt=""
tal:attributes="src string:${utool}/${icon};alt here/title" />
<span tal:replace="obj/Title"> title</span>
<i tal:condition="python: obj.isPrincipiaFolderish"
tal:content="python: '(' + str(numResults - 1) + ')'" />
</a>
</h6>
<div class="portletBody">
<div class="portletContent even"
tal:content=" python:test(obj.Description(), obj.Description(), '')"
tal:condition="python:test(obj.Description())"> description </div>
<tal:list condition="bfresults"
repeat="obj python:bfresults[:5]">
<div class="portletContent"
tal:define="oddrow repeat/obj/odd"
tal:attributes="class python:test(oddrow, 'portletContent even', 'portletContent odd')">
<img src="" alt=""
tal:attributes="src obj/getIcon"
/>
<a href="#"
tal:attributes="href obj/getURL"
tal:content="obj/Title">title</a>
</div>
</tal:list>
<div class="portletContent even">
<a class="portletMore"
tal:attributes="href obj/absolute_url">
<span i18n:translate="all_foldercontents">
All <span tal:content="string:${obj/Title}">Title of folder</span>
</span>
</a>
</div>
</div>
</div>
</tal:block>
</tal:entry>
</tal:listing>
<p class="discreet"
tal:condition="not: folderContents" i18n:translate="description_no_items_in_folder">
There are currently no items in this folder.
</p>
</tal:foldercontents>
<div class="documentByLine">
<a class="link-plain" tal:attributes="href string:${here/absolute_url}/folder_listing">folder listing</a>
</div>
</div>
</body>
</html>
there are some comments in the above code be sure to read them and follow the instructions.
add a DTML Document boxed_folder.css to
your custom folder:
/* stylesheet for boxed Folder view */
/* 2 collumn layout */
.portletHalfWidth {
width: 45%;
float: left;
padding: 0 1em 1em 0;
}
/* 3 collumn layout */
.portletThirdWidth {
width: 31%;
float: left;
padding: 0 1em 1em 0;
}
in the folder where you want to display this template add a DTML-Document 'index_html':
<dtml-var folder_boxed_view>
Thats all, have fun ;)
