Customize the frontend

Customize the frontend#

The Volto add-on registers its main pieces in the component registry. Your project or add-on can replace them from its configuration, without shadowing any file.

Replace a results chart#

The results of a poll are drawn by the component registered as PollResultsGraph, with the poll's graph type as the dependency: bar, pie, or numbers. Each one receives the results, in the order of the poll's options.

import type { PollResult } from '@plone-collective/volto-polls/src/types/poll';

export const MyBars = ({ results }: { results: PollResult[] }) => (
  <ul className="my-bars">
    {results.map((result) => (
      <li key={result.option_id}>
        {result.description}: {Math.round(result.percentage * 100)}%
      </li>
    ))}
  </ul>
);

Register it in your add-on's configuration function.

import { MyBars } from './components/MyBars';

export default function applyConfig(config) {
  config.registerComponent({
    name: 'PollResultsGraph',
    dependencies: ['bar'],
    component: MyBars,
  });
  return config;
}

Your add-on must come after @plone-collective/volto-polls in the addons list, so that its registration wins.

A multiple choice poll set to a pie chart is drawn with the bar component, because its percentages add up to more than 100.

Replace the whole poll#

The poll view and the Poll block both display a poll with the component registered as Poll. Register your own to change both at once.

config.registerComponent({ name: 'Poll', component: MyPoll });

See Frontend components for the properties it receives.

Contents