Dexterity CTs don't display tabs created using field sets

OK, I'll go ahead and file a bug. thx

bug report

XSLT can also add attributes. While you are using typically simplified rules to do the styling, full XSLT is available if necessary.

I think, I have read somewhere (either the Plone 5 documentation or this blog) that the TTW dexterity editor has problems with fieldsets.

@djay regarding your comment on possible changes to the docs:

https://docs.plone.org/external/plone.app.dexterity/docs/custom-views.html

this is the closest I could find: talks about the dispaly view for Dex CT. Also, about 3/4 of the way down the page, you can see were fieldsets are discussed. I don't know what the default view for a Dex CT is, so I don't know if any of this applies. Just thought I'd give it a try.

I think the introduction to that page "So far, our types have used the default views. They use the display widgets from z3c.form, much like the add and edit forms use the edit widgets. This is functional, but not very attractive. Most types will need one or more custom view templates." is reasonably clear.

Perhaps it can give more examples of when you might want to create a customview. The problem here is that you seemed to assume the default view would let you specify fieldsets or customise them but should the documentation have to point out everything you can't do with a schema? Schemas are after-all meant to be semantic.
I personally think this page should give other options in addition to creating templates.
For example I would consider all of these as alternatives to creating a custom view

  • override a single widget to get what I want
  • use diazo to fiddle with the html at a theme layer.
  • use themefragments or rapido to create a custom view so I don't need to deploy a custom package and can keep the code TTW
  • use mosaic
  • use plomino or ploneformgen with an adapter to create a custom wizard for an edit form

All of these have pros and cons and should be considered along side writing a template to create a custom view.

How is this XML generated by Plone or Dexterity? Through the content-type editor in Plone? I can not reproduce this with the latest 5.1RC2 release (tested on plone-demo.info)

-aj

For those that have not made custom views before, I would definitively look at

https://community.plone.org/t/announcing-ambidexterity-ttw-views-defaults-validators-and-vocabularies-for-dexterity/

Basically, you just:

  1. Add a new view in the control panel

  2. Add some html to it, usually like this:

     <p><b>Phone: </b>${context/phone}</p>
    

Where 'phone' is the name of the field

Sometimes, you might need to use some TAL, for example

<span tal:condition="context/somefield" tal:content="structure context/somefield" />

How?
Where can I find docs (lets say I want to add

class="pat-moment"  data-pat-moment="format:relative;">

https://docs.plone.org/external/diazo/docs/advanced.html#inline-xsl-directives

It would be something like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
    xmlns:tal="http://xml.zope.org/namespaces/tal"
    xmlns:metal="http://xml.zope.org/namespaces/metal"
    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
    lang="en"
    metal:use-macro="context/main_template/macros/master"
    i18n:domain="plone">
<body>

<metal:content-core fill-slot="content-core">
<metal:content-core define-macro="content-core"> 
    <section class="pat-autotoc autotabs" 
        data-pat-autotoc="section:fieldset;levels:legend;">
        <fieldset>
            <legend>Tab A</legend>
                ${context/firstname}
        </fieldset>
        <fieldset>
            <legend>Tab B</legend>
                ${context/nickname}
        </fieldset>
     </section>
    </metal:content-core> 
  </metal:content-core>

</body> 
</html>

Note: you can use the same 'with divs etc instead of field sets', just use CSS classes.

data-pat-autotoc="section:.someclass;levels:.someotherclass;">

@zopyx

I'm using 5.08; however, i confirmed that it works same in 5.1

please see attached screen shots

  1. the edit xml button for the Dex type

..

  1. the xml file displayed when edit selected

to teach Plone to play accordion, you could use CSS with Ambidexterity. Click on Edit view when having your type selected, Ambidexterity will display something like 'editing view for lawn_care/monthly care', don't believe a word of it, it is really a view for the whole type, not a specific field.
Then remove the central part of the default view, the one with

  <p>
    This is the default Ambidexterity view for <span tal:replace="context/portal_type">portal type</span>.
  </p>

and replace with something like that:

<style media="screen" type="text/css">
  .kgp_acc .fs .fsc { display: none; }
  .kgp_acc .fs:target .fsc { display: block; }
</style>

<div class="kgp_acc">
<fieldset class="fs" id="intro">
<legend><a href="#intro">intro</a></legend>    
<div class="fsc">
  <dd tal:content="structure context/set_expectations/output"></dd>
</div>
</fieldset>

<fieldset class="fs" id="monthly_care">
<legend><a href="#monthly_care">monthly_care</a></legend>    
<div class="fsc">
  <dd tal:content="structure context/monthly_care/output"></dd>
</div>
</fieldset>
</div>

I think that I have your fields name right so it should work right out of the box. If not you will have to adapt a bit.

A few caveats:

  • first this is a very simplistic solution. 2 days ago the most I did know about CSS is that it existed. I have searched the net, there are tons of sample CSS everywhere from masters, I have found inspiration on this one: Simple accordion but obviously my skills are still at the kindergarten level and any experienced web designer could certainly do a lot better. Tabs could certainly be done in a similar way.

  • adding Css styling directly inline is frowned upon generally, the usual recommended way is to add a resource from a file. In this case of a proof of concept solution it's clearer.

  • in taking over the display for the article with Ambidexterity, there is no more automatic synchronization between existing fields and the display form. If a field is removed from the model or renamed, bad things will happen. I don't think that with ambidexterity in its current form it's possible to do otherwise but I may be wrong.

Finally as of the 'bug', I think that it comes from a focus problem: when you are adding a fieldset, you think that by following directly to add field it will be added to the new fieldset, in fact the focus is not switched to the new fieldset, it stays at the default level. Fields can be added directly to the 'default' fieldset too. The UI of DX configuration has bad problems with focus and refreshing. If you follow a slower procedure of adding the fieldset, clicking the new fieldset, add the field it will work better (at least on 5.1 - I did not check 5.0)

Thank You!

I finally had time to test your fix. It should have been obvious to me to click on the new fieldset tab before i added fields.

Works great.

It should have been obvious, but it was not so; why ?

try this:

.pat-autotoc.autotabs .autotoc-nav a.active, .autotabs .autotoc-nav a.active, .pat-autotoc.autotabs .autotoc-nav a.active:hover, .autotabs .autotoc-nav a.active:hover {
    background: #ddd;
}

Result

Barceloneta theme:

with the original Plone 5 theme, the selected tab is different but it's more difficult to see than the other tabs.
Obvious ? for modern designers certainly. For people seeing a bit less well than eagles not so much..

I want to let people know that it was pointed out to me that this isn't a bug, a little bit of a less than optimal interface.
when you create a new field set in Dex, I assumed this put the focus on that field set. it doesn't, what you need to do is create the field set, then click on the newly created tab for that field set. then anything added to this field set does display properly.
I forget who pointed this out to me, but a big thanks