ERP5 KM

HowToUseExperimentalXhtmlStyle

erp5_xhtml_style_experimental

ListBox marking (coloring)

Allows styling listbox line by adding arbitrary css classes to it (script-based, fully configurable).

Look here: How To Configure ListBox Markup

Requires:

  • ERP5Form_ListBox_bells_and_whistles.py experimental monkey patch.

  • Listbox_asHTML.py from erp5_xhtml_style experimiental BT skin

boxover

A set of scripts and css classes which allow to produce a nice floating info box over any object. Implemented for ListBox.

Look also here: How To Configure ListBox Markup

Can be used also to display more info over planning box items (just enter rendering script name into 'block tooltip info method' parameter of a planning box), or for any field on a form, and possibly everywhere.

Requires:

  • ERP5Form_ListBox_bells_and_whistles.py experimental monkey patch.

  • Listbox_asHTML.py from erp5_xhtml_style experimiental BT skin

  • boxover.css and boxover.js from erp5_xhtml_style experimiental BT skin

Configuration - static

#include boxover.js

Get some data and render it using ERP5Site_renderBoxoverTitle, then set title of an html tag to the rendered string.

Most important parameters are:

  • header (required)
  • body (requird)
  • delay (recommended) - time span im msec between moving the mouse over an element and displaying the box
  • csshdr, cssbody - custom styling
  • fixedrelx, fixedrely, fixedabsx, fixedabsy - various ways to position the box

Sample code:

### page template
<div tal:attributes="title here/Something_getBoxoverTitle">float</div>

### Something_getBoxoverTitle
return context.ERP5Site_renderBoxoverTitle(header=context.getTitle(), body='It works!')

Configuration - AJAX

#include boxover_async.js
#include MochiKit/Async.js
#include MochiKit/Iter.js
#include MochiKit/DOM.js

Add "url" parameter to the boxover data. The url should point to a script which will get the real data and render a response using ERP5Site_renderBoxoverResponse:

### page template
<div tal:attributes="title here/Something_getBoxoverTitle">float</div>

### Something_getBoxoverTitle
url = context.absolute_url() + 'Something_getMoreInfo'
return context.ERP5Site_renderBoxoverTitle(header='Please wait...', url=url, delay=200)

### Something_getMoreInfo
header = context.getTitle()
body = context.getDescription() + ...
return context.ERP5Site_renderBoxoverResponse(header=header, body=body)

Whey you mouse over the div the box will tell you to wait, then when data arrive the box's contents will be replaced.

Usage for fields in a form

To display boxover for a field (for example detailed information about a related object over a relation string field) - all it takes is dynamically setting a description of a field. The field's description is used as a title of a div containing the field, so if you put a TALES expression returning a rendered boxover title (use ERP5Site_renderBoxoverTitle) it works.

/!\ To make it work for real, you have to overwrite the Field_getDescription script and comment out caching. And once you've overwritten this script you can keep hacking until you build a system-wide automated and centralized field boxover system. Have fun.

dynamicGUI - ParallelListField

Parallel list field (a list of dropdowns) which works without reloading the page - when you select something in the last (empty) field a new one appears immediately, when you de-select one it is removed. Requires ERP5Form_DynamicParallelListField experimental monkey patch because otherwise validator doesn't process all values.

Usage: include dynamicGUI.js (by global definitions or using HTMLInclude Tool; then in your parallel field (best if it is a proxy to my_category_list) add onchange='updateParallelField(this)' as "extra" parameter.

laneAxisTitle - alternative Planning Box axis rendering

This feature modifies Planning Box rendering to include axis title over axis groups (for now only on lane axis). To display the title it's only needed to set 'group_title' property on a (temp) object used in creating of a time domain.

Requires:

  • PlanningBox_laneAxisTitle.diff experimental filesystem patch for PlanningBox.py.

  • planning_contents.py from erp5_xhtml_style experimiental BT skin

Planning Box advanced block coloring

The two required scripts allow for type-based, fully configurable coloring of the planning boxes, TOGETHER WITH automated rendering of the legend, which describes colors mapping.

Usage: set !PlanningBox_getSimulationStateColorText as a blocks colorizing script then create a type based script (named Portal Type_getColorsDict) returning a coloring dictionary like in an example below:

# 'conditions' key is used only in Legend rendering to display column's titles.
# This example will color each Event block according to its state,
# Visit events are colored differently to distinguish them.
legend_dict = {
    'conditions' : ['Type','State','Colour'],
    'property_getter_method' : 'getPortalType',
    'color_mapping' :
      [['Visit', { 'property_getter_method' : 'getSimulationStateTitle',
                   'color_mapping' : [['Draft','#00ff00'],
                                      ['Assigned','#ae3411'],
                                      ['Planned','#ffaa11'],
                                      ['Started','#0011aa'],
                                      ['Received','#ffaa00']
                                     ]
                  }
       ],
       ['rest', { 'property_getter_method' : 'getSimulationStateTitle',
                 'color_mapping' : [['Draft','#feedbc'],
                                    ['Assigned','#ae0011'],
                                    ['Planned','#003211'],
                                    ['Started','#00ffbc'],
                                    ['Received','#abcdef']
                                   ]
                }
       ]
      ]
   }
return legend_dict

The possibility to configure a background (shading, patterns) of a box not only its color is under development.

HowToUseExperimentalXhtmlStyle (last edited 2008-06-04 08:33:48 by MikolajAntoszkiewicz)

Page
  • Immutable Page
  • Info
  • Attachments
User
Learn about new ERP5 releases,technical articles, events and more.

Subscribe to the monthly ERP5 Newsletter!