Utilize Available JavaScript in Plone without Knowing JavaScript

There are a few automagical scripts in Plone of which many developers may not be aware. These helpful scripts are used throughout the default Plone skin, and are available for you to use in your templates as well. The nice part is that you don't need to know JavaScript to be able to use them, you just have to know how to structure your code properly for the existing JS to find it. The original .js files can all be found in CMFPlone/skins/plone_ecmascript/

form_tabbing.js

FormTabbing is a way of splitting up content into multiple screens, without having to refresh the page. The most common place this is seen in Plone is the edit screen.

The JS file that does this magic is form_tabbing.js, and it even includes instructions on how to use it yourself. It's as simple as this:

<dl class="enableFormTabbing">
  <dt id="fieldsetlegend-unique-id1">button one</dt>
  <dt id="fieldsetlegend-unique-id2">button two</dt>
  <dd id="fieldset-unique-id1">content one</dd>
  <dd id="fieldset-unique-id2">content two</dd>
</dl>

The two <dt>s serve as the buttons at the top that toggle which content to view. The id for the buttons must start with "fieldsetlegend-" and end the same as its <dd> conterpart (which starts with "fieldset-").

The code can also work in this way:

<form class="enableFormTabbing">
  <fieldset id="fieldset-[unique-id]">
    <legend id="fieldsetlegend-[same-id-as-above]">Title</legend>
  </fieldset>
</form>

table_sorter.js

The table sorter JS allows you to sort tables by column. To see an example, login and visit a folder_contents page. You will see a table like the one below. Click on the "Title" header, and all the rows will then sort alphabetically by title.

To use this in your own template, your table will need the following code:

• class="listing" applied to the table

• a unique id for the table

• use of <thead> and <tbody>

• make sure to use <th> in the <thead>

Here is an example:

<table class="listing" id="my-table">
  <thead>
    <tr><th>Numbers</th></tr>
  </thead>
  <tbody>
    <tr><td>123463</td></tr>
    <tr><td>7632</td></tr>
    <tr><td>459629</td></tr>
    <tr><td>27963</td></tr>
  </tbody>
</table>

Clicking on the header "numbers" will sort the table by that column. Clicking on it again will sort in the reverse direction.

An important thing to realize is that by default, the table_sorter.js is set to not work for anonymous. You can see in the ZMI > portal_javascripts, that there is a condition set on table_sorter.js. To allow this for everyone, just clear out the condition. The code for jsregistry.xml should look like this:

<javascript cacheable="True" compression="safe"
  conditionalcomment="" cookable="True" enabled="True"
  expression="" id="table_sorter.js" inline="False"/>

collapsiblesections.js

Collapsible sections gives you an easy way to reduce the amount of clutter on a page. An example of this is the History information on an item in Plone. It starts out collapsed, and displays all the hidden information when you click on the title.

This effect can be achieved with the following code:

<dl class="collapsible collapsedOnLoad">
  <dt class="collapsibleHeader">
    Clickable Title
  </dt>
  <dd class="collapsibleContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </dd>
</dl>

The collapsedOnLoad class is what sets the item to be collapsed when the page loads. Remove this class to have the item start out open. collapsiblesections.js provides helpful documentation if you have more questions.

cookie_functions.js

This one does require some JS knowledge, but it is helpful nonetheless. If you have a need to create a cookie on your site, Plone already has some Javascript set up for that. You just need to be aware of the two functions:

• createCookie, which takes the arguments name, value, and days (for expiration).

• readCookie, which only takes a name, and returns the value.

Conclusion

Without much effort, these scripts will help you to build functional, easy-to-use templates. Put together with custom styling, you can utilize these frameworks to work seamlessly in your site.