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.