SlideShare a Scribd company logo

Plone 6 / Volto Dexterity Content Types - Schema & Layout

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.

1 of 22
Download to read offline
Alin Voinea
Eau de Web, Romania
Plone 6 / Volto
Dexterity Content Types
Schema & Layout
> 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
]
Content Types in Plone 6 / Volto
● Archetypes● Archetypes
● Dexterity Content Types
● Metadata ~ Schema
~ Layout● Blocks
● Behaviors
Schema
Schema Schema
Schema Schema
Schema
Schema
Schema
Schema Schema
Schema
Schema
Dexterity Content Types - Metadata
Plone Schema
● How do we define Content-Types Schema:
○ TTW Schema Editor
○ GenericSetup profile
○ Behaviors
TTW Schema Editor - Demo
https://youtu.be/MACV_85_HgA
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>
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)
Plone 6 / Volto
Schemas
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
Layout
Layout Layout
Layout Layout
Layout
Layout
Layout
Layout Layout
Layout
Layout
Dexterity Content Types - Blocks
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
Page Layout
Blocks
Power to the ppl...
Block’s properties
Change position
Remove
Add new blocks
Placeholder
ReadOnly / Editable
Block settings schema
const Schema = {
title: 'Block settings',
fieldsets: [
{ id: 'default', title: 'Default',
fields: [
'placeholder', 'required', 'fixed', 'disableNewBlocks', 'readOnly'
],
},
],
properties: {
'placeholder': {...},
'required': {...},
...
}
};
TTW Layout Editor - Demo
https://youtu.be/yTToDfzXIvI
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"
/>
Layout - Custom behavior
...more
{
...github.plone.volto,
...github.collective.awesome-volto,
...training.plone.org,
...community.plone.org
}
Thank you!
A story
brought to you by
to be continued by

Recommended

EEA Volto Add-ons - Plone Conference 2020
EEA Volto Add-ons - Plone Conference 2020EEA Volto Add-ons - Plone Conference 2020
EEA Volto Add-ons - Plone Conference 2020Alin Voinea
 
Getting started with Selenium 2
Getting started with Selenium 2Getting started with Selenium 2
Getting started with Selenium 2Sebastiano Armeli
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Raymond Camden
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsJim Jeffers
 
JavaScript Testing VIA Selenium
JavaScript Testing VIA SeleniumJavaScript Testing VIA Selenium
JavaScript Testing VIA SeleniumAdam Christian
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanEd Charbeneau
 

More Related Content

What's hot

Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetupscottw
 
Desmistificando o Phonegap (Cordova)
Desmistificando o Phonegap (Cordova)Desmistificando o Phonegap (Cordova)
Desmistificando o Phonegap (Cordova)Loiane Groner
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jeresig
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsHolly Schinsky
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentAizat Faiz
 
Selenium webdriver
Selenium webdriverSelenium webdriver
Selenium webdriversean_todd
 
Beach Parasol
Beach ParasolBeach Parasol
Beach ParasolESUG
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentBrad Williams
 
Mojolicious - A new hope
Mojolicious - A new hopeMojolicious - A new hope
Mojolicious - A new hopeMarcus Ramberg
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsJoseph Chiang
 
RubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for RubyistsRubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for RubyistsRuby Bangladesh
 
Wordcamp 2010 presentation
Wordcamp 2010 presentationWordcamp 2010 presentation
Wordcamp 2010 presentationJonny Allbut
 
Automation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra SolutionsAutomation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra SolutionsQuontra Solutions
 
Django for n00bs
Django for n00bsDjango for n00bs
Django for n00bsJen Zajac
 

What's hot (20)

Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetup
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Desmistificando o Phonegap (Cordova)
Desmistificando o Phonegap (Cordova)Desmistificando o Phonegap (Cordova)
Desmistificando o Phonegap (Cordova)
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
Mojolicious on Steroids
Mojolicious on SteroidsMojolicious on Steroids
Mojolicious on Steroids
 
Web driver training
Web driver trainingWeb driver training
Web driver training
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
 
Selenium webdriver
Selenium webdriverSelenium webdriver
Selenium webdriver
 
Beach Parasol
Beach ParasolBeach Parasol
Beach Parasol
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin Development
 
Mojolicious - A new hope
Mojolicious - A new hopeMojolicious - A new hope
Mojolicious - A new hope
 
9. lower in Symfony 4
9. lower in Symfony 49. lower in Symfony 4
9. lower in Symfony 4
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
 
RubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for RubyistsRubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for Rubyists
 
You Know WebOS
You Know WebOSYou Know WebOS
You Know WebOS
 
Wordcamp 2010 presentation
Wordcamp 2010 presentationWordcamp 2010 presentation
Wordcamp 2010 presentation
 
Automation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra SolutionsAutomation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra Solutions
 
Django for n00bs
Django for n00bsDjango for n00bs
Django for n00bs
 

Similar to Plone 6 / Volto Dexterity Content Types - Schema & Layout

Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVCAlan Dean
 
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019Matt Raible
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2Paras Mendiratta
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Matt Raible
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next FrameworkCommit University
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014Tommie Gannert
 
Aurelia Meetup Paris
Aurelia Meetup ParisAurelia Meetup Paris
Aurelia Meetup ParisAhmed Radjdi
 
Angular 4 for Java Developers
Angular 4 for Java DevelopersAngular 4 for Java Developers
Angular 4 for Java DevelopersYakov Fain
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4DEVCON
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.tothepointIT
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Anatoly Sharifulin
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Eric Palakovich Carr
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019Matt Raible
 
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019Matt Raible
 
Intro To Mvc Development In Php
Intro To Mvc Development In PhpIntro To Mvc Development In Php
Intro To Mvc Development In Phpfunkatron
 

