Building Volto Addons

Video in TIB AV-Portal: Building Volto Addons

Formal Metadata

Building Volto Addons
Title of Series
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.
Release Date
Production Year

Content Metadata

Subject Area
As you know that now Volto support addons structure we are going to build an addon in this talk. With any luck, you’ll walk away with a better understanding of how to create an addon for a Volto.
Zoom lens Interior (topology) Wave packet
Installation art Covering space Zoom lens Building Installation art Software developer Code Building Software developer Source code Boilerplate (text) Projective plane Fitness function Content (media) Student's t-test Power (physics) Twitter Data mining Goodness of fit Bootstrap aggregating Googol Cloning Data structure Data structure
Common Language Infrastructure Default (computer science) Zoom lens Video projector View (database) Code Computer file Boilerplate (text) Online help Type theory Revision control Cloning Text editor Configuration space Booting Descriptive statistics Booting
Zoom lens Computer file View (database) Computer file Source code Boilerplate (text) Power (physics) Type theory Digital photography Source code Cloning Data structure Descriptive statistics
Zoom lens Computer file View (database) Software developer Boilerplate (text) Projective plane Interior (topology) Content (media) Code Mereology Web 2.0 Configuration space Cloning Address space Plug-in (computing) Asynchronous Transfer Mode Form (programming)
Group action Presentation of a group Code View (database) Source code Price index Parameter (computer programming) Mereology Atomic number Different (Kate Ryan album) Core dump Convex set Error message View (database) Block (periodic table) Data storage device Shared memory Menu (computing) Term (mathematics) Electronic signature Type theory Digital photography Order (biology) Configuration space output Block (periodic table) Web page Functional (mathematics) Game controller Computer file Field (computer science) Computer icon Operator (mathematics) output Form (programming) Module (mathematics) User interface Default (computer science) Zoom lens Key (cryptography) Projective plane Boilerplate (text) Voltmeter Volume (thermodynamics) Directory service Subject indexing Blog Password Object (grammar) Resolvent formalism
Slide rule Functional (mathematics) Group action Overhead (computing) Computer file State of matter Code Connectivity (graph theory) View (database) Memory management Set (mathematics) Reduction of order Configuration space output Arithmetic logic unit Form (programming) Zoom lens Distribution (mathematics) Block (periodic table) Projective plane Menu (computing) Group action Personal digital assistant Order (biology) Configuration space Pattern language Object (grammar) Block (periodic table) Writing
Slide rule Zoom lens Projective plane Reduction of order Configuration space
Group action Euclidean vector Computer file Block (periodic table) State of matter Line (geometry) Connectivity (graph theory) Electronic mailing list Line (geometry) Directory service Cross-site scripting Root output
Type theory Digital photography Computer file Electronic mailing list Configuration space Line (geometry) Variable (mathematics) Extension (kinesiology) Variable (mathematics) Element (mathematics) Extension (kinesiology)
Type theory Zoom lens Computer file View (database) Computer file Set (mathematics) Electronic mailing list output Block (periodic table) Power (physics) Form (programming) Cross-site scripting
Zoom lens Group action Block (periodic table) Projective plane Client (computing) Block (periodic table) Power (physics) Address space
Area Zoom lens View (database) View (database) Connectivity (graph theory) Menu (computing) Correlation and dependence Mereology Power (physics) Well-formed formula File viewer Musical ensemble Data structure Block (periodic table) output Address space Form (programming)
Area Component-based software engineering Zoom lens Graphical user interface Google Chrome Block (periodic table) Web page Descriptive statistics Form (programming)
Mobile app Zoom lens Graphical user interface Code Googol View (database) Web page Visual system Code Attribute grammar
Mobile app Zoom lens Mathematics Link (knot theory) Graphical user interface Google Chrome View (database) Code Connectivity (graph theory) Web page Division (mathematics) Form (programming)
Zoom lens View (database) Connectivity (graph theory) Web page Projective plane Area Component-based software engineering Category of being Order (biology) Data management Digital photography Graphical user interface Order (biology) Right angle Task (computing)
Zoom lens Order (biology) Well-formed formula Software developer Projective plane Order (biology) Video game Power (physics)
Axiom of choice Group action Greatest element Multiplication sign MIDI Water vapor Graphical user interface Atomic number Cuboid Energy level Selectivity (electronic) Integer Data structure Error message Form (programming) Physical system Area Mobile app Email Axiom of choice Validity (statistics) Information Block (periodic table) Software developer Web page Menu (computing) Type theory Message passing Order (biology) output Configuration space Free variables and bound variables
welcome back everybody we are going to be hearing about how to build volto add-ons uh this is something that
uh i sat in on on training on saturday and sunday with tiberiu and i'm looking forward to seeing what alec has to say about building volatile add-ons in 30 minutes
which is something that we covered in about eight hours before so hold on to your britches uh this allah kumar who has been working with kid concept on volto he was also a
google summer of code student in 2019 working on gatsby and so i'm
really pleased to get a chance to talk to him and i'm looking forward to hearing what he has to say and go ahead i'll look
okay so
okay so first of all uh good afternoon everyone like so today i'm going to talk about the building building volatile add-ons and wish me best of luck like for because i have 30 minutes and i have to cover lots of content so let's get started so firstly who i am so i am a front-end developer at the concept i am working on the volto and the previous work of mine is like a creator the gas fit theme clone and contributor of the gatsby source clone so if you want to find me you can find me on linkedin twitter github with the name iflaming i do not know how i choose it but it's just unique so if you search i am the first person so so uh first of all like uh uh how we can bootstrap our add-on structure so we can put the snapdragon structure with the ammo generator provided by our awesome clone community like tv uh and victor done this awesome work so we can create the wallet plate and as you know that like a volto is uh is all along a self project so if you want to do something or add some behavior you have to create a boiler a boilerplate and so for that uh urban generator comes into play into pictures so you can install the human using just npm install yeoman and you can download our clone generator using the volto so first of all like i am going to show you like how to generate a boilerplate using a yemen generator
so let me go to
my code editor so you can so do that like you will type like human clone volto and just the folder name which you want to generate the boilerplate so you just click into that and i'm just waiting to show you like how it's going to be and then you will get this awesome cli like uh what is the pro projector description i will type like clone conference 2020 then would you like to add add-ons as a default is true so we will just uh type true and we like the it just asking with the adder name plus extra loader and something we are just going with the simple bear step like so i work on goal to form builder so i am just getting some help so you do like to add another add-on so i do not want that workspace like you can leave this and you can do something like black false and it will create and it will generate like lots of uh node modules so we do not want to go into that and we can just cd into that and look into that like what is the boilerplate for our code so we'll click quickly we'll look into that
i think that i need to share once again my uh my border to this one
so when you first created the boilerplate you will find this type of folder structure and you can see in package json file you will find that we have these add-ons and items will be our the the name which we are given and known and like uh in description you are given like the clone con 2020 so this will be like that and then you have this source folder and you have all the wallet plate which you use for the for the photo editing but we have this add-on folder and you can see that like it's like the blank but hold on we'll fill it at the end up top we have
this lots of content and then i'm going to so like say this one
not i have to share like
okay so this is like so uh i just show you like how you can generate the boilerplate using the yeoman generator and like like that like we have created this add-on like we name our address like the world of clone volto form builder but like how we can make our project aware that like we have this our development mode add-on so we can use our jsconfig uh uh jsconfig file and we'll put our development package at this place so that it can resolve the package successfully so what does js config is that like if you have this any development package you can just provide the path for that development package and then the when you start or uh or run your project uh the the web pack will resolve this plugin using this part so
let me show you i can also show you in the code like how we can do that
so this is the js config file so what you doing like you will put your resolver module like the we are creating the voltage home builder you have this uh different thing like ea wall to column you will put this the where like whatever your name of the addon which you are developing put the put it there like the volto form builder and we will just provide the path like we are in the add-ons folder and we have this directory like the gold to form builder our the add-on file name and then we have this source directory where our whole add-on code will leave so that's why uh that just config parts is important so do not forget it and for developing the addons locally you need it so this is how it's looks like i already explained like what it is okay so now let's start our first add-on file like how to get started so as you know that like when you generate this add-on folder like the add-on boilerplate we have this empty field so first of all we can create a directory with a similar name what we are uh going to develop for our add-on like the column or the volte form builder so i'll create this volume form builder and then i'll create a source folder and we have this index.js file i am calling it.index.js file but you can but you can uh do uh name it whatever you want like if you want to name it like config.json put configuration but please remember to update the path like here like if you have this source file and you have this we do not have uh like index.js but we have this configuration just put another thing like source slash config.json because uh we'll use like a it will export a function which is which received a config file from our volto and we'll modify it so that will access the behavior of our atoms in our volatile project so uh i i already written like we will create an index.js file because you know that like if you provided acting name and you do not provide anything then that index.js file will be resolved for that directory and and this index.js file must has contains a function signature that takes the voltage convex and returns a new config so it's look like this like you have this export default which takes a config and this uh and return a config so you are looking into this parameter called config and this config parameters is passed by uh the volto project itself so it will be like uh the whatever the features the provided by the volto will be present in the display and if you want to modify anything just write in the function body and just return the configuration which you want for your custom project or for the custom ad so uh and so you let's look like like a photo form builder uh i just name it to apply config like it's the name like uh which i want like everybody should follow like you should give give it a name like and am using it for that like give the concern apply config it takes the config and you know that like if you can see like uh here i am just overriding the config thing like i go get the config from the volto and the blocks and i am just uh overriding it and then you can see that i am returning the config file so i think it's it okay so uh first of all like uh let's uh as you know that in volto everything is blocks so for creating a add-on you must have an a basic block creation uh uh you need to know like how we can create a blocks in the world of blocks i will not go into details because we already have uh niles talk and everyone's like talking about the block so i'll just give the briefly like how it's uh play the thing and then we'll just dive into the add-ons so a blog configuration will look like this like we have this input block like the type of the block which you want to create and this i have this id thing which uh and the the object key and the id should match otherwise you will go you will get a error like unknown block beaver so please uh be aware that make yourself like kiss constitutive and spelling should be correct like your object key and the id should be the same so and we have this all the configuration like what the title which you want to give the block the icons for the block and the group and we have this view and 88 whatever the view template which you want to so and we have this uh other controller configuration with you which you can learn like in the voltage documentation or anywhere like if you search for that so uh now we have uh i found this a very interesting thing like whatever like as a add-on writer we should uh contains our uh our blocks into our custom group so you can pass uh the custom group in the add-ons like you can create your own group like i i created the form group for my volvo form builder you can create like ea volte add-ons for the column or something like a chart chart block add-on so you will put like okay so we have this column and this is like the chat blog so i can quickly show you like how it's look like if i go to localhost 3000 it's everything works fine okay so we have very protected password and you can say that like if i go to my page edit you can see that like i am grouping things i can show you like you can see that like i have grouped my all uh add-ons a block into the form thing and you i think that you should also do the also do that like if you have this add-on and you want to provide this item for for the company or somebody to you just providing a proper group so that a person can know that okay so it's it is coming from this side not from the baltic core so they know that like where to debug where to look into that and this will be like the a helpful tip for the user interface to like how to do that so let me go to my conference store present you to you okay this is where like you can pass a a your custom group like just uh use the copy the config group block order by the default uh like the volto and just pass the new object with the id and the title and just referencing your like the block like i am passing the group to be sorry like the passing the group to be this form and then this uh block will be kept into your form uh form accordion so like and uh so this is the way like you can pass the custom group and for passing the custom block you can just uh overwrite our like uh override the blocks behavior of the config so how we can do that like we have to pass the group order so we overwriting the group's block order thing and we are just copying the config blocks and you know that we are using the es6 rest operator for copying the all blocks which contains in the config file and then we are overwriting the group blocks order from the previous thing and we can pass our config block config form blocker custom folder from this so i can show it to you like can i share it
okay so it is will be look like this like uh i am just using is like i am created this form block you you say that like we have this form block and we i have this whole object object and then i am just uh explaining copying this form block and providing it to the blocks config which is provided by the volto so this is the way which you can just pass your own blocks and this is like the using the group blocks order you can pass your custom form like the form accordion or something like that so this is it like passing okay so there will be like another problem like how we can store my uh state in our add-ons so so how we can write custom reducer related to uh our add-on so you can create the reducer and you have to pass it in the config so what we do what we did you are like is that like you create the reducer as uh as normal like the way you know and just pass this reducer to the uh volto voltage config and we will take care the rest for him like you will we will provide the state and everything which you access in the edit or the view component using the connect function provided by the redux so it's not your overhead like just create the reducer as you do in the volto and pass it to config so how we can pass the config so you can pass the config by like we provide a atom distribution for the object in the config so you you you just have to overwrite this like you provide this config dot dot add-on reducers or and just pass your reducer so i will just quickly show you
like how this works so i have this form builder reducer and i you think and you can see that like i am importing it from the reducer and this is my reducer file and i have this form builder reducer so you can see you see that like i am following the uh same uh pattern which is followed by the volto like it's a good one like define the constant in the other folder define your action in the other folder and just create a pure reducer function in the reducer so you can see that like i have this form builder the general like the case the success and the thing so please bear me with tax something this is the way you can just uh i just want to interrupt just to make sure that you're aware that we're seeing just your code we're not seeing any slides so uh you might want to check if you're trying to show slides and flip between them you might need to change what you're sharing okay sorry uh so i have this thing like this reducer thing and you just have to do this like you can just define this reducer of in the project
so i think that i have to fix it
okay so now you can see it like the slide i think so yeah so this is the way okay so this is the way you can pass the config add-on reducer so next thing is like how to style your add-on so how you can style your add-ons because we created the add-ons and we make aware our project like how to i will just quickly go to like uh
we created the blocks for our add-on like the input block or any block then we create our custom group thingy
and then we pass our custom block to the volto we also pass our custom then we
also pass the uh state of the add-ons to our file like this one and now like we are done with that like uh so we created the everything for a raw like and now i want to style my add-on so how we can do that so you can install your add-on by just creating a list file and import in the component where you want to style okay so just create a less file uh i will say in the root of directory and just put some css into that but please make sure that you will import these three lines
like this one and i will just explain that this type and the element things are by the are by the semantic well like how they know like uh what is the custom thing and what is the extra and will uh please consider this third line like import multiple dot slash theme config file it is this is the way we connect to the volto theme configuration so we will now have access to all the variables font names and everything which is provided by the world to in our list file
so notice that by importing we are able to use the volto and by extension all semantic ui and the less variable which are declared in the photo you can access it so maybe i can show you so i have to
just change it okay so here
okay so how you can do this like you
just create a list file like this one and you can see that like i i added the add-on name like the volto form builder i don't type like the form like it's just for like enhancing or something so you create the dot less file and you just put some css like this thing and and just import it like for where you want this style to go that's it like uh this is just the simple thing
like how the how you style this how
this uh style add-ons
so now like we have this functionality like okay we have installed the add-ons and we have everything like the blocks groups and the styling so we are happy with it but for the client project or for our like how we can modify the add-ons i do not want this behavior i want something to be like nice and good i want this modification so how we can i can change it so you can override the address block uh like the same as you do in the volto like the customizer thing customizing thing so you can overwrite your volatile like the same as the customizer but you can put the customize the whole to address you by putting into the customization folder as you do as the volto but please remember like you also have customizable photovoltaic and you want to customize the add-on so we provided another feature like put your volto customizers in the volto folder and put your add-on customizer into your add-ons folder that's the simple thing you have to keep in your mind that okay so if i am customizing go to an add-ons both put it and if you do not uh you can customize in uh customize the voltage just using the customizer folder you do not have to create the volto folder and then put it there but just for if you have if you are customizing so uh i can show you like how this customization things work so i will just show you live like so that you can see
[Music] no this one
so uh as
okay so i have this uh so i just close the addon folder and you can see that in customizing folder i have this thing the volto form builder components text area builder just follow the part which you which is the path here which is uh present in the address folder so you can see that in add-ons we have this volatile formula and also for form builder we we have this thing the component and the text area and then the date and the view so we are just following the same structure there like the verto formula components text area and the viewer js and then you can do whatever you want so i can [Music]
just quickly show you like how to do that
okay okay so i have this thing so you think that like this is the description and this is the text area block like you can see and if i just change this form
to div and please keep remember like i am changing into this one and save it
and you can see that like i have changed
the code uh in the view like i can just show you because we
need to just so i just changed the code from div
from form to div in the wonder form builder component and now you can see that like i am
getting i am getting this change
so now you can see that like i just removed this styling i am getting this so i think this is good like
so this is the way we can customize the
volto add-ons and the order of the customization so order how the order of the customization work in the volto so we have this verto thing we can customize the photo using the add-ons and we can customize the add-ons to the project so please remember that like you can mess up the add-ons via other projects so the higher property higher priority of the customization is used by the project so if someone overriding a component in the add-ons and and the project manager or the project the people who are working on the project just customize this uh the same folder which is customized by the add-ons then there will be a problem so if you are facing this problem like i just imported this add-on and i am doing everything right but i am not able to do that like but something is going getting wrong so how i can fix it so please remember that make sure like you go to the github check their project like which folder they are customizing and whether you are customizing the same folder or not so it's maybe a tedious task to find but if you if you remember like correctly like how to do that you can just you will be good like you can just look into that code and see that if you are making the same mistake as i did so i think
that i have to just check some makes
your life i'm just okay so order of customization so let me show you like i built a simple add-on like the world to home builder so maybe i can just quickly show you like how i did it and how and what's the picture it's a present and we have also if you want to know more about it the genius is talking about it like he also took some other other approach how to do that so if you want to look into that like what are the other projects which are implementing the world of formula please look into that but i still giving my approach like how it's look so it's currently in the development i
do not have lots of time to look into that but we have this very bare phone feature like currently like what's on the block and what will be the api and everything so currently like if uh install this add-on like you will get this form group and we have this thing like we have this input we are also trying to implement the input material feed i think that i should extract into a separate project like if this is the currently the uh current form of the world will like if you have uh if you see the form structure of the water like it has left and the right orientation and if you check out the input input material of the material detailing system it is like top end bottom like the top top has the level and the bottom has this fill type so currently we have these three things we have this lots of block like the input the text area that time submit button email checkbox select integer and yeah if you see like we have like a bunch of configuration like i can show you like for its simple one like you can put the name and the placeholder like put your name or something like that uh you can pass error message like we have this a common validation feature like if you want to do this required so if if the user does not fill this required the user will get notified like please fill your name or something like that like we provide the general error handling in the volto so it does that and we are planning like i am planning to have like this schema based validation so as a user like if you have something like you just will provide a bunch of configuration like by the adults and we you just select into that like i want this this this this validation and the atoms will take care of that like everything so i think so yeah this is like the check box the select block like so we have this from city name something like that city name choices so i'll just type some name like mumbai like bom ceremony and the error will say something like you have to choose something this is and you can see that like we have this selecting like the same as we do in any form like this one so this is uh the volto form builder and this is the order of the customization so i think i do not have any time because i just one minute left so i think that hope that you learn it you learn someone learn something from this talk and excited to see your work on the volatile add-ons like how you use this uh interesting tool to make your own add-ons and make your life easy yeah thank you thank you outlook that was a very whirlwind tour of uh how to add a volto add-on thank you again for doing that and volto add-ons are a new development and it's something that i'm going to be following a lot more closely really always appreciate seeing more information about how to do that as i believe you need to learn here are things seven times seven different ways to really understand it so i really appreciate it and thank you again outlook uh please join us in the face-to-face uh right now and alec will join the discussion there and can answer more of your questions there thank you again