PageTree demo by

Developers

CMS components as blocks

Every frontend component registered by your plugins can be placed on a PageTree page as a block, with its properties editable in a form.

Add a component

  1. Click Add Component.
  2. CMS components are grouped by plugin in the library. Click the one you want.
  3. Double-click the block to set its properties.
  4. Save the page.

What works

  • Properties declared by defineProperties() are shown as a form: text, multiline text, checkbox, dropdown (including get{Property}Options() and optionsMethod) and string lists (one value per line).
  • On the website, the component is declared on the page as in a regular CMS page: init(), onRun(), AJAX handlers, component partials and its CSS/JS files work as usual.

Limitations

  • Preview: in the back-office, the preview shows a card that sums up the component and its properties. The real output only appears on the website.
  • Non-editable properties: properties of type set, dictionary, object and objectList cannot be edited yet. They keep their default value.
  • URL parameters: parameters such as {{ :slug }} are not available on PageTree pages.
  • CSS/JS files: they are output by {% styles %} and {% scripts %}. The page layout must contain these tags (see Theme integration).
  • Disabled plugin: if the plugin of the component is disabled or removed, the block shows "This CMS component is not available".

Alias and partial overrides

The component alias is generated from the block identifier: pagetreeComponent_<blockId>.

To override the component partials in your theme, place them in this folder:

themes/your-theme/partials/pagetreeComponent_<blockId>/

The override therefore applies to one specific block, not to every use of the component.