Create a control panel for a Volto add-on

Development Plone 6 UI (Volto)
1

Hello!

Can someone point me to a simple example showing how to declare a control panel for a Volto add-on.

The only resource I found is this PR Add addons controlpanel by esteele · Pull Request #297 · plone/volto · GitHub and I could find there that I am supposed to use the AddonsControlpanel component but it is not clear to me where that code goes.

Thank you!

2

Hi Eric, you may want to have a look at our training: 28. Vocabularies, Registry-Settings and Control Panels – Mastering Plone 6 Development — Plone Training 2023 documentation.

3

Oh ok, you mean I just need to declare the control panel on the Python side and it will be visible in Volto.

Thanks Katja!

4

There may be cases where you would want to create a frontend component for a control panel.
As long as you just want to have a UI for registry entries like for example a vocabulary for a choice field, it is indeed only necessary to configure a control panel for the backend, with the extra registration for the frontend:

from plone.restapi.controlpanels import RegistryConfigletPanel

@adapter(Interface, Interface)
class PloneConfRegistryConfigletPanel(RegistryConfigletPanel):
    """Volto control panel"""

    schema = IPloneconfSettings
    schema_prefix = "ploneconf"
    configlet_id = "ploneconf-controlpanel"
    configlet_category_id = "Products"
    title = "Ploneconf Settings"
    group = "Products"

If you want to provide a more sophisticated control panel for managing content data and/or user data, then a frontend component comes in handy.
This would need an additonal route and this being added to config.settings.controlpanels

src/index.js

  config.addonRoutes = [
    ...config.addonRoutes,
    {
      path: '/controlpanel/manage-breakingnews-subscriptions',
      component: ManageSubscriptions,
    },
  ];

  // Add manage view to controlpanel
  config.settings.controlpanels = [
    ...(config.settings.controlpanels),
    {
      '@id': '/manage-breakingnews-subscriptions',
      group: 'Add-on Configuration',
      title: 'Breaking News Manage Subscriptions',
    },
  ];

The component ManageSubscriptions is the to be written frontend component for managing the content/user data.

5

Hi @ksuess I was following the latest (I think!) training on this here:
20. Vocabularies, Registry-Settings and Control Panels – Mastering Plone 6 development — Plone Training 2024 documentation

I followed the directions and when I checked the frontend, I saw no control panel. Yet, when I went to the URL, the control panel appeared.

Based on your reply, I added just the second code block you suggested to update config.settings.controlpanels and that sufficed to make the control panel appear in the frontend editor. Should this be added in the training?

As written it makes no mention of it, but it seems that it doesn't work correctly unless you do this.

6

As long as you just want to create a control panel for the registry records of your add-on, there is no need to make changes in frontend code.

Be sure to follow all steps in the tutorial 20.6. Add a custom control panel
Registering a plone.restapi.controlpanels.RegistryConfigletPanel means that the panel is included in plone.restapi service @controlpanels and therefore is provided as one of the add-on panels in http://localhost:3000/controlpanel

7

The tutorial had me create three vocabularies in the registry but also had me create a boolean talks_submission_open property. Is that why it's requiring me to modify the frontend code?

8

Please re-install your add-on. This applies the profiles/default/controlpanel.xml
It is mentioned, but could be highlighted.

I'm, still running on low energy level because of a flu. Maybe someone else could step in and explain…