Video series - #03 Display Builder for Drupal: Entity View Display Explained

Author
G4MBINI
Tags
drupal-planet
display building
display builder
Reading time
3min
Comments

A walkthrough of how Display Builder (by UI Suite) takes control of your entity displays — and plays nicely with the tools you already use.

The Display Builder module continues to mature, and in his latest video, Pierre walks us through one of its most practical features: Entity View Display. If you've been following the series, this third installment builds directly on the foundations laid in the first two videos (component-based layouts and the plugin system). If you haven't seen those yet, this post should still give you a clear picture of what's possible.

You can watch the full demo here: Entity View Display — Display Builder Beta

Where Display Builder Stands Today

Before diving in, Pierre is upfront about the current scope. Display Builder works only for entity view displays for now — you won't find it in Views or other contexts just yet. Some features are still missing, and the contrib ecosystem around it is still growing. That said, the module already offers a compelling workflow for managing how your content is rendered.

Setting It Up

Getting started is straightforward. From the Drupal admin, you navigate to Manage Display for your content type (in Pierre's demo, an Article). The "display_builder_entity_view" sub-modules need to be enabled.

Once activated, a new Display Builder section appears on the Manage Display page. The key concept here: Display Builder takes control of a display as soon as a display profile is selected. In the demo, Pierre selects the "Default" profile and saves — and from that point, the entity rendering is driven by Display Builder.

The Editing Experience

After setup, two buttons coexist on the manage display page: the classic Drupal field UI and the new Display Builder interface. This is an important design choice — both tools can be used together, and you can adopt Display Builder incrementally, one display at a time.

Inside Display Builder, the experience mirrors what was shown in the earlier videos:

  • A UI Suite component (like a Card) serves as the layout.
  • Fields are placed into the component's slots.
  • Field formatters are configured with the same options available in the standard Drupal UI.

The main difference is in the library sidebar. Because entity displays are context-sensitive, the available blocks reflect what makes sense for the current context: fields, referenced entities, and so on. You won't see page-level elements like "Page Title" or "Main Content" here — those belong to page-level displays.

Revision History and Rollback

Display Builder tracks revisions. In the demo, Pierre shows the logs: the display starts as an unpublished draft, and each change creates a new revision entry. You can publish, review history, and — crucially — roll back at any time. This safety net makes it much easier to experiment or adopt Display Builder progressively without fear of breaking a production display.

Theming on the Fly

Pierre demonstrates a quick theming change: swapping a Card component's background from gray to a green accent color, then changing the border color to blue. Save, publish, done. The logs confirm each change. It's a simple example, but it highlights how Display Builder and the underlying component system work hand in hand to give site builders direct control over visual output.

Dynamic Field Properties: Where It Gets Interesting

The most powerful feature shown in the video is the ability to bind component properties to field values. Every field in Drupal exposes typed data, and Display Builder lets you wire that data directly into component props.

In the demo, Pierre takes a boolean property on a component (controlling image position: top or bottom) and binds it to the Article's Published status field. When the article is published, the image appears at the bottom; when unpublished, it moves to the top.

It's a deliberately simple example, but the mechanism is what matters: because Display Builder works with typed properties, any field value of any type can drive any compatible component prop. As Pierre puts it, "the sky is the limit."

Key Takeaways

  • Incremental adoption: you can enable Display Builder display by display, and always fall back to the standard Drupal UI.
  • Full compatibility: Display Builder and the classic manage display interface coexist without conflict.
  • Revision control: every change is tracked, publishable, and reversible.
  • Dynamic properties: field values can directly drive component behavior, opening up powerful conditional rendering without custom code.

Display Builder is shaping up to be a serious option for Drupal site builders who want component-driven layouts without leaving the admin UI. Keep an eye on the UI Suite ecosystem for what comes next.