We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

A Deep Dive Into Internals Of Volto

00:00

Formal Metadata

Title
A Deep Dive Into Internals Of Volto
Title of Series
Number of Parts
44
Author
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language
Production PlaceNamur, Belgium

Content Metadata

Subject Area
Genre
Abstract
In this talk, we will dive deep into the Volto codebase and understand how all things wire up internally. How does it provide so much flexibility to a developer and how we can leverage more from it? I think that if we know how an underlying technology works we have less pain in the development of any project and a better understanding of the things which we want to achieve using that technology.
Maxima and minimaHill differential equationLink (knot theory)Moving averageDampingDigital photography1 (number)OracleConnectivity (graph theory)Set (mathematics)BitObject (grammar)BuildingLecture/Conference
Plane (geometry)Source codeMultiplication signSoftware developerProjective planeFront and back endsCloningDegree (graph theory)Point (geometry)Moment (mathematics)Numbering scheme
CollaborationismCodeOpen sourceConfiguration spaceComputing platformSelf-organizationTask (computing)Object (grammar)Service (economics)Right angleWater vaporMaterialization (paranormal)Total S.A.CloningComputer fileLecture/ConferenceComputer animation
3 (number)Configuration spaceObject (grammar)Revision controlKey (cryptography)Set (mathematics)Windows RegistryCategory of beingOpticsInsertion lossContent (media)Lecture/ConferenceComputer animation
KnotView (database)Object (grammar)Configuration spaceDefault (computer science)CloningDemo (music)Connectivity (graph theory)Category of beingSystem callForcing (mathematics)MereologyRevision controlUltraviolet photoelectron spectroscopyWebsiteSet (mathematics)Instance (computer science)WhiteboardLecture/Conference
WhiteboardDefault (computer science)Set (mathematics)Canadian Mathematical SocietyContent (media)Projective planeRoutingSymmetry (physics)2 (number)Computer configurationGoodness of fitVideo gameGame controllerHTTP cookieLocal ringConfiguration spaceProduct (business)Remote procedure callRight angleMereologyMetropolitan area networkNumberHill differential equationLecture/Conference
CuboidRoutingWebsiteCanadian Mathematical SocietyNumberLecture/Conference
Computer configurationSet (mathematics)Product (business)Content (media)System callProjective planeFlow separationOntologyLecture/ConferenceComputer animation
Chief information officerProjective planeFunctional (mathematics)Subject indexingWebsiteConnectivity (graph theory)Object (grammar)Computer architectureGUI widgetConfiguration spaceSet (mathematics)MereologyCodeForm (programming)Type theoryCuboidLecture/Conference
GUI widgetForm (programming)Field (computer science)Type theoryComputer fileConnectivity (graph theory)Content (media)Similarity (geometry)outputTexture mappingCloningAreaWell-formed formulaTrailRight angleTotal S.A.Meeting/Interview
Personal identification numberGUI widgetType theoryClient (computing)Computer fileProjective planeAreaObject (grammar)MathematicsDifferent (Kate Ryan album)Physical systemPlanningContent (media)Windows RegistryConfiguration spaceLecture/Conference
Windows RegistryKey (cryptography)Form (programming)GUI widgetNumbering schemeDemosceneMappingObject (grammar)MereologyComputer animationMeeting/Interview
Sigma-algebraGamma functionGUI widgetConfiguration spaceFactory (trading post)Key (cryptography)MappingAxiom of choiceOnline helpConnectivity (graph theory)Object (grammar)Level (video gaming)Numbering schemeForm (programming)Goodness of fitMassContent (media)Revision controlView (database)
GUI widgetNumbering schemeHill differential equationGUI widgetConnectivity (graph theory)Configuration spaceVideoconferencingDefault (computer science)Type theoryMoving averageProjective planeMappingPrice indexDifferent (Kate Ryan album)Client (computing)Software developerLie groupTotal S.A.Computer animationLecture/Conference
Client (computing)Software developerConfiguration spaceGUI widgetDifferent (Kate Ryan album)Interior (topology)Line (geometry)Revision controlObject (grammar)Windows RegistryCloningFunctional (mathematics)Computer animationLecture/Conference
MappingGUI widgetForm (programming)Category of beingView (database)Electric generatorBlock (periodic table)Line (geometry)Lecture/Conference
GUI widgetForm (programming)View (database)Object (grammar)Block (periodic table)Content (media)Musical ensembleOracleQuicksort1 (number)Presentation of a groupClient (computing)Type theoryRight angleMedical imagingWindows RegistryDefault (computer science)Projective planeBlog40 (number)Lecture/Conference
Type theoryObject (grammar)View (database)Windows RegistryDefault (computer science)Web pageError messageContent (media)Multiplication signOrder (biology)Lecture/ConferenceComputer animation
World Wide Web ConsortiumGamma functionWeb pageData typeWebDAVStatisticsUniformer RaumContent (media)Product (business)Tablet computerDefault (computer science)View (database)Web pageType theoryOnline helpChainBlock (periodic table)Connectivity (graph theory)Level (video gaming)GenderPhysical lawComputer animation
Moving averageView (database)Type theoryCloud computingContent (media)Default (computer science)Block (periodic table)View (database)Line (geometry)Automatic differentiationType theoryError messageClient (computing)40 (number)Digital photographyConnectivity (graph theory)Right angleField (computer science)Web pageMedical imagingComputer animationLecture/Conference
View (database)View (database)Configuration spaceObject (grammar)Connectivity (graph theory)Computer configurationContent (media)Arithmetic meanRevision controlType theoryError messageMedical imagingDescriptive statisticsElectronic mailing listTablet computerMultiplication signBitDigital photographyLecture/ConferenceComputer animation
Event horizonComputer-generated imageryConnectivity (graph theory)View (database)Electronic mailing listTable (information)Repository (publishing)Configuration spaceEvent horizonMappingMedical imagingLevel (video gaming)Type theoryContent (media)Similarity (geometry)QuicksortClient (computing)Computer fileDifferent (Kate Ryan album)MultiplicationWindowDefault (computer science)Fluid staticsWeightInternetworkingSound effectRevision controlComputer animation
AuthorizationView (database)Type theoryPhase transitionDataflowError messageContent (media)Level (video gaming)Connectivity (graph theory)Game theoryEndliche ModelltheorieRight angleFocus (optics)Digital photographyFront and back endsLecture/ConferenceComputer animation
Asynchronous Transfer ModeError messageFront and back endsConfiguration spaceConnectivity (graph theory)CodeContent management systemCloningSinc functionView (database)Type theoryContent (media)Set (mathematics)Asynchronous Transfer ModeRight angleLecture/ConferenceComputer animation
QuicksortTwitterDifferent (Kate Ryan album)Client (computing)Asynchronous Transfer ModeView (database)Connectivity (graph theory)Reading (process)Object (grammar)Type theoryOperator (mathematics)Lecture/Conference
Hill differential equationContent (media)Asynchronous Transfer ModeForm (programming)Digital photographyAsynchronous Transfer Mode1 (number)Form (programming)MereologyText editorTablet computerType theoryDataflowGoogolDefault (computer science)Set (mathematics)View (database)Content (media)Lecture/ConferenceComputer animation
1 (number)View (database)Block (periodic table)Form (programming)Content (media)Type theoryBlogOrder (biology)Student's t-testPhysical lawText editorTablet computerRight angleWeb pageMetreLecture/ConferenceComputer animation
Block (periodic table)Block (periodic table)CloningForm (programming)Text editorTablet computerBlogView (database)Scripting languageMultiplication signContent (media)Computer fileDescriptive statisticsType theoryLecture/ConferenceComputer animation
Special unitary groupData structureForm (programming)Content (media)Formal grammarCloningBlogType theoryTablet computerBlock (periodic table)Text editorAreaField (computer science)outputComputer fileDescriptive statisticsGUI widgetSinc functionVideoconferencingStress (mechanics)MathematicsInteractive televisionLecture/ConferenceComputer animation
Object (grammar)Form (programming)CloningRepresentational state transferDataflow1 (number)DebuggerType theoryContent (media)Numbering schemeCategory of beingPhysical lawPoint (geometry)Field (computer science)Set (mathematics)SoftwareLine (geometry)Key (cryptography)Arithmetic meanPortable communications deviceLecture/ConferenceMeeting/Interview
Field (computer science)Form (programming)GUI widgetComputer fileObject (grammar)Content (media)View (database)Multiplication signTablet computerUltraviolet photoelectron spectroscopySet (mathematics)Block (periodic table)Morley's categoricity theoremDefault (computer science)Hill differential equationLecture/ConferenceComputer animation
Gamma functionPlane (geometry)Default (computer science)Field (computer science)DiameterNumbering schemeRepresentational state transferType theoryContent (media)Field (computer science)Computer fileObject (grammar)Key (cryptography)Formal languageSet (mathematics)Morley's categoricity theoremDescriptive statisticsDefault (computer science)Slide ruleCategory of beingMultiplication signRight angleScripting languagePoint (geometry)Computer animation
Field (computer science)Axiom of choiceEmulationContent (media)Telephone number mappingSource codePlane (geometry)Axiom of choiceType theoryCategory of beingDescriptive statisticsField (computer science)Object (grammar)Factory (trading post)MultiplicationEnumerated typeSoftwareCausalityHill differential equationNumberGUI widgetString (computer science)MappingCapillary actionComputer animation
Source codeTupleFactory (trading post)String (computer science)Data typeLine (geometry)GUI widgetContent (media)AreaLevel (video gaming)MappingType theoryGUI widgetComputer animation
Numbering schemeRepresentational state transferType theoryComputer fileAsynchronous Transfer ModeContent (media)Row (database)Ferry CorstenInternetworkingCloningConnectivity (graph theory)Order (biology)Digital photographyLecture/ConferenceComputer animation
Hill differential equationVacuumGrundlagen der MathematikMenu (computing)Library (computing)Connectivity (graph theory)Type theoryUniform resource locatorParsingComputer fileContent (media)Cycle (graph theory)Video gameProcess (computing)Goodness of fitInheritance (object-oriented programming)Computer animation
Boom (sailing)Hill differential equationEvent horizonCycle (graph theory)Video gameConnectivity (graph theory)Numbering schemePoint (geometry)Right angleForm (programming)Tablet computerDecision theoryBlock (periodic table)Category of beingText editorEndliche ModelltheorieDiagramMetropolitan area networkComputer animationProgram flowchartLecture/Conference
Type theoryContent (media)Computer fileForm (programming)DiagramNumbering schemeConnectivity (graph theory)Set (mathematics)Level (video gaming)GUI widgetField (computer science)MappingLecture/ConferenceComputer animationProgram flowchart
Category of beingAxiom of choiceForm (programming)Physical lawOperator (mathematics)Object (grammar)MappingSystem callMoment (mathematics)Uniform resource locatorGUI widgetDefault (computer science)Line (geometry)Field (computer science)Block (periodic table)Type theory
View (database)Game theoryEmailUniform resource locatorGUI widgetType theoryView (database)VolumenvisualisierungConnectivity (graph theory)Source code
WritingStictionPhysical lawMereologyWhiteboardCategory of beingConnectivity (graph theory)Form (programming)Point (geometry)Level (video gaming)GUI widgetElectric generatorBlock (periodic table)Text editorSelectivity (electronic)Drop (liquid)Drag (physics)Type theoryContent (media)Tablet computerAreaCore dumpVolumenvisualisierungSet (mathematics)Right angleBlogWater vaporComputer animation
Information managementBlock (periodic table)View (database)GUI widgetDefault (computer science)Text editorSelectivity (electronic)AreaBlock (periodic table)Connectivity (graph theory)BlogArithmetic meanComputer animationLecture/Conference
MassView (database)Block (periodic table)Asynchronous Transfer ModeType theoryContent (media)Configuration spaceConnectivity (graph theory)Level (video gaming)Physical lawPoint (geometry)Equaliser (mathematics)Revision controlConfidence intervalDifferent (Kate Ryan album)LoginComputer animationLecture/Conference
Plane (geometry)CloningContent (media)Connectivity (graph theory)RoutingLatent heatMiddlewareRepresentational state transferWave packetSound effectMobile appState of matterHypermediaFitness functionLecture/ConferenceComputer animation
Category of beingLibrary (computing)MereologyUniform resource locatorMultiplication signComplex (psychology)Connectivity (graph theory)Data structure1 (number)System callComputer animationLecture/Conference
HypermediaComputer animationLecture/Conference
Classical physicsStandard deviationRule of inferenceContent (media)Web browserView (database)WebsiteWeb 2.0ResultantRaw image formatEmailSet (mathematics)Cartesian coordinate system1 (number)CloningLecture/Conference
FreewareGamma functionGame theoryCodeRoutingMereologyConnectivity (graph theory)Content (media)DistanceSinc functionType theoryPoint (geometry)Coefficient of determinationElectronic mailing listRight angleQuicksortWater vaporPlastikkarteDefault (computer science)View (database)Data structureComputer fileLevel (video gaming)WebsiteLecture/ConferenceComputer animationSource code
Drop (liquid)Connectivity (graph theory)Right angleUniform resource locatorType theoryGroup actionMessage passingParsingRegulärer Ausdruck <Textverarbeitung>Numbering schemeProcess (computing)Moment (mathematics)Goodness of fitElectronic program guide
Data miningDrop (liquid)Maxima and minimaForm (programming)Type theoryConnectivity (graph theory)Electric generatorBlock (periodic table)Process (computing)Numbering schemeLocal ringQuantum stateSource code
WebsiteBlock (periodic table)Content (media)Library (computing)Client (computing)Physical lawServer (computing)Form (programming)
ACIDPlane (geometry)RippingMIDIString (computer science)Drop (liquid)GUI widgetField (computer science)Form (programming)Operator (mathematics)Windows RegistryFunctional (mathematics)MappingCategory of beingTablet computerConnectivity (graph theory)Text editorBlock (periodic table)View (database)Three-valued logicLine (geometry)Strategy game
Commodore VIC-20Gamma functionLine (geometry)Configuration spaceGUI widgetSpecial unitary groupRevision controlConnectivity (graph theory)Field (computer science)Electric generatorBlock (periodic table)Form (programming)Lecture/ConferenceSource code
Computer wormTurtle graphicsTable (information)Control flowLecture/ConferenceComputer animation
Transcript: English(auto-generated)
Okay, so hi everyone. I think that's like you are pretty excited after the pandemic. We are having like after two years like the float conference in person. And today I am going to talk about a deep dive into Internus of Volto. I think you are fresh because Timo only gave the presentation, not any technicals, but I am going okay and but today I am going
to teach you about the Internus of Volto, like how the magic stands, right? Timo only talked about the Volto, like the blocks, like how we made, but how the Volto generates it, right?
That's also the important ones. So if you want to extend something like the Volto, like how you can use it, you do not get only the components are doing with the Volto, right? You also have the settings and everything. And if you do not know the settings and the other objects we provide into the Volto, then you can't use it as a good way or in a nice way like what are the features
which Volto provides like in build. Like everything in Volto you can customize it, right? So let's get started with that. So first of thing like who am I? Like that's the only thing. So I am Alok Kumar, currently doing front-end developer at KeepConcept for more
than 2.5 years. I started as an intern and joined full-time after my degrees. I also created Gatsby theme clone because when I applied for GSoC, my mentor is Osoko, so he gave me like a project like hey we have that time Gatsby is famous, can you create that for the theme one?
So I created it and after that I did the GSoC onto the Gatsby source clone. It's still used, my code is still used in the University of Gisselabia in Finland. And then I also the collaborator of the task cluster CICD. So before the GSoC, I work for the,
I generally open source for the Mozilla organization. They have the CICD platforms where they use all their for the materials and everything. So I also contributed in that. So today we are going to decode the Volto by understanding the Volto config object. That's the most like we do not touch into the like most of the talk like what are the config object.
But if you see any like file into the Volto, you'll find this import config from clone Volto registry, right? And we do not know or we do not use like this config like what's in there, we just use like what we get like. If you want to customize, just get it and use it.
But today we are going to look into the details like what you can pass, what are the different things which provides you with the Volto inbuilt. So first of all, like if you go to the config object, the first thing like the object key which will be the setting objects. So we can going to talk about that. So what is the setting object? So setting object of the
configuration registry is a big registry of the miscellaneous setting. So if you see, if you go to the config.index.js file, you'll find this setting object and it contains lots of properties in it. Like you see, it's used to configure the Volto, like everything which you want to put in there, you can put it. You can also put your own
and you can use it as a props like directly using the config in your components or your own view or anything. So Volto already provides you the default setting which is used for showing the default views and the bare side. So if you go to our demo clone website,
we already see your website is running. So how it's running? Because for running a Volto or any clone instance, you know that you need an infrastructure configuration. So for that, we provide the default value for this setting so that we can see the running website or the
demo website which you can try and use it. So some examples of the settings which you have, like something like the public URL, like for developing, you might be developing on something certain ports which you do not want. We want to something others like the URL. So you can just provide like public URL, whatever you want, like HTTP local host,
5,000. At default, as the React developer, we told like 3,000, but you can do anything. Same as the port number, you can define it. Also, you can define the cookie expires, like how many seconds the cookie expires. By default, we make it six months. The symmetry
option, it is also important for your projects to have a symmetry option so that you can debug it into the life because you might get running a good local host website, but when you put into the production, you might run into some problem. So if you have symmetry configuration into the Volto, it already provides that. You just provide your symmetry option and it will directly
attach to your dashboard, right? So if you pass the symmetry option, you get that. Then we have the non-content routes. So as you know that Flown is all about content and the content creation because it's a CMS. But we also, for maintaining the CMS, we also need some other features like the control panels, what should be their language, what should be done
more, add-ons we can add, how we can add that. So how does Volto does that thing, right? So we have like different routes, like one is the content routes, like when you go to adding any content, we have like three modes, which use that only routes and then we have the non-content routes, which we can configure or you can provide all out of the box feature
which you want as a React website. So you can also do with the, what you can do with the Volto, you can make a additional website fully configurable within the Volto without using the Flown CMS if you just configure your non-content route. And you can use anything like
non-content rule, Hofstra, any CMS, do that request, do whatever you want with the React component and everything. So the question is like how I can extend the setting option or modify them. So you can extend as you use in your add-ons because I am mentioning this add-ons
because what we are doing into the current, our own projects, we are not like, we are customizing the Volto, but we are customizing into the add-ons like which we do into the Flown. So if you are developing in the Flown, we are developing each and every project as separate add-ons, right? We name the infrastructure, the add-ons, like whatever project we are making
and then we do the customization and everything into the data. We are following the same convention in our recent projects. So if you have this Volto, FJJ, the site which Timoth told us, so does. So if you, we are developing it like at the Volto FJJ add-ons, we put everything into that add-ons
and if you want to use that, just use that and customize it to another project like which the feature which you want to consume from that. So if you see the architecture, so basically if you develop an add-on, you must have a index.js file which export a function which is like compulsory required. So you have a apply-config function which gets a config object
from the Volto and this is the same config which you are importing into your component. It just initiates and provides you that into your components during the build time. So for there you can see that where I am explaining the config settings. So I assume that
you all have the JavaScript experience because you all know that and then here you can override the parts using the ESX and also the whole thing you also add whatever settings you want and you can use it in your own code base and everything. After that the most important
things like I never saw no one talking about is the widget objects of Volto because if you see like what the clone made up of, it's made of the form because for the content type you need a form or a user to submit the form. We are also doing this extremely similar form thing into the Volto for each and everything, but we never talk about the widgets. So how we can
scale or make a form using the similar component writing do not writing like repetitive. So if you have any like file content type and you want to have a specific form regarding that, you do not write like the specific forms like only the four files. What about like you get another form
which is different than the file? So what we are doing into the Volto like whatever the things we need we just create a widget out of that. So whatever like if you want like I have a texture text input field we just created a text widget. If you have like text area field textbook field we created text area for uploading the files and everything we created the file widget type.
So if your client comes with something different like which is not unusual which is not presented into the Volto you can create your own widget and think of it like widget because once you created it you can use it in all the upcoming project which you want because every client is almost the same they just need some CSS changes and the modifications regarding them. What I can think because if you use the Volto they just want the
theme to be changed and everything. The first thing is like the widget objects hold the widget registry so we have a widget registry within the Volto and the config object has a widget key which contains this registry and using this widget registry used for rendering the forms
which I'm going to talk about this into later on like how we generate forms and how this widget maps with the schema which is coming from the Plone thingy. So let's see like how this widget country looks. So this is how a widget mappings or object look into the Volto inside.
So since I can only say the part it's long. So the first thing we have many like the widget mapping method. The first one is the id and its mappers the schema well like you
understand like better if when I do all the things but here just keep in the mind that it looks like something like this we have an object with the id and then this id define the schema and this schema widget is a react component which is assigned to it. So we have this id like widget with the help of id with the widget key with the vocabulary with the factory with the choice
if you go with the like in the config folder into the widget you'll find this thing. So here I'm just explaining the certain things like it's look like it so this is schema widget which you are seeing is simply a react component and if you want to use it like not into the form or if anywhere into a react component like you are developing something new you can do it by
simply accessing like config widget id schema and this component is present everywhere like wherever you want and the important thing is like since we have to take care of the all the things like what if user do not want to provide anything or what does Volto does not matches
then the Volto what is will do is like it will give you the default fallback like if you do not provide any widget or any type of matching indices with the widget mapping it will give you the text widget. So how you can add your own widget in your project so let's see like your client comes with like something different like or something important like which is not
present into the Volto you can develop your own widget like we are also developer develop more of them and you can just do it by the config widget inner line. So you if you remember this config this is you have to do it in your like here like you in your
apply config function which are providing using the clone you get access to this config object and in config object we have this widget registry so you just have to this this you just have to assign or create a new variable out of it and you just need to put your react component there.
So here you can see that this widget has this widget mapping and this widget is the key like if you this widget like here this this so we are accessing this one and adding a new properties called inner line and we are putting our align with it right I think it's might be present now in Volto also so we are going to look in details like
how the Volto widget mapping works and when we talk about how firm generation occurs in Volto so if you see the Volto you have you can see like forms everywhere whether it's the block view or into the blocks in sidebar everywhere you receive form and we do not write any code like
for each and particular view we just use widget to create this form out of it. Then the third thing is like view objects of the Volto so we have like since we have like I told you like the setting objects the widget we also have the view registry for that.
So in view registry you mainly configure your view so if you are any content type so since you have the content type right and if Volto only provides you a default one we just saw the blocks and everything but what if you have a news content type and you want to the date to be
emphasized so what we will do you can't use the Volto ones you have to create new ones or whatever the clients needs so if you watch the Timo's presentation it has like a research project with the lead image banner it's a custom view which we have written for this especially the research content type so view registry gives you like four like four objects where you can
define your own views the first one is the layout views the second one is the content type the third which is the default one and the error view so so generally if for the layout reviews what is defined is in Volto we have this the folder content type or you can mention is there in that and it only shows you the content type view like if you have like lots of pages
and everything and you want to show it like this you can use the layout views and it gives you that so maybe I can show you because I also get this in morning because it's currently it presents in the folder but now it's like folder is not there into the Volto so I
take help from Victor to implement into the page content type so you can see like here we have like two contents like you see my second page my third page and you want to show this content into the view you do not want the default one I will show you also the default one so if you see this is the tablet view if you okay I have to go to the page
if you see I change the summary view now it's sent to something else we have this document view here you can see that whatever I write into the block view then it's generated there if you go to the album view it looks like something like this where it's a map your component into this this thing okay so that's the layout view then
we have the content type view I cannot show you the content type view because you based on your client need you do this thing the content type view but I show you like how
you can do that and the default view is the document view which I saw like whatever you write into the blocks is there and Volto also provides you the error view so what happens if you have the photo field 404 page right you're only saying like 404 returns in there but it does not look lines but if you if the GitHub is down you can see this unicorn image
right which shows us like it's down and something like that what about that like you can also do that into the Volto you can do anything into the Volto because it's react you can create a component and we provide the config object to do that so if you see like the config has this view object and in view object you can send all these configuration options for the each of the views like the layout views the content type views default viewed and
the error view I showed you the layout view you can also customize it right so what about the album you only have the image what about you also want the short description below it you can write something about that and you just map it and it will show you the somebody and everything so this is how you do that like the layout views like you layout views has some
certain like you you describe here what you want to choose and based on that you map your component so document view has a component for default view you find into the Volto GitHub repository same with the summary tabular listing and the album view they are all just a react
component map to it and based on the mapping we fetch the component from the config we do any like something we do all these sort of things like everywhere into the internals of Volto we fetch everything from the config then we have the similar for the content type like your for the similar content type like we have multiple content type and you want some
different type of views just put it into the content type views like news item file image event pass it that whatever your client's new window particular to emphasize or whatever he wants a static behavior based on your data or anything you would just do that write a react component map it with the your content type and Volto will show it for you then we have the error
view example for the flow in Volto so you want a nice fancy animation into the 404 phase where you can play a game like tic-tac-toe or something like that you can create that and map it and you can give it to the 404 key and if they have they can play the tic-tac-toe
because it's all the react right same with the 401 unauthorized 403 488 what if your backend is down it also like if you check Volto like if the backend is down it is just to show you that like there's something problem with the backend it's not something like with the FedEx request same with the course error like if you have the course error you can provide
the react component it will render so now we have a better understanding of the configuration like let's discuss about how Volto renders these views or how it uses these settings internally so in Volto we mainly have three types of code related to a particular content type since
clone is a cms we are going to talk about the content type and every content type has the three mode the first one is the add edit and the view mode right add and edit is almost the same view is like similar to the it is the same for the add and the edit but add and edit has some certain different features you can give like when you are creating
a new account in instagram or twitter you can or in gmail you can only choose a particular user you can't modify it after like once it created right if your client also wants something like that like hey we can't modify this this is only read only after the once it created
once the object is created it's only be a read only type so in that way you can put your schema in that way like in add a in add mode we only have this this thing in ito it we put the restriction and we implement the same thing and view mode like whatever you save whatever
your view component volto will render that with the data so here i've written the same thing like add and edit are almost the same the only difference based on the operation we may show or hide something from the view or some feature for the edit only so now let's
discuss volto edit to you and add mode in details because that's the only important ones into the volto once you understand like how volto's generate the forms how it simply implements a slate editor whatever's coming to where you can just you already know which part you have to take in just find it amend it and you are good to go so in add mode like
for any content type in volto in add mode you you see two types of view based on the settings of the content type so whenever you go create a content type into the flow you have to be asked like certain behaviors enabled by default or some behaviors you have to enable to get some
extra features right in volto we also provide a block behaviors right in if you are using the volto ones so using this behavior you get two view into the for any content type if it's enabled it's got the block view if it's not enabled you get the form view so what is the block view
so in block we mainly we saw the setting related to the content type into the sidebar portal of the on the right side portal of the same content type on left side we give you the slate editor with the nice user experience where you can write all the rich text thing which you want for a particular uh a page and also you provide you the add the blocks and make
your site look good and nice and second will be the form view so when block view is off like when you do not provide the behaviors like clone behaviors of the block behavior then we do not provide you the slate editor which is and you and if you do not have this behavior you can't
the blocks you get the normal what the employees provide you a simple form where you can add the titles description titles and everything save it based on your view what you configure you get what you get but if you have this block behavior you can add additional data additional
to the what your forms has so example of a form view here i have taken a file content type and here you can see that it does not have the this slate editor or the blocks like we talk about the volto it is simple like a flown form structure like it has the title description
and the files and here you can see that this title has this news on the right side you can see that this is the input field this is nothing but a text widget which we have developed same with the description since it's a text area field video we made a text area widget for the file you can see that we have like it's this nice little widget like with so
based on your interaction and everything it changes the uh on the content like the draw file here to upload a new file if you drag it change to something else when you drop it it turns to something else and it shows you the preview and everything so let's see like how this form generates into the volto so if you see that like volto is the front end we call it as the
volto is the front end of the flow it does not talk directly to the flow so how it talks to the flow is talk to the clone by clone rest api so what does clone rest api provides us the flown stpi provides the schema for the content type in forms of the javascript object we call
that as a json object like these object contains several key but most important ones are fields and a property so whenever volto tries to do something something in its to show user it always talks to the clone with using the clone rest api blown rest api gives lots of
objects whatever is there there are lots of them you can see it into the network tab but for us like for the volto the two are the most important one the field sets and the properties so every field set has a field key that contains fields of the given field set i'm going to see you like what this means by this line like where is the field set where is the field these fields are describing the properties object so generally every field set has some
fields like it's like object which gives you like a like what fields you want in a particular fields object right then this whole fields object must be described like which widget it's one to use and based on that we render the form and then there is additional thing like
each filter field set are shown as tab into the content view so if you remember the files view where you can see that like we have this thing you see like we have this default and default only has this three field and then we have the tabs like categorizers and date owners
so each of this tab name is the field set is the field sets and whatever the fields are there they are the fields for that particular field set into the add content item these field sets are represented as tab into the volto but if you developing the block these field sets are converted into accordion into the sideward okay so now i'm going to show you like how this
schema looks like from the prone rest api this is like a small one so this is can you see it
i guess so right so i remove all the additional fields which is presented to the which comes from the prone rest api for the file content type but this is what you get like an object like just an object and these are the field set like you see the field set is an array because you saw like those multiple tabs and each field set has a field key and each fields have the
description like title and description and each field set must have this id thing and the title so the if the title is default that's what you saw into the tab thingy right and this is id i do not know what this is used for but it's there and then i do not know particularly the
use but maybe of something like use internally then we also have for the title like if you see that the categorization thing onto the slides and then the for categorization we have this three field like subject language related items then what happens is this whatever this field is described here it must be present into the fields because we do not know like
what this means like subject language or what do you mean by the related items so if you go to the properties field you will find that if you these days like if you see this setting tab it says the field called allow discussion right the same key must be present in the
properties so sometimes you miss that thing like going to the sidebar most probably and here we have to describe what this allow discussion should be into the object type so here you can see that we have these choices where it is true or false we have description enums factory multiple things but whatever you define into the fields
array it must be present in the properties same happens is like i can show you different of them like if you see these contributors right they must be present somewhere into the fields that contribute as you see here in the ownership in that way we know that like what this contributors is and based on that we can choose the widget i can
show you we can widget mapping can be done can be done with the multiple things like id widget and also the types vocabulary and i can show you one of them like you see here the type is string it must be array somewhere it's not like if you go there
like here the type is the array so based on that we shows you the array widget here is also the array but i am going to show this thing widget is the text area and that's mapping you see we do not have this type if you get that widget thingy we replace with the text
area and if text area is they are mapped so it give you that so this is how the schema look likes which come from the prone rest api so now i have drawn some pictures like
for explaining like how all those things are get generated using the internals so i have drawn like in excel draw by the taking the example of the file content type like in add mode so what happens when you click or go to the clone and you choose the content type file and you press the add button like how it's all generated okay i think that you are able to read it right
so whenever you click into the file content type or any content type the whatever it goes in volto we first goes to the add component we have a add component into the volto it goes to there
is the add component has a library called qs parse and what it does is that it parses the url which we are currently have and in volto if you see carefully like whenever you want to add any content type we generally pass our content type as a params into the top so this library
just fetches us the params like which for content type you are trying to add we just get and using uh the plonest api after the rebranding of the add component we make a request to the plonest api in component did mount life cycle event once it gets hits we get the data from
the plonest api redox save it right we get this uh schema as a props in our add component then we pass this schema to the form component so this add component then we have this form component this form component consume this schema right we also get from the plonest api
whether this block behavior is enabled or not based on that we make two decisions either we are going to show the volto slate editor or not so if block property is not present there since it is a file content type we know that it's not present so we are going to work through the diagram of that like this thing the nose one so what we'll do is like once this form
consume this schema what we'll do is like we you see that this fieldset has an added we map over this fieldset and we pass this each schema fields to the fields uh component we also have
a fields component which matches the widget one which matches the widget mapping and it contains lots of matter which i'm going to show you so fields component is the responsible for selecting the widget and rendering them so you can see there like i think it's visible like this uh widget has like this amount of method like with get widget by field id get widget by
values get with it by name get with it by choices like these have all these methods right and so you and you see that it's a it's all or operator so if it does not found if one method does not return you anything we call another one we call another one until we get a
widget so if you see there this is how it's all like if i am going to explain you so this is the simple schema i i taken from the sidebar because block or in the sidebar also has this schema type and based on that we generate the form so i just take an example here you can see
that we have this field set a single one it has the id default and title you can see that it has the fields like url title and the line based on that we define the properties of those fields like if it is url what should be the title and then based on title we have this widget name like which widget we want to use so if you are generating the forms or writing
anything you have to go through this way and based on that we can generate the form after this thing like after getting this schema this fields property will use this method and based on the widget mapping object like this object which contains everything will show you like it will give you the widget you are there so if i can show you
this is how it's look and you see like this uh type of the widget we have like you i saw your the url thing this is the url widget and if you go to the url widget it's view or something like that it's defined
like how it's gone it must be okay so this is the url maybe i can show you like title it's view i guess okay so this is how this is how it's mapped and based on that the react components renders
after that widget renders we see this beautiful form generation into the volto then the second part is like what's if it has the block properties on then what's happened is this this
form component gives you uh gives renders another core component called block form components right this block form component is the handling on the left side and we use a react feature called portal based on this portal we transfer all our setting tag from the content to the
right sidebar which you see there so this is the portal sidebar this is the block form component and using that the block form component gives you the volto select editor and using the react portal we are transferring all the settings to the right side where you can write the same thing the same data which you want for the particular content type
right so uh details for the block form component like block form component is nothing but a drag and drop available area so you can see that in our slate editor you can just drag and drop each and every block you do not have to move out anything so
it is just a draggable and droppable area by default we showed you the title like the title and the text select editor text widget but it's happening the same like if you add any other block we are not doing anything complex we are just uh uh pulling out the edit view of the text and putting the edit view of that block like you know that like for every block we have
to define two component edit and the view so we are just putting it on that side and that and that's how the all volto block renders so after that i already told you like edit and add is almost the same it's nothing different only the features is matter like what you want
to be read only in modification otherwise it's almost the same so view mode so basically for the view mode for the block you write a view react component for the content type you write a view and you map and we put it into the like the content type views into the config
and it will render it so after the content type we also have lots of feature in plume how are those implemented like example like different control panel configuration so content type is one thing what about the login log out the different control panels into the configuration
so they are nothing but the non-content route which i told you earlier also like showing react component design to the specific ui so whatever you see other than the content it is similar like a react component like you are developing any react project like and whatever the designer gives you design that specific ui
get the data from the clone rest api and show it to user so we are and after that like we are also using the redox for restoring the current state of the app and middleware for the making request so if you have like uh attended the volto effective training
victor and tibirio showed you the middleware which we are using for facing the request and everything into the volto so now you know how volto is made but there is still one question like everybody i think knows that like how customization work in volto like how we are able
to provide this it's everywhere now like every like every like new library is giving you that so we are not doing anything complex we are just using the webpack alias property which allows us to resolve the path so basically what we are doing at like we are importing components from everywhere right webpack has this alias property what we are doing is like
during the build time during the build time we just replace us uh the customization part customization part with the original ones and we get that that's uh that's why we are in volto we told us like please follow the direct free structure which is mentioned to the world that's the only reason if you put to miss something we do not get the same part then
we we do not get like we we are not able to replace your component with that so uh that's it from my talk hope you enjoyed it learn something or something like that so yeah that's it so do you have any questions regarding it then no i have one question from
the discord okay let me just read it through the question is how do you configure volto
settings to return raw api content if application slash g's and adders are passed in the request this is a standard in classic clone if you visit classic site with a browser you'll get web view
if you pass the application slash g's and header you'll get raw api results for that thing i do not think i know the answer for correct ones like how we can figure this thing maybe victor or tb who can help you or maybe he can answer even to the discord chat
because i really do not know like how if you open this application you get the data okay thanks okay i think i hope we have time but thank you if you want i can walk you through the code like all the code so i think if you are interested otherwise that's it like
do you want to just go through the code like how we does the thing we have like almost like 15 minutes i guess right so let's let's just see like how it goes so if you see like in routes if you go through the routes of the volto you see that we have this like this kind
of route like everywhere like this is how the volto goes to particular component like this is structure you can see that how many routes we have into the volto we have this default routes the site map search and everything and if you go below we see this type of thing you see
this this star wildcard this is how like when you go to a certain content type it's using this type of wildcard and it's found if it's in with the content it just you gives you the content view or the content react component same with the add thingy let me find like where it is
the add it must be there this thing you see so whenever we have this file content type you press the add thingy you get this add component and if the if you go to the add component like since we need to know this thing regex and everything like the redux thingy
you see that like we are using the parsing this thing qs pass location url and everything right this is how we this the we get the content type from the url right and if you see the component did mount request here you see that we have a specific action regarding that
schema like this dot prof dot get schema we get the type we get the base url we make the request and after getting the request we save the schema into redux and redux provides the schema now after getting the schema what we are doing is that if you see is this the form component
this whole like react like our volto is like you see this is not this is just a single component is taking all care of this take care of all the form generation for the content type and the block
form and everything so if you see that in form component we are passing this schema thingy this props dot schema if you go to the form dot jsx i did some some decoding to get everything so if you see there this dot prof dot visual this is the if you see like this is what i
if you see this conditional it is what is checking the block behaviors if it if the content has the block behaviors and if the client is loaded because volto is a server signed rendered also and some of the library do not comply with the server side rendering so we
put the check to remove that like we do not want to render and break our website so we have this whole thing so we have the block toolbar which you see but here it is the thing like if you see this block form this is what gives you the uh slate editor because this is the draggable and your droppable component which i am talking about
and then we have this portal thingy where you get the right sidebar so if you are interested just go through it you'll find it and then here you can see that we have this field component and in field component we are passing each and each properties of the field and we are
mapping over it passing it to the form component and form component it to what is taking and mapping the widget thing if it's not there because it's the colon and it's ternary operator if the
block behavior is not there we are directly showing the forms into the tab into the tab view and this is the field which we are taking or talking about like it is the one which generates the mapping and everything so if you go with the fields thing here you can see that we have
this get widget by field id get widget by tag value everything and here are the one-liner for each and every method so these methods are not something like a bigger function or anything they are just one-liner because we have a registry and we are just checking it right true or false and based on that we are just returning the that particular widget from the config
and this is how the form generation work basically this is how the volto made so if you go through only this thing like form field blocks form component and if you just go through it and master it like if you know like how this whole things build up i think that
you can develop anything from the volto or you at least know the all the internals like how because these are the only three component which are bigger in size which we do not get outside like or make a into another component this is also our bottleneck so yeah that's it
from this talk so thank you now we have a 20 minutes break so we'll come back at four