Plone 6 / Volto Dexterity Content Types - Schema & Layout
Download as PPTX, PDF0 likes395 views
This document discusses Dexterity content types in Plone 6/Volto. It covers defining content type schemas through the TTW schema editor, GenericSetup profiles, and behaviors. It also discusses defining page layouts through blocks, including custom block properties schemas and layout editor. The presenter is Alin Voinea from Eau de Web in Romania, and specializes in Plone, Volto, Python, and related tools.
![> foreward
Python 3
Type "help" for more information.
> forward
Welcome to Node.js
Type ".help" for more information.
>>> import this
>>> this.__dict__
{
“name”: “Alin Voinea”,
“github”: “avoinea”,
“twitter”: “alinvoinea”,
“slack”: “avoinea”,
“mail”: “avoinea[]plone[]org”,
“version”: 2020,
“keywords”: [
“Volto”, “Plone”, “Python”,
“Docker”, “Rancher”, “React”,
“jQuery”, “DevOps”,
...more
]](https://image.slidesharecdn.com/plone6voltodexteritycontenttypes-201208191435/85/Plone-6-Volto-Dexterity-Content-Types-Schema-Layout-2-320.jpg)
![Behavior / Schema
class ISchema(model.Schema):
model.fieldset('default', label=_('Default'),
fields=['title', 'description', 'date'],
)
title = schema.TextLine(
title=_('Title'),
required=True
)
description = schema.Text(
title=_('Summary'),
)
date = schema.Datetime(
title=_('Publishing Date'),
)
Python {
"fieldsets": [
{
"id": "default",
"title": "Default"
"fields": [ "title", "description", "date"],
}
],
"properties": {
"title": { "title": "Title", "type": "string"},
"description": { "title": "Summary", "type": "string", "widget": "textarea"},
"date": { "title": "date", "type": "string", "widget": "datetime" },
}
},
"required": [ "title" ],
}
RestAPI (JSON)](https://image.slidesharecdn.com/plone6voltodexteritycontenttypes-201208191435/85/Plone-6-Volto-Dexterity-Content-Types-Schema-Layout-8-320.jpg)
![Block settings schema
const Schema = {
title: 'Block settings',
fieldsets: [
{ id: 'default', title: 'Default',
fields: [
'placeholder', 'required', 'fixed', 'disableNewBlocks', 'readOnly'
],
},
],
properties: {
'placeholder': {...},
'required': {...},
...
}
};](https://image.slidesharecdn.com/plone6voltodexteritycontenttypes-201208191435/85/Plone-6-Volto-Dexterity-Content-Types-Schema-Layout-17-320.jpg)
![Layout - Custom behavior
behaviors.py
@provider(IFormFieldProvider)
class IDoTheZuLayout(model.Schema):
model.fieldset(
"layout",
label=_(u"Layout"),
fields=[
"blocks",
"blocks_layout"
])
blocks = JSONField(
title=u"Blocks",
default=custom_blocks
)
blocks_layout = JSONField(
title=u"Blocks Layout",
default=custom_blocks_layout
)
custom_blocks = {
"title": {
"@type": "title",
"placeholder": "Title here",
"required": True,
"fixed": True,
},
"description": {
"@type": "description",
"placeholder": "Description here",
},
"cover": {
"@type": "image",
"placeholder": "Cover image",
"required": True,
"fixed": True,
},
}
custom_blocks_layout = {
"items": [
"title",
"description",
"cover",
]
}
configure.zcml
<plone:behavior
name="do.the.zu.layout"
title="A Do The ZU Blocks Layout"
description="Enables Volto Blocks support"
provides=".behaviors.IDoTheZuLayout"
/>](https://image.slidesharecdn.com/plone6voltodexteritycontenttypes-201208191435/85/Plone-6-Volto-Dexterity-Content-Types-Schema-Layout-19-320.jpg)
Plone 6 / Volto Dexterity Content Types - Schema & Layout
- 1. Alin Voinea Eau de Web, Romania Plone 6 / Volto Dexterity Content Types Schema & Layout
- 2. > foreward Python 3 Type "help" for more information. > forward Welcome to Node.js Type ".help" for more information. >>> import this >>> this.__dict__ { “name”: “Alin Voinea”, “github”: “avoinea”, “twitter”: “alinvoinea”, “slack”: “avoinea”, “mail”: “avoinea[]plone[]org”, “version”: 2020, “keywords”: [ “Volto”, “Plone”, “Python”, “Docker”, “Rancher”, “React”, “jQuery”, “DevOps”, ...more ]
- 3. Content Types in Plone 6 / Volto ● Archetypes● Archetypes ● Dexterity Content Types ● Metadata ~ Schema ~ Layout● Blocks ● Behaviors
- 4. Schema Schema Schema Schema Schema Schema Schema Schema Schema Schema Schema Schema Dexterity Content Types - Metadata
- 5. Plone Schema ● How do we define Content-Types Schema: ○ TTW Schema Editor ○ GenericSetup profile ○ Behaviors
- 6. TTW Schema Editor - Demo https://youtu.be/MACV_85_HgA
- 7. Generic Profile XML <model> <schema> <field name="title" type="zope.schema.TextLine"> <title>Title</title> </field> <field name="description" type="zope.schema.Text"> <title>Description</title> </field> <field name="date" type="zope.schema.Datetime"> <title>Publishing Date</title> </field> </schema> </model>
- 8. Behavior / Schema class ISchema(model.Schema): model.fieldset('default', label=_('Default'), fields=['title', 'description', 'date'], ) title = schema.TextLine( title=_('Title'), required=True ) description = schema.Text( title=_('Summary'), ) date = schema.Datetime( title=_('Publishing Date'), ) Python { "fieldsets": [ { "id": "default", "title": "Default" "fields": [ "title", "description", "date"], } ], "properties": { "title": { "title": "Title", "type": "string"}, "description": { "title": "Summary", "type": "string", "widget": "textarea"}, "date": { "title": "date", "type": "string", "widget": "datetime" }, } }, "required": [ "title" ], } RestAPI (JSON)
- 9. Plone 6 / Volto Schemas
- 10. Schema based frontend components import schema from './schema'; import InlineForm from '@plone/volto/components'; <InlineForm schema={schema} title={schema.title} formData={data} /> InlineForm import schema from './schema'; import Modal from '@plone/volto/components'; <ModalForm schema={schema} title={schema.title} formData={this.props.data} /> ModalForm import schema from './schema'; import Form from '@plone/volto/components'; <Form schema={schema} title={schema.title} formData={data} /> Form import schema from './schema'; import ObjectWidget from '@eeacms/volto-object-widget'; <ObjectWidget schema={schema} id={id} errors={errors} /> ObjectWidget import schema from './schema'; import SchemaWidget from '@plone/volto/components'; <SchemaWidget schema={schema} id={id} errors={errors} /> SchemaWidget
- 11. Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Dexterity Content Types - Blocks
- 12. Blocks Through the freedom that they provide, Volto blocks are a foundation for innovation that enables Plone to step in line with the latest state of the art for web development Tiberiu Ichim ...with freedom comes great responsibility Ronald Reagan
- 13. Page Layout
- 14. Blocks
- 15. Power to the ppl...
- 16. Block’s properties Change position Remove Add new blocks Placeholder ReadOnly / Editable
- 17. Block settings schema const Schema = { title: 'Block settings', fieldsets: [ { id: 'default', title: 'Default', fields: [ 'placeholder', 'required', 'fixed', 'disableNewBlocks', 'readOnly' ], }, ], properties: { 'placeholder': {...}, 'required': {...}, ... } };
- 18. TTW Layout Editor - Demo https://youtu.be/yTToDfzXIvI
- 19. Layout - Custom behavior behaviors.py @provider(IFormFieldProvider) class IDoTheZuLayout(model.Schema): model.fieldset( "layout", label=_(u"Layout"), fields=[ "blocks", "blocks_layout" ]) blocks = JSONField( title=u"Blocks", default=custom_blocks ) blocks_layout = JSONField( title=u"Blocks Layout", default=custom_blocks_layout ) custom_blocks = { "title": { "@type": "title", "placeholder": "Title here", "required": True, "fixed": True, }, "description": { "@type": "description", "placeholder": "Description here", }, "cover": { "@type": "image", "placeholder": "Cover image", "required": True, "fixed": True, }, } custom_blocks_layout = { "items": [ "title", "description", "cover", ] } configure.zcml <plone:behavior name="do.the.zu.layout" title="A Do The ZU Blocks Layout" description="Enables Volto Blocks support" provides=".behaviors.IDoTheZuLayout" />
- 20. Layout - Custom behavior
- 22. Thank you! A story brought to you by to be continued by