Similar to Plone 6 / Volto Dexterity Content Types - Schema & Layout (20)

Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVC
 
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014
 
Aurelia Meetup Paris
Aurelia Meetup ParisAurelia Meetup Paris
Aurelia Meetup Paris
 
Angular 4 for Java Developers
Angular 4 for Java DevelopersAngular 4 for Java Developers
Angular 4 for Java Developers
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
Django crush course
Django crush course Django crush course
Django crush course
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
 
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
 
Intro To Mvc Development In Php
Intro To Mvc Development In PhpIntro To Mvc Development In Php
Intro To Mvc Development In Php
 

More from Alin Voinea

EEA & Eau de Web Front-end add-ons - Plone conference 2023
EEA & Eau de Web Front-end add-ons - Plone conference 2023 EEA & Eau de Web Front-end add-ons - Plone conference 2023
EEA & Eau de Web Front-end add-ons - Plone conference 2023 Alin Voinea
 
EEA Faceted Navigation and Plone 6.pdf
EEA Faceted Navigation and Plone 6.pdfEEA Faceted Navigation and Plone 6.pdf
EEA Faceted Navigation and Plone 6.pdfAlin Voinea
 
Docker &amp; rancher
Docker &amp; rancherDocker &amp; rancher
Docker &amp; rancherAlin Voinea
 
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and RancherContinuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and RancherAlin Voinea
 
Faceted navigation in Plone 5
Faceted navigation in Plone 5Faceted navigation in Plone 5
Faceted navigation in Plone 5Alin Voinea
 
Docker and plone
Docker and ploneDocker and plone
Docker and ploneAlin Voinea
 
Plone and docker
Plone and dockerPlone and docker
Plone and dockerAlin Voinea
 
Developing Single Page Applications on Plone using AngularJS
Developing Single Page Applications on Plone using AngularJSDeveloping Single Page Applications on Plone using AngularJS
Developing Single Page Applications on Plone using AngularJSAlin Voinea
 
Responsive design in plone
Responsive design in ploneResponsive design in plone
Responsive design in ploneAlin Voinea
 
Plone and docker
Plone and dockerPlone and docker
Plone and dockerAlin Voinea
 
Display eea’s semantic content with elasticsearch and node.js applications sh...
Display eea’s semantic content with elasticsearch and node.js applications sh...Display eea’s semantic content with elasticsearch and node.js applications sh...
Display eea’s semantic content with elasticsearch and node.js applications sh...Alin Voinea
 
New EEA Plone Add-ons
New EEA Plone Add-onsNew EEA Plone Add-ons
New EEA Plone Add-onsAlin Voinea
 
Python eggs (RO)
Python eggs (RO)Python eggs (RO)
Python eggs (RO)Alin Voinea
 
Data visualization in plone
Data visualization in ploneData visualization in plone
Data visualization in ploneAlin Voinea
 

More from Alin Voinea (15)

EEA & Eau de Web Front-end add-ons - Plone conference 2023
EEA & Eau de Web Front-end add-ons - Plone conference 2023 EEA & Eau de Web Front-end add-ons - Plone conference 2023
EEA & Eau de Web Front-end add-ons - Plone conference 2023
 
EEA Faceted Navigation and Plone 6.pdf
EEA Faceted Navigation and Plone 6.pdfEEA Faceted Navigation and Plone 6.pdf
EEA Faceted Navigation and Plone 6.pdf
 
Docker &amp; rancher
Docker &amp; rancherDocker &amp; rancher
Docker &amp; rancher
 
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and RancherContinuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher
Continuous Delivery/Deployment w/ Gitflow, Docker, Jenkins and Rancher
 
Faceted navigation in Plone 5
Faceted navigation in Plone 5Faceted navigation in Plone 5
Faceted navigation in Plone 5
 
Docker and plone
Docker and ploneDocker and plone
Docker and plone
 
Plone and docker
Plone and dockerPlone and docker
Plone and docker
 
Kotti CMS 101
Kotti CMS 101Kotti CMS 101
Kotti CMS 101
 
Developing Single Page Applications on Plone using AngularJS
Developing Single Page Applications on Plone using AngularJSDeveloping Single Page Applications on Plone using AngularJS
Developing Single Page Applications on Plone using AngularJS
 
Responsive design in plone
Responsive design in ploneResponsive design in plone
Responsive design in plone
 
Plone and docker
Plone and dockerPlone and docker
Plone and docker
 
Display eea’s semantic content with elasticsearch and node.js applications sh...
Display eea’s semantic content with elasticsearch and node.js applications sh...Display eea’s semantic content with elasticsearch and node.js applications sh...
Display eea’s semantic content with elasticsearch and node.js applications sh...
 
New EEA Plone Add-ons
New EEA Plone Add-onsNew EEA Plone Add-ons
New EEA Plone Add-ons
 
Python eggs (RO)
Python eggs (RO)Python eggs (RO)
Python eggs (RO)
 
Data visualization in plone
Data visualization in ploneData visualization in plone
Data visualization in plone
 

Recently uploaded

PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...ShapeBlue
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarThousandEyes
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureManik S Magar
 
Artificial Intelligence - AI For Everyone
Artificial Intelligence - AI For EveryoneArtificial Intelligence - AI For Everyone
Artificial Intelligence - AI For EveryoneSridhar Seshadri
 
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueCloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueShapeBlue
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Cprime
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
Achieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfAchieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfIES VE
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Chris Bingham
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueShapeBlue
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubShapeBlue
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 

Recently uploaded (20)

PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes Webinar
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
 
Artificial Intelligence - AI For Everyone
Artificial Intelligence - AI For EveryoneArtificial Intelligence - AI For Everyone
Artificial Intelligence - AI For Everyone
 
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueCloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
Achieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfAchieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdf
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 

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
  • 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