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

Plone Support Add-on Development
,
1

In plone.app.event 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?

2

Use Javascript/jQuery.

1 Like
3

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

4

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
5

This is a tipical use case for pat-dependes: http://patternslib.com/depends.
Either you take inspiration from https://github.com/Patternslib/Patterns/blob/master/src/pat/depends/depends.js and write your own js or you could try to use https://github.com/plone/plone.patternslib.
Last time I used it on a Plone 5.1 site it was working.
Not sure about the documentation status.

3 Likes
6

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 plone.app.event. Where can I find JS part in this approach?

7

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

8

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,
                klass=u'show_image_field')
    show_image_field = schema.Bool(
        title=_(u'label_show_image_field'),
        description=_(u'help_show_image_field'),
        required=False,
        default=False
    )
  • 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"
    enabled="True" 
    id="++resource++my.policy/showhide.js" 
    expression=""
    />