Add "Post-It Note" Portlet for Notes

by kingnebu — last modified Dec 06, 2009 10:16 PM

Contributors: Joel Burton

This howto explains how you can add a "PostIt" note type to a Plone site, so that post-its, when added to a folder, appear in a portlet for that folder. A good example of creating a simple type, workflow, and portlet, all working together.

Creating the new portal type

Go to portal_types, copy Document, paste as PostIt.

Create postit.gif in your custom skin folder. Go back to portal_types/PostIt set "Icon" to "postit.gif".

You can use my icon for this:

Creating the portlet

Create portlet_postit in your custom skin folder as:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
     xmlns:metal="http://xml.zope.org/namespaces/metal"
     i18n:domain="plone">

 <body>

 <!-- The PostIt box -->
 <div metal:define-macro="portlet" tal:condition="python:test(site_properties.portal_membership.isAnonymousUser(), 0, 1)">


    <div tal:define="objects here/navigationCurrent;">

            <tal:block tal:condition="objects">
                <div tal:repeat="obj objects">



                    <metal:block tal:define="obj_title  python:obj.title_or_id();
                                             obj_description python:obj.Description();
                                             ispostit python:test((obj.portal_type)=='PostIt',1,0)">


                     <tal:block tal:condition="python:test(ispostit)">
                      <div class="portletPostItDetails" tal:define="creator here/Creator;">

                        <span tal:content="creator">bob</span>

                        <span tal:replace="python:here.toLocalizedTime(obj.ModificationDate(),long_format=1)">
                         August 16, 2001 at 23:35:59
                        </span>
                      </div>

                      <div class="portletPostIt">

                       <div ><a href="" tal:define="url string:${obj/absolute_url}" tal:attributes="href url; title obj/Description">

                            <tal:block tal:content="structure obj_title" /></a></div>

                       <div><tal:block tal:content="structure obj_description" /></div>

                       <div><tal:block tal:content="structure obj/CookedBody" /></div>




                     </div>

                   </tal:block>

                  </metal:block>


                </div>

            </tal:block>

          </div>

  </div>

Adding the style sheet

Add StyleSheets -- add custom StyleSheets to ploneCostom.css, my suggestion:

.portletPostIt{
    background-color: &dtml-notifyBackgroundColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-notifyBorderColor;;
    color: &dtml-fontColor;;
    font-size: &dtml-fontSmallSize;;
    padding: 1em;
}

.portletPostItDetails{
    background-color: &dtml-notifyBorderColor;;
    font-size: &dtml-fontSmallSize;;
    text-align:center;
    margin-top:1em;
}

Add here/portlet_postit/macros/portlet to left_slots or right_slots in those folders where PostIts should be shown (remembering the the slots properties will be acquired by contained folders).

The workflow

Add postit_workflow. The goal of PostIts is fast communication about contents, stored in a folder. Therefore there should be no mechanisms (like request publishing ), that slows this communication down.

You need a workflow for PostIts, especially when you use private as initial state in your workflows.

Go to portal_workflows -> contents -> copy plone_workflow, paste as postit_workfow.

Go to postit_workflow -> state: delete all states except vivible

Go to transitions: delete all

Go back to portal_workflows, set PostIt to postit_workflow