Show or hide fields depending on a selection (dexterity schemata)

In the time field is shown or not shown depending on the selection "whole day". How can I realize such a conditional display in my own dexterity type?

Use Javascript/jQuery.

1 Like

Sure. But what exactly do I have to do? Is there a simple example / howto somewhere?

Write your own JS code in your own policy package, register a jQuery handler for the related 'change' event and perform actions for hide() or show() other fields as needed...basic JS/jQuery knowledge required.

1 Like

This is a tipical use case for pat-dependes:
Either you take inspiration from and write your own js or you could try to use
Last time I used it on a Plone 5.1 site it was working.
Not sure about the documentation status.


Thank you for the hints. @Alessandro: This only seems to work in Plone 5. I use Plone 4. @Andreas: At the moment I am looking at the realization in Where can I find JS part in this approach?

...Ok. It seems to be in event/browser/resources/event.js

For all who are interested in an example: This simple solution for showing and hiding a image field works for me:

Add new checkbox field in your custom content type

from plone.supermodel import model
from plone.autoform import directives as form
from z3c.form.browser.checkbox import SingleCheckBoxFieldWidget

class IMyType(model.Schema):

    form.widget('show_image_field', SingleCheckBoxFieldWidget,
    show_image_field = schema.Bool(
  • This will add a new checkbox field with the name "show_image_field" containing a class element "show_image_field"

Add new js file (e.g. showhide.js) in my.policy/browser/resources or take your existing one

$(document).ready(function() {

	if ( $( ".show_image_field" ).length ) {		
		$( "#formfield-form-widgets-image" ).hide();
		$( ".show_image_field" ).on( "click", function() {
			$( "#formfield-form-widgets-image" ).fadeToggle( "slow", "linear" );
  • This will toggle the div element (id="formfield-form-widgets-image") on click

Register js file in my.policy/profiles/default/jsregistry.xml if neccessary

 <javascript cacheable="True" compression="none" cookable="True"