40. Reusable Features packaged in add-ons#
We will enhance the Plone Conference site with the following behavior:
Talks are submitted. The jury votes for talks to be accepted or rejected.
In this part you will:
Build your own Plone add-ons for backend and frontend.
Storing data in
Backend package creation with plonecli
Frontend package creation with Volto generator
Reactcomponents to display voting behavior in frontend
This part spreads about the next chapters:
Jury members shall vote for talks to be accepted or rejected.
For this we need:
behaviorthat stores its data in annotations
An endpoint for the frontend to communicate with
A frontend component that displays votes and provides the ability to vote
40.1. Create backend package#
pip install plonecli --user
We use plonecli to create a new package.
plonecli create addon backend/sources/training.votable
We press Enter to all questions except
--> Plone version [5.2.4]: 6.0.0b3 --> Python version for virtualenv [python3]: python
The new package is created in directory
40.2. Integrate package in training setup#
Before we implement our feature, we integrate the add-on by
installing the add-on as a Python package
updating the Zope configuration to load the add-on
restarting the backend
requirements.txt and add your add-on to be installed as Python package.
instance.yml and add the add-on to tell Plone to load your add-on. With this the site administrator can activate the add-on per site.
load_zcml: package_includes: ["training.votable"]
To apply the changes of the configuration, please build and restart the backend with:
make build make start
The add-on can now be activated for our site
Please head over to http://localhost:8080/Plone/prefs_install_products_form and activate / install the new add-on.
40.3. Create Volto add-on#
We will use the Volto generator to create an add-on. Please install the tool once with:
npm install -g @plone/generator-volto
Now the frontend add-on can be generated. We call it 'volto-training-votable' to indicate that it is the corresponding part to our recently created backend package.
cd frontend yo @plone/volto:addon
Choose "@plone-collective/volto-training-votable" as name for your add-on.
We are now ready to implement our voting behavior in our new frontend add-on created in
The generator not only created the add-on directory, but also made necessary changes in our frontend project to integrate the new code in our Volto app.
For a restart of the frontend we run a