Dynamic Content Elements (DCE) 

Classification

dce

Version

4.0

Language

en

Description

Best flexform based content elements since 2012. With TCA mapping feature, simple backend view and much more features which makes it super easy to create own content element types.

Keywords

TYPO3 CMS, DCE, FCE, Content elements, Dynamic Content Elements

Copyright

2012-2026

Author

Armin Vieweg

Email

armin@v.ieweg.de

License

This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml

Rendered

Thu, 13 Aug 2026 12:52:05 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from typo3.org.

Table of Contents

Introduction 

What does it do? 

With this extension, you can easily create new dynamic content elements.

In opposite to native content elements (like fluid_styled_content or content_blocks), DCEs are based on FlexForms. FlexForms allows you to define dynamic content structures, without the need to extend tt_content database table.

Goals of DCE 

  • Make it easy to create new custom content elements
  • With as many configurable fields as you want
  • Flexible and comfortable templating for each CE (using Fluid)
  • A lower learning curve for editors (using customized content elements)
  • and for integrators as well, who start with TYPO3 CMS

DCE Features 

Fields and tabs 

  • Create as many fields as required
  • Separate multiple fields with tabs (better overview)
  • TCA-style field configuration for field types supported by TYPO3 FlexForm data structures
  • Helpful dropdown in the backend, containing common used TCA snippets
  • TCA Mapping feature, which allows you to map single values from FlexForm XML to an existing or new column in tt_content
  • Custom FlexForm config option "dce_skip_translation", brings l10n_mode => 'exclude' behaviour (TCA only feature) to FlexForms

Easy templating (using Fluid) 

  • Frontend templates and custom backend templates use the Fluid Templating Engine
  • Inline Fluid templating support with a code textarea and snippet insertion
  • Templates can be stored in and loaded from files, allowing them to be version-controlled
  • A helpful dropdown provides defined variables (fields), common Fluid view helpers and all DCE view helpers in the backend
  • DCE ViewHelper which allows you to fetch a content element based on DCE in any Fluid template: <dce:dce uid="1">{field.title}</dce:dce>

Simple Backend View 

  • Just define the fields you want to preview in the backend, by clicking
  • Header and bodytext are separated. The field used for header is also used for the label in e.g. list view
  • Also FAL media can get previewed (in bodytext)
  • Alternatively you can provide a full custom Fluid template for backend preview rendering

Schema loading 

  • More custom FlexForm config options, starting with "dce_", to fetch objects instead of uid lists
  • Special handling for group, select, inline and file fields, which relate to different records
  • Converts comma-separated lists of uids to ready to use associative arrays or objects/models
  • Uses Extbase models (instead of associated arrays, if the requested table has one configured)
  • Resolves FAL relations (media) automatically
  • Resolves assigned categories (sys_category) automatically
  • Resolves file collections (sys_file_collection) automatically

DCE Container 

  • Creates virtual container around several content elements of the same CType
  • Fluid template of container can get adjusted
  • Useful for e.g. sliders or carousels
  • You can define a maximum of items per container
  • You can interrupt a container manually, in each content element
  • Containers are visually highlighted in page module (backend)
  • Used colors to identify several containers are configurable (via PageTS)
  • When container items also got detail pages enabled, you can hide all other content elements in container, when the detail page is active

Detail pages 

  • Use a different templates for single DCE instances
  • Controlled by configurable GET-parameter
  • Provide detail pages, thanks to slugs you can configure with Symfony Expressions
  • Also the detail page title can get adjusted with a Symfony Expression
  • When DCE container is also enabled, content elements which' detail page is not triggered, on current page, can get hidden automatically
  • DCE provides a **custom XML Sitemap data provider (EXT:seo) to index detail pages of DCEs, like regular pages

More 

  • Control the CType of your content elements by defining an identifier
  • Each DCE can have its own icon representation. You can also provide a custom icon.
  • Configure new content element in New Content Element Wizard (with description)
  • Display custom tt_content (native) fields in your DCE, using a palette displayed above the FlexForm fields
  • Show media and categories tabs (natively)
  • Frontend cache control
  • Direct output option (enabled by default), which bypasses lib.contentElement
  • TypoScript User Condition (to check if current page contains specific DCE)
  • Support for TYPO3's Import/Export extension
  • EXT:container support
  • Complete documentation
  • Smooth upgrade migration paths

Installation 

You can install DCE with or without composer.

Requirements 

  • TYPO3 14.3 or newer within the TYPO3 14 release line
  • PHP 8.2
  • PHP extensions DOM and JSON

With composer 

Require DCE on the command line:

$ composer req t3/dce:"^4.0"
Copied!

Composer installs and activates DCE automatically. Afterwards, set up the extensions and apply the required database schema changes:

$ vendor/bin/typo3 extension:setup
Copied!

Without composer 

You can also fetch DCE from TER and install it without Composer. Import and activate the extension through System > Extensions.

DCE provides no further options here.

First steps 

In this tutorial, we will create a simple content element with a title, a description and some images. Later we also enable the DCE Container feature.

Overview 

First, you need to login to TYPO3 backend with administrator privileges. Those are required to create or edit DCEs. Content elements made by DCE, can be also used with regular editor privileges.

You'll find DCE under "Admin Tools" in the main menu. It shows you a list of all DCEs existing in the database:

The DCE Backend Module

Create your first DCE 

Click the button "Create new DCE" and enter the title of your new dynamic content element. For example: "Teaser".

Also, we set the identifier to "teaser". Later this will be prefixed with "dce_" and used as CType of this new content element.

Now, create a new field, keep the default type "Element" and enter "Title" as field title. Set variable to "title".

As configuration we choose the option "Simple input field" from the dropdown above the configuration textarea. It pastes a sample configuration with commonly used settings. You should get this output:

New DCE with a single input field named "Title"

Now, add another new field with the title "Description" and "description" as the variable name. As configuration we use "RTE" from the dropdown box.

Helpful dropdown, with templates of the most common TCA configurations.

Next, create the last field with the title "Images" and the variable name "images". As configuration we use "File Abstraction Layer" from the TYPE: FAL group. It inserts a TCA type=file configuration with options such as the minimum and maximum number of images.

Save the changes. You should see the structure of your first DCE:

Your first DCE

Now, when you clear the system caches, you can already use the content element on your pages:

New content element based on your first DCE

Frontend Templating 

Let's return to your Teaser DCE and switch to tab "Template". You see a default template, which will be output in frontend for each instance (content element) of this DCE.

The inline template editor, with the DCE default frontend template

In this editor, you can define what TYPO3 should display, right in place. You can also load template files if you want.

The dropdown above the template field shows different items you can choose from. It displays the fields you have defined and some other very helpful stuff:

Helpful dropdown contents, to build your content element templates

Now, we build the frontend output that we want, for each content element based on this DCE. The template engine here is Fluid:

<div class="dce">
    <h2>{field.title}</h2>
    <div><f:format.html>{field.description}</f:format.html></div>
    <f:for each="{field.images}" as="image" iteration="iterator">
        <f:image image="{image}" alt="{field.title}" maxHeight="100" />
    </f:for>
</div>
Copied!

We use variables pointing to the fields we've defined before, e.g. {field.title}.

When you want to output HTML, you need to use format.html view helper of Fluid. You can use it like in the example above, or inline: {field.description -> f:format.html()}. Also, we use the for view helper in Fluid to iterate over {field.images}. It's an array of FileReferences, which can get directly passed to the image view helper.

When we save the DCE, clear the system caches (!) and create a new content element based on this DCE, we see this output (in backend and frontend):

Content element with filled fields (backend) Output of this content element, based on previously written Fluid template (frontend)

The Backend View 

So far we have defined the fields of our content element and the frontend output. But how is the content element displayed in the backend?

Default output of a DCE content element in the page module (TYPO3 backend)

Well okay, it displays the title of the DCE we have defined. But we do not see any differences when we have two of these content elements on the same page. Let's change this, by configuring the Simple backend view in Backend Template tab.

The Simple Backend View configuration

Here you can define which (single) field should be displayed as header (and label in list view). And which fields should also get displayed in bodytext. When we choose all options from bodytext field (but DCE title), we get more info about our content element instances:

Output of content element in page module, with configured fields (Simple Backend View)

This saves much time and helps you to build fast new content elements.

DCE Container 

Until now, you know the very basics of how DCE works. Let's use a more intermediate feature as of the last step in this tutorial, which is potentially helpful for you: DCE Container

First, let's see the output of our content elements in the HTML source code of frontend output. We have placed two content elements on a page:

HTML source code of two content elements in frontend output (based on DCE)

When we compare this HTML source with the Fluid template from above, we will see our code, with filled placeholders. Each content element is wrapped with <div class="dce"></div>, because we have defined it in our template.

DCE Containers help you to wrap all those standalone elements with a custom container template. First, you need to enable the feature:

Settings and template for DCE container

Just by enabling the feature (and clearing the caches) we see an instant effect in HTML output:

Enabled DCE container template output

We see two wraps:

  • dce-container This comes from the container template itself
  • tx-dce-container This is because we use the DefaultContainer Fluid layout (which is optional)

Also, the backend view has been upgraded, it displays a color (calculated based on uid of the first element in the container):

DCE container colors in Simple Backend View

What's next? 

Congratulations! You know how to create a first content element in DCE.

Check out the next section in the documentation Users manual to get an overview of the options and possibilities DCE gives you.

Have fun! And when you have questions, check out the Support section :)

Users manual 

Every option you can set while creating or modifying a DCE is described here in detail. Mandatory fields are signed by a red border and exclamation icon. At least these fields have to be filled out.

All options of a DCE are grouped to these tabs.

General 

On this tab, you can make the general settings. You can decide whether the element is visible or not, give it a meaningful name and identifier and define all the fields that are needed.

Create new DCE, general tab

Title 

This is the name of the DCE, which is also shown in the type selection of a content element. You can point to LLL: references here and translate the title for different languages.

Identifier 

The identifier is used to generate the CType for content elements based on this DCE. Enter the identifier without the dce_ prefix. For example, the identifier what_ever generates the CType dce_what_ever. When the identifier remains empty, DCE generates dce_dceuid<uid>. The identifier must be lowercase; underscores are allowed.

Examples for values entered in the identifier field: teaser or what_ever.

Inactive 

When the DCE is inactive or hidden, it is not shown as the type when a content element is created. It is only shown in the DCE BE module.

Fields 

A new DCE field

In the fields section, you can add a number of different fields that this DCE should contain. A DCE can be saved without fields, but no usable CType or TCA registration is generated until it contains at least one active field.

A field has three types available:

  • Element This is a field in your new content element, like a text field, a checkbox, an image or a whole rich text editor (RTE). The composition for this field is done in the configuration. You can use field types and options supported by TYPO3 FlexForm data structures.
  • Tab This creates a new tab register. All fields that are defined below this tab are shown in BE on a new tab page. You may also rename the first "General" tab by creating a tab as the first item.
  • Section It is highly encouraged to not use sections anymore! Check if DCE Container can help you or use EXT:container for your purposes.

Common to all types is the title field, where you define a speaking label for the editor. You can use an LLL: reference here. A Tab also has a required variable, which is used as its FlexForm sheet identifier, and can be marked as inactive.

Field options 

For the default type Element you have to define a title (with LLL: support) and a variable name which is to be used in the Fluid template. Variable names have to be written in lowerCamelCase and the variable names must be unique inside each DCE.

To make it a bit easier there is a handy select box provided with the most used possible input field types. If you select one entry the corresponding FlexForm XML code is inserted in the configuration input field.

Handy dropdown which most common needed TCA configurations Pasted configuration for "Simple input field"

For fields which use the TCA types group, select, inline or file, there are additional configuration attributes provided by DCE available.

dce_load_schema 

<dce_load_schema>1</dce_load_schema>
Copied!

When adding a group field and link it with e.g. News (by Georg Ringer), then the field contains a comma-delimited list with uids of the selected news. That is not very useful in Fluid templates.

But when this attribute is activated, the used table is inspected. If an Extbase model and repository exist for this table then the repository is instantiated and a findByUid() is called for every uid. The complete Extbase models are then taken over to the Fluid template (as an array).

If the table is not part of an Extbase extension, the corresponding record is loaded from the database and handed over as an associated array.

Using the table tt_content and adding content elements which are based on another DCE, automatically the corresponding DCE will be loaded and filled. In the template of the second DCE the template of the inserted DCE can be called and rendered:

<f:for each="{field.otherDces}" as="otherDce">
    {otherDce.render -> f:format.raw()}
</f:for>
Copied!

You need to use the raw view helper of Fluid because otherwise the rendered HTML will be escaped. If you use the f:format.html view helper the curly braces get escaped and variables will not be interpreted anymore.

It is also possible to access directly the value of single fields:

{otherDce.get.fieldName}
Copied!

dce_load_entity_class 

<dce_load_entity_class>VendorName\Extension\Domain\Model\YourModel</dce_load_entity_class>
Copied!

Uses this class (and its repository) instead of guessing the model class name from table name.

dce_get_fal_objects 

<dce_get_fal_objects>1</dce_get_fal_objects>
Copied!

This option is evaluated while schema loading is active, so both dce_load_schema and dce_get_fal_objects are required. A field with type=file or a relation to sys_file_reference returns an array of TYPO3\CMS\Core\Resource\FileReference objects. A relation to sys_file returns an array of TYPO3\CMS\Core\Resource\File objects.

dce_ignore_enablefields 

<dce_ignore_enablefields>1</dce_ignore_enablefields>
Copied!

For records loaded through DCE's associative-array database fallback, this option removes restrictions for fields such as deleted, hidden, starttime and endtime. It does not change the query settings of an Extbase repository.

dce_enable_autotranslation 

<dce_enable_autotranslation>1</dce_enable_autotranslation>
Copied!

If you load a page via group field, then always this page is loaded, regardless of the language that is just used. Using this attribute shows the translated page if it exists.

For pages, DCE uses TYPO3's getPageOverlay() handling. For other records, it uses getLanguageOverlay().

dce_skip_translation 

<dce_skip_translation>1</dce_skip_translation>
Copied!

When a DCE field got this option set, DCE fields act like l10n_mode => 'exclude' in TCA. Normally FlexForms does not support this behaviour.

In backend, a field with this option set is only visible, when:

  • You are on default language (sys_language_uid = 0) or
  • the translated DCE content element has no l18n_parent set

To achieve this, DCE modifies the displayCond for the field, in XML configuration - when you already defined some display conditions, they get merged (using <and>).

In frontend, the field value will get overwritten by the field value of the l18n_parent-element, no matter which values are stored in pi_flexform.

This feature is not supported for section fields.

Special Thanks to Silverback (https://silverback.st/) who sponsored this feature!

Template 

On this tab, you define the template which is used for displaying the content of the DCE in the FE. You can use the full power of Fluid at this place.

Template type 

File 

The option File let you choose a file that contains the Fluid content that should be used as the template for this DCE. The file name is selected in the "Template file (fluid)" input field.

This option makes it possible that you put the templates under revision control due to the fact that the files are stored in the file system.

Fluid template outsourced to file

The template file can be referenced using one of the following path types:

  • EXT: references a file inside a TYPO3 extension and is the recommended syntax. For example: EXT:my_template/Resources/Private/Templates/Example.html.
  • PKG: references a file inside a Composer package. Separate the package name and the path within the package with a colon. For example: PKG:vendor/my-template:Resources/Private/Templates/Example.html.
  • A relative path is resolved from TYPO3's public web root. The template file is therefore publicly accessible. For example: fileadmin/templates/Example.html.

The configured value must resolve to a file-system path. FAL link syntax such as t3://file=uid=1 is not supported.

If the configured path is invalid or the file does not exist, DCE treats the template as empty and produces no output.

Inline 

The default template type Inline lets you edit the Fluid template directly in DCE's code textarea in the "Template content (fluid)" field.

Inline code textarea to edit Fluid templates in place

No namespace declaration 

The dce namespace is registered globally and does not need to be declared in each Fluid template.

Do not retain the former ArminVieweg\Dce\ViewHelpers namespace declaration. If an explicit declaration is required, use the current namespace:

{namespace dce=T3\Dce\ViewHelpers}
<div class="dce">
    Your template goes here...
</div>
Copied!

Usually, the namespace line should simply be omitted.

Dynamic Templating 

With the select box in the "Template content (fluid)" section you can insert variables and view helpers into the template. The selected variable or view helper is inserted at the current cursor position in the template.

Helpful dropdown containing your defined variables and common used Fluid snippets.

There are several groups inside the select box, which offers you help to work with Fluid:

  • Available variables
  • Available base variables
  • Famous view helpers
  • DCE view helpers

Available variables 

This group shows all previously defined variables. You have to save the DCE before newly created fields appear in the
dropdown field. All custom variables are available with:
{field.nameOfVariable}
Copied!

Available base variables 

Besides the custom variables, the following base variables are available when rendering an individual DCE:

  • {dce} - The DCE object. To access field values use: {dce.get.fieldName}
  • {contentObject} and {data} - The content object row, this DCE instance is based on. It contains all tt_content properties as array.
  • {contentElementRecord} - The content element as a TYPO3\\CMS\\Core\\Domain\\RecordInterface object.
  • {page} - The current page record (only available in frontend)
  • {pageInformation} - The PageInformation object (only available in frontend)
  • {site} - The current site instance (only available in frontend)
  • {tsSetup} - TypoScript setup of the current page (only available in frontend)

Container templates are different: they receive {dces}, an array of DCE instances, and do not receive {dce}.

The {contentElementRecord} variable can be passed to TYPO3's f:render.text ViewHelper to render a field:

<f:render.text record="{contentElementRecord}" field="header" />
Copied!

Famous view helper 

This group lists often used view helpers provided by Fluid itself. Detailed information about Fluid ViewHelpers is available in the official TYPO3 Fluid ViewHelper Reference.

  • f:count
  • f:debug
  • f:for
  • f:format.crop
  • f:format.html
  • f:if
  • f:image
  • f:link.email
  • f:link.external
  • f:link.page
  • f:render

DCE view helpers 

DCE also provides own view helpers, which can help using the field data in Fluid.

dce:arrayGetIndex 

Normally you can access array values with {array.0}, {array.1}, etc. if they have numeric keys. This view helper converts named keys to numeric ones. Furthermore if you are able to set the index dynamically (i.e. from variable). Index default is 0.

Example:

{array -> dce:arrayGetIndex(index:'{iteration.index}')}
Copied!

dce:explode 

Performs trimExplode (of GeneralUtility) to given string and returns an array. Available options are: delimiter (default: ,) and removeEmpty (1).

Example:

{string -> dce:explode(delimiter:'\n')}
Copied!

dce:fal 

Get file references in FAL. The option contentObject must pass the contentObject to the view helper, the option field must contain the variable name of the field which contains the media.

Example:

<f:for each="{dce:fal(field:'thisVariableName', contentObject:contentObject)}" as="fileReference">
    <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
</f:for>
Copied!

dce:fileInfo 

Useful to fetch informations about a single sys_file record, you need to deal with when using section fields. Most common attributes are: title, description, alternative, width, height, name, extension, size and uid.

Example (when working with sections):

<f:for each="{field.section}" as="entry">
    <f:for each="{entry.images -> dce:explode()}" as="imageUid">
        <f:image src="file:{imageUid}" width="350" /><br />
        Width: <dce:fileInfo fileUid="{imageUid}" attribute="width" />px
    </f:for>
</f:for>
Copied!

dce:format.addcslashes 

Add slashes to a given string using the PHP function "addcslashes". Available option is: charlist (default: ').

Example:

<dce:format.addcslashes>{field.myVariable}</dce:format.addcslashes>
Copied!
{field.myVariable -> dce:format.addcslashes()}
Copied!

dce:format.replace 

Performs str_replace on given subject.

Example:

{field.text -> dce:format.replace(search: 'foo', replace: 'bar')}
Copied!

dce:format.stripslashes 

Strips slashes from given subject. The option performTrim (default: 0) also performs a trim when enabled.

Example:

{field.text -> dce:format.stripslashes(performTrim: 0)}
Copied!

dce:format.strtolower 

Performs strtolower on given subject and converts string to lower case.

Example:

{field.text -> dce:format.strtolower()}
Copied!

dce:format.tiny 

Removes tabs and line breaks.

Example:

<dce:format.tiny>
    Removes tabs and
    linebreaks.
</dce:format.tiny>
Copied!

dce:format.ucfirst 

Convert a string's first character to uppercase.

Example:

{variable -> dce:format.ucfirst()}
Copied!

dce:format.wrapWithCurlyBraces 

Use this view helper if you want to wrap something with curly braces {}. Available options are: prepend and append, which add strings before or after the given variable, but inside of curly braces.

Example:

<dce:format.wrapWithCurlyBraces prepend="" append="">{field.myVariable}</dce:format.wrapWithCurlyBraces>
Copied!

dce:isArray 

Checks if given value is an array. Example:

{variable -> dce:isArray()}
Copied!

dce:thisUrl 

Returns the URL of the current page. Available options are: showHost (default: 0), showRequestedUri (default: 1) and urlencode (default: 0).

Example:

{dce:thisUrl(showHost:1, showRequestedUri:1, urlencode:0)}
Copied!

DCE Container 

DCE Container is a new feature introduced in DCE 1.3. It allows you to wrap several content elements based on a certain DCE with a Fluid template.

This is especially useful for slider libraries (for example). If you want to create one content element for one slide, but you need to wrap all slides with a container <div> element, which initializes the functionality of the library.

First, you need to enable the feature:

DCE Container configuration

Enable DCE Container 

Enables/Disables DCE Container feature. This option influences the frontend rendering instantly.

When enabled, all content elements (tt_content) in a row based on this DCE are wrapped with the DCE container template. The content elements "in the row":

  • base on the same DCE (with enabled DCE container feature)
  • are located on the same pid
  • are located in the same sys_language_uid
  • are located in the same colPos

Any other content element type interrupts the container.

Container item limit 

You can set an item limit (default: 0 / disabled) to limit the number of content elements a container may have. When the the limit is reached, the next content element starts a new container.

Hide other container items, when detail page is triggered 

When the DCE container and the detail page feature is enabled, this option makes it more comfortable to hide all other content elements, which' detail page template is not triggered.

When this checkbox is enabled, all items in a container are hidden, if one item in the container is triggered by detail page GET parameter. In this case, the container template is still rendered, just with a single item. Other containers are not affected.

Template type 

Like the default frontend template of DCE, you can outsource the code of the container to a file. See supported template file paths for the available path types.

DCE Container template 

This template contains the code of the container wrapped around all DCEs within the container.

<div class="dce-container">
    <f:render partial="Container/Dces" arguments="{dces:dces}" />
</div>
Copied!

All DCEs in the container are stored inside the variable {dces} which is an array of Dce model instances.

So when you iterate over the dces array (using f:for loop) you can access single field values or render the default template. So this partial is basically this:

<div class="dce-container">
    <f:for each="{dces}" as="dce">
        {dce.render -> f:format.raw()}
    </f:for>
</div>
Copied!

When the page is rendered in the TYPO3 Visual Editor, each content element is rendered in a separate instance of the container template. In this context, {dces} therefore contains only the current content element. This allows the Visual Editor to recognize and edit each content element separately. Regular frontend rendering is not affected.

Container iterator 

When DCE container is enabled, each DCE has the new attribute containerIterator available, which allows you to get info about the position of the DCE inside of the container, like the iterator in Fluid you know from f:for loop:

  • {dce.containerIterator.total}
  • {dce.containerIterator.index}
  • {dce.containerIterator.cycle}
  • {dce.containerIterator.isEven}
  • {dce.containerIterator.isOdd}
  • {dce.containerIterator.isFirst}
  • {dce.containerIterator.isLast}

In the Visual Editor, every separately rendered container item has an index of 0 and a total of 1.

Container in backend 

When you are using the Simple Backend View, you get a color mark for each content element:

DCE Container when Simple Backend View is enabled

The colors being used can be adjusted using PageTS (on root level):

tx_dce.defaults.simpleBackendView.containerGroupColors {
        10 = #0079BF
        11 = #D29034
        12 = #519839
        13 = #B04632
        14 = #838C91
        15 = #CD5A91
        16 = #4BBF6B
        17 = #89609E
        18 = #00AECC
        19 = #ED2448
        20 = #FF8700
}
Copied!

By default, DCE provides ten color codes, which are picked based on the uid of the first content element in the container.

Start new container 

In content elements you also got the "Start new container" option when DCE container is enabled:

"Start new container" option in content elements

When this checkbox is enabled, a new container is created, like in the screenshot above. With this, you can interrupt and start containers manually.

Backend Template 

Each DCE has not only a template for the frontend output, but also for the backend output. Without a backend template you will not be able to see differences in your content elements, in the page or list view.

DCE provides two ways to set up the backend template:

  • Simple Backend View and
  • Manual Backend Fluid template

Simple Backend View 

The Simple Backend View allows you to define fields you want to display, just by clicking it.

Simple Backend View for DCEs

This example looks like this in backend:

DCE Container when Simple Backend View is enabled

Expression for header field 

Since DCE 2.7 you can enable a checkbox, which reveals an input field. There you can use Symfony Expressions to output more than one field in content element's header.

Enabled Symfony expression for simple backend view header field

This header expression will - for example - generate the following header: "Teaser: My second teaser"

PageTS configuration 

You can adjust image processing and container colors using PageTS. Currently, imageWidth is used for both requested image dimensions:

tx_dce.defaults {
    simpleBackendView {
        imageWidth = 50c

        containerGroupColors {
            10 = #0079BF
            # ...
        }
    }
}
Copied!

Manual Backend Fluid Template 

When you disable the Simple Backend View, you can enter a template (or reference a file using one of the supported template file paths) based on the "BackendTemplate" Fluid layout, which has two sections: header and bodytext

<f:layout name="BackendTemplate" />

<f:section name="header">
    <strong>{dce.title}</strong><br>
</f:section>
<f:section name="bodytext">
    Your backend template goes here...
</f:section>
Copied!

Icon & Wizard 

Here you can define an icon used for the new content element and control appearance in new content element wizard.

Icon & Wizard settings for DCE

DCE icon 

The icon that is displayed in front of the entry in the wizard list can be chosen from a large number of available icons. You can also choose "custom", which displays a new field to select the custom icon.

The icon also applies to CType icon.

Custom icon 

If none of the included icons fits your needs, enter a valid icon resource path, preferably EXT:your_extension/Resources/Public/Icons/YourIcon.svg. DCE does not upload the file or enforce specific dimensions.

Show DCE in content element Wizard 

When this option is enabled then an entry for this DCE is added to the list of the New Content Element Wizard.

Wizard category 

You can select here in which category of the wizard the DCE should appear. Besides a new category "Dynamic content elements" also the TYPO3 own categories are available.

Wizard description 

This is a short description text which is shown in the wizard and should describe what is the function of this content element. It can be also be left empty.

Detail page 

The detail page can be used to display the fields of the DCE in another manner. For example, if you have many fields defined for your DCE you can display the most important fields with the normal template and the complete amount of fields with the detail template.

The decision to display either the normal template or the detail page template is done by detecting the detail page identifier (GET parameter). If it is found and it contains the uid of the actually shown DCE, the content is rendered with the detail page template otherwise the normal template is used.

DCE detail page template and trigger

Enable detail page 

To enable the functionality for using a detail page you have to check this option.

Detail page identifier (GET parameter) 

This is the parameter which must be used in the GET parameter of the URL to enable the display of the detail page. The value of this GET parameter must be the uid of the displayed content object, to trigger the detail page template.

You should avoid using a parameter name, which is already in use, like "id", "type" or "L".

Slug expression 

Since DCE 2.6.0 a detail page can have a beautiful URL, thanks to TYPO3's routing enhancer, available since TYPO3 v9. This slug expression field controls how the slug is being build.

You can choose a single field or multiple, thanks to Symfony's expression language.

A registered routing enhancer configuration is required, to use this feature. There is a dedicated chapter for this, checkout Faking detail pages.

Page title expression 

This expression is evaluated in the same way as the slug expression, but its result is used for the page title of the detail page.

Use page title expression as page title 

With this option enabled, the current page title is modified based on the page title expression. Unlike slugs, generated DCE detail page titles are not sanitized, for example by converting spaces to dashes.

You can choose between four options:

  1. No, keep title as it is (default)
  2. Yes, overwrite the current page title
  3. Yes, prepend the page title expression output to the current page title
  4. Yes, append the page title expression output to the current page title

When selecting "prepend" (3) or "append" (4), the generated DCE detail page title gets separated by a configurable string. By default it separates the DCE and the page title by ' - '.

You can configure this by TypoScript, this is the default configuration DCE ships:

config.pageTitleProviders.dce {
    prependWrap = || - |
    appendWrap = | - ||
}
Copied!

Those values are used in a stdWrap noTrimWrap function.

Template type 

Like the normal template you can choose between the inline template code and using a template file. The supported template file paths apply here as well.

Detail page template (Fluid) 

Using the inline template type you have to insert the template code in the same manner as for the normal template.

Miscellaneous 

This tab contains all settings which are difficult to put in a category.

Miscellaneous settings

Cache DCE frontend plugin 

DCE generates the frontend plugin registration automatically when its code cache is rebuilt. This option controls whether DceController::showAction is registered as cacheable or non-cacheable for this DCE.

Direct output 

With this option enabled you bypass fluid_styled_content. Instead of using lib.contentElement, the DCE controller action is used directly. This reduces rendering overhead and removes wrappings defined by Fluid Styled Content, for example <div id="c123" ...>.

This option is enabled by default, separately for each DCE.

FlexForm label 

Defines the text displayed in the content element:

FlexForm label in the content element

Enable media tab in backend 

This option is only available when EXT:fluid_styled_content is installed. If this option is activated a tab with media (FAL) field is shown in the backend.

You can access the {contentObject.assets} or {contentObject.media} variable in a Fluid template. It contains an array of \TYPO3\CMS\Core\Resource\FileReference.

Enable categories tab in backend 

If this option is activated a tab with category picker is shown in the backend.

You can access {contentObject.categories} variable in Fluid template. It contains an array of \TYPO3\CMS\Extbase\Domain\Model\Category.

DCE palette fields 

This is a list of fields which should be shown in the head area of this DCE in the backend.

Fluid layout and partial root path 

Layouts and partials are a part of Fluid templates and are used to avoid redundancies and keep the code cleaner.

Here you can define Fluid templates folders where to find the layouts and the partials.

With TypoScript you can also set up multiple folder paths for layouts and partials with priority order.

The DCE backend module 

Under Admin Tools in the main navigation of TYPO3 backend you find "DCE" which leads to this dashboard:

The DCE backend module

Dashboard 

On the dashboard, you see all DCEs you have created.

You see pieces of information for each DCE:

  • Status (enabled/disabled)
  • Identifier
  • uid
  • Usage (amount of content elements using this DCE) - click on it, to see more details

    Content elements using this DCE
  • Infos about features used, like DCE container, TCA mappings
  • Amount of fields used in this DCE

Also when you have mapped values to TCA columns of tt_content, you get an Update TCA Mappings button, which updates the values of mapped columns, by given FlexForm values.

More stuff 

In the backend module, you also find helpful links to Documentation, Facebook page, etc.

Also, you can clear the system caches, switch to list view and create and edit DCEs.

You can donate and see other donators in the hall of fame.

TCA Mapping 

Since DCE 1.2 you are able to map the field values of your DCEs to tt_content columns. DCE is also able to create new columns if necessary.

TCA mapping

When creating new columns the following options have the following effect:

  • New TCA field name: Name of the column in database and TCA. You are free to choose the name. Nothing gets prepended. It is recommended to use_underscores instead of usingCamelCase.
  • New TCA field type: This is the type of field in the database. Example: varchar(255) DEFAULT '' NOT NULL. You can also use the keyword auto. DCE will choose a proper SQL field type based on chosen configuration type in FlexForm.

Creating or changing a mapped column only adds the desired column to TYPO3's schema definition. Run the database schema analyzer and apply the proposed schema update before saving content into the new column. Afterwards, flush the system caches. Until the database column exists, saving mapped content results in an exception.

Of course, you can also choose an existing tt_content column. DCE introduced the tx_dce_index column which can get used to index content for search engines (like ke_search or solr).

When you point two or more DCE fields to the same TCA column, DCE checks the accumulated column value with PHP's empty(). If it is not empty, the next value is appended with two PHP_EOL characters. If it is empty, including the value "0", the next value replaces it.

Every time you change a content element based on DCE with TCA mappings, the TCA values will get written, when saving/creating the content element.

If you want to update the values, you can call an update script (Update TCA mappings) in DCE backend module.

User conditions 

User conditions can be used in the TypoScript setup. DCE provides such a user condition:

DceOnCurrentPage 

This user condition checks if the current page contains a content element based on given DCE.

Usage in TypoScript:

[dceOnCurrentPage("teaser")]
    page.10 = TEXT
    page.10.value = The current page contains a teaser DCE.
[END]
Copied!

You can use either the identifier or the uid of a DCE. The equivalent uid-based condition is:

[dceOnCurrentPage("42")]
    page.10 = TEXT
    page.10.value = The current page contains DCE 42.
[END]
Copied!

The condition respects the standard record restrictions and follows the page configured as content source through content_from_pid.

Code Caching 

DCE generates PHP code and XML for new content elements during TYPO3's bootstrapping. To decrease database queries during this process, DCE 2.2 introduced an own small CacheManager.

The code cache for DCEs is always enabled.

This cache contains generated DCE registration, TCA and FlexForm code. It is independent of the per-DCE "Cache DCE frontend plugin" option, which controls whether the frontend controller action is cacheable.

Why DCE ships its own Cache Manager? 

In DCE 2.1 the TYPO3's core cache manager has been used to cache DCE code. But TYPO3 does not allow to use its Cache Manager during bootstrapping (limbo mode) in TYPO3 10 anymore. Therefore DCE provides it's own cache manager.

The shipped cache manager stores generated files below var/cache/code/dce.

When clearing TYPO3's system caches in the backend or with the cache:flush CLI command, the DCE code cache is rebuilt automatically.

When warming an empty cache from the command line, run cache:flush --group system before cache:warmup --group system so the DCE code cache exists before TYPO3 builds its system caches.

Faking detail pages 

With DCE 2.6.0 a new feature has been introduced, which allows you to simulate or fake detail pages, based on DCE content elements: Slugs and custom titles for DCE detail pages

Special Thanks to Silverback (https://silverback.st/) who sponsored this feature!

Silverback

Features 

  • Slugs for detail pages
  • Thanks to Symfony Expression Language, you can use multiple DCE fields as slug
  • Field contents used for slug, get sanitized
  • Fallback if slugs are not unique (in this case, the uid of content element is appended to slug)
  • Modify current page title on detail page

    • based on its own detail-page title expression
    • you can replace, prepend or append the DCE detail page title

Installation 

Once you've upgraded to DCE 2.6, you just need to apply the following routing enhancer configuration in your sites configuration yaml:

routeEnhancers:
  DceWithDetailpage:  # you are free to choose a unique name here
    type: Simple
    routePath: '/show/{detailDceUid}'  # the given argument, must match with set detailpage_identifier
    aspects:
      detailDceUid:  # Same here
        type: PersistedAliasMapper
        tableName: tt_content
        routeFieldName: tx_dce_slug
Copied!

Now, all DCEs with detail page enabled and identifier set to detailDceUid get beautified slugs.

Configuration 

On tab "Detail page" in every DCE you find three new options:

How it works 

DCE adds a new column tx_dce_slug to the tt_content table. A non-empty slug expression controls whether DCE generates and stores a slug. The "Enable detail page" option separately controls whether a request can trigger the detail template; disabling it alone does not clear an existing slug.

An after-save-hook updates the slug every time:

  • a content element get updated (or created)
  • the slug expression in DCE changed

    • then, all content elements existing, based on current DCE, get updated
    • slugs get removed, when slug expression is empty

With this static slug set, the routing enhancer configuration works with standard PersistedAliasMapper.

Tips 

To make the illusion of a detail page perfect, here are some tips for you.

Hide other content elements 

If you have more DCEs with detail templates on one page, the template will just switch for one of your content elements. The other DCE will still be visible and displays the normal template.

When you want to hide all other content elements you need to do some typoscript.

Fluid Styled Content 

[request.getQueryParams()['detailDceUid'] > 0]
    styles.content.get.select.uidInList {
        data = GP:detailDceUid
        intval = 1
    }
[END]
Copied!

This small snippet checks whether the GET parameter "detailDceUid" is set. If it is set, it tells the select function in Fluid Styled Content to display only this content element by passing the GET parameter value to the query.

Of course, we need to avoid SQL injection, by casting the value to an integer by using (stdWrap.)intval.

This example removes all other content elements from the normal column rendered by styles.content.get. For other content areas, adapt the project's own CONTENT, content-area or equivalent rendering configuration.

Caution: This snippet will probably not work, because mostly TYPO3 Integrators uses this to assign the contents to the template:

page.10 < styles.content.get
Copied!

The lower than sign (<) copies the given value. But with our snippet above we override the original one. The copy will not be affected. The easiest way would be to use a reference instead:

page.10 =< styles.content.get
Copied!

Then changes to the referenced Fluid Styled Content TypoScript object also affect the copied output.

Bootstrap Package 

In Bootstrap Package fetching content elements happens a bit different. Here, lib.dynamicContent is utilized by the f:cObject view helper from within the templates, so we modify this lib:

[request.getQueryParams()['detailDceUid'] > 0]
    lib.dynamicContent.20.select.uidInList {
         override.cObject = TEXT
         override.cObject.data = GP:detailDceUid
         override.cObject.intval = 1
         override.if {
             value.data = register:colPos
            equals = 0
         }
    }
[END]
Copied!

Include detail pages to XML sitemap (EXT:seo) 

Since DCE 2.9 there is a detailpage XML sitemap data provider shipped, which adds DCE content elements with detailpages to XML sitemap, automatically.

You just need to adjust the default EXT:seo TypoScript configuration like this:

plugin.tx_seo.config.xmlSitemap.sitemaps.pages.provider = T3\Dce\Seo\XmlSitemap\DetailPagesXmlSitemapDataProvider
Copied!

Then, DCE content elements with detailpage enabled will also provide an entry in XML sitemap pages section. Priority and change frequency is taken from the page record, where the DCE is located on.

Special Thanks to Silverback (https://silverback.st/) who sponsored this feature!

DCE ViewHelper 

Since DCE 2.6, DCE ships a DCE view helper, which allows you to fetch a DCE instance of content element by uid, in any Fluid template.

Because the DCE extension registred the global Fluid namespace "dce", you can instantly use the DceViewHelper, e.g. in your website Fluid template:

<dce:dce uid="123">
    {dce.render}
</dce:dce>

<dce:dce uid="123">
    {dce.renderDetailpage}
</dce:dce>

<dce:dce uid="456">
    {dce.get.lastName}, {dce.get.firstName}
</dce:dce>
Copied!

Within the dce:dce view helper tag, you can

  • render the whole DCE (detailpage) template
  • or define an own template for this particular usage of the content element

The uid argument is mandatory.

Available variables 

Inside of the DCE view helper you can access the following variables:

  • {dce}
  • {contentObject}
  • {fields} and {field}

DCE Expression Utility 

In DCE you have several places where you can use Symfony Expressions, to define the output.

Usage 

Everytime you can define a Symfony expression in DCE you have the following variables available:

  • dce (object)
  • contentObject (array)
  • All field variables you have defined

When you have e.g. a field with variable "title", you can simply enter title. Then the value of this field is used.

To concatenate multiple fields you can use the tilde sign (~) like this:

firstName ~ ' ' ~ lastName
Copied!

When you want to add some custom strings (like the space between firstname and lastname), those have to be wrapped with single or double quotes.

The whole DCE object (dce) and the row of tt_content item (contentObject) are also available:

dce.getTitle() ~ ' ' ~ contentObject['uid']
Copied!

TypoScript configuration 

Files root paths 

Since version 2.9 DCE is able to load and use template files from multiple locations, in frontend context. You can check the default configuration in Configuration/TypoScript/setup.typoscript.

Example of setup override:

plugin.tx_dce.view.templateRootPaths.10 = EXT:my_template/Resources/Private/Dce/Templates/
plugin.tx_dce.view.partialRootPaths.10 = EXT:my_template/Resources/Private/Dce/Partials/
plugin.tx_dce.view.layoutRootPaths.10 = EXT:my_template/Resources/Private/Dce/Layouts/
Copied!

Edit DCE button 

In the backend, when you are logged in as administrator, you can access the configuration of a content element based on DCE, right inside the content element itself:

Edit DCE button for administrators

When you click on it, a popup appears which allows making changes for the current DCE.

Extending configuration code snippets 

Since DCE 3.1 you can extend the code snippets, provided in DCE field configuration field, using event listeners.

Writing the event listener 

First, you need to create a new event listener class. The following example is located in your custom extension, under the path Classes/EventListener/ModifyConfigurationTemplatesEventListener.php.

This example adds one new snippet group (at the beginning) and adds two field configuration code snippets:

<?php

namespace Vendor\Extension\EventListener;

use T3\Dce\Event\ModifyConfigurationTemplateCodeSnippetsEvent;

class ModifyConfigurationTemplatesEventListener
{
    public function modify(ModifyConfigurationTemplateCodeSnippetsEvent $event): void
    {
        $templates = $event->getTemplates();

        // Adds new group "Custom templates" to the beginning of template array
        $templates = ['My custom templates' => []] + $templates;

        // Adds new example snippet
        $templates['My custom templates']['My first example'] = <<<XML
<config>
    <type>input</type>
    <default>Example</default>
</config>
XML;

        // Adds another example to existing group
        $templates['TYPE: text']['Another example'] = <<<XML
<config>
    <type>text</type>
    <!-- Your custom config goes here -->
</config>
XML;

        // Sets the modified templates array
        $event->setTemplates($templates);
    }
}
Copied!

Register the event listener 

Next, you need to register the event listener.

Like any other event listener, you can register it in the Configuration/Services.yaml file, inside your extension:

services:
    # ...

    Vendor\Extension\EventListener\ModifyConfigurationTemplatesEventListener:
        tags:
            -   name: event.listener
                identifier: 'dce-modify-configuration-templates-event-listener'
                event: T3\Dce\Event\ModifyConfigurationTemplateCodeSnippetsEvent
                method: 'modify'
Copied!

Screenshot 

The example above adds these two new code snippets (one in a new group, one in an existing one):

Extended Configuration Template Code Snippets

Upgrading DCE 

DCE 4.0 does not contain upgrade wizards. The manual changes described below are required when upgrading existing installations.

Upgrade from TYPO3 v13 

Update TYPO3 and DCE with Composer. Existing DCE records using the former default wizard group common must be changed to the TYPO3 v14 group default:

UPDATE tx_dce_domain_model_dce SET wizard_category = 'default' WHERE wizard_category = 'common';
Copied!

The dce:format.cdata ViewHelper has been removed. Replace usages in stored and file-based templates with Fluid's native CDATA syntax:

<![CDATA[
    {{{field.xml}}}
]]>
Copied!

Then run the TYPO3 database schema update, flush all caches and verify the DCE backend module, existing DCE content elements and frontend output.

Upgrade from TYPO3 v12 

Prepare the installation before updating the TYPO3 core:

  1. Update DCE to version 3.3.2 while the installation still runs TYPO3 v12.
  2. Add required database columns, but keep obsolete DCE MM tables until the DCE upgrade wizards have finished.
  3. Run all DCE and TYPO3 upgrade wizards offered by the Install Tool.
  4. Complete the database schema update and flush all caches.
  5. Verify that no DCE upgrade wizard is pending and that existing DCE content elements work correctly.
  6. Upgrade directly to TYPO3 v14.3 and DCE 4.0, and apply the manual changes described in the section above. From DCE's perspective, an intermediate upgrade to TYPO3 v13 is not required if all upgrade wizards provided by DCE 3.3.2 have been completed while the installation was still running TYPO3 v12.

Older installations 

Do not update a very old TYPO3 installation and DCE to their current versions in a single Composer operation. Create a database and file backup, upgrade TYPO3 one major version at a time and use a matching DCE version at each step. Once the installation runs TYPO3 v12, install DCE 3.3.2 and follow the steps above.

DCE 3.3.2 contains the migrations for legacy field relations, FlexForm sheet identifiers, malformed variable names, old file fields and file references. Do not remove obsolete DCE MM tables before these migrations have finished. Some file field migrations also require manual changes to the affected Fluid templates.

If TYPO3 or DCE has already been upgraded without running these migrations, restore the pre-upgrade backup or use a temporary TYPO3 v12 installation with DCE 3.3.2 and the old database. Current DCE releases can no longer migrate these legacy data structures.

FAQ 

How to access to FAL images? 

You can simply iterate over the variable you have defined for the FAL field. Usage of old FAL view helper is not necessary anymore. But you need to, add these two lines to the field configuration:

<dce_load_schema>1</dce_load_schema>
<dce_get_fal_objects>1</dce_get_fal_objects>
Copied!

In your Fluid template you can simply use the images like this:

<f:for each="{field.myImages}" as="image" iteration="iterator">
    <f:image image="{image}" />
</f:for>
Copied!

If you want to output only the first image you can use this one liner:

<f:image image="{field.myImages.0}" />
Copied!

Related tt_content fields are also resolved for convenient use in Fluid templates:

  • {contentObject.media} is resolved as a relation.
  • {contentObject.assets} is resolved when Fluid Styled Content is loaded and is the field displayed by DCE's media-tab option.
  • {contentObject.categories} is resolved when the field is present.

How to nest DCE content elements? 

In DCE you are able to nest other DCEs. That means you create a child DCE and a parent DCE and assign the children to the parent. To enable the parent DCE to store children you need to add a new field with type "group".

Example field configuration (Variable name: "children"):

<config>
    <type>group</type>
    <allowed>tt_content</allowed>
    <size>5</size>
    <minitems>0</minitems>
    <maxitems>999</maxitems>
    <dce_load_schema>1</dce_load_schema>
</config>
Copied!

The dce_load_schema flag does the trick here. It realizes, that the tt_content item you have added is a DCE and returns the DCE object itself. For any other content element, which is no DCE, it will return the tt_content row as associative array.

But we assume, that you have just added content elements based on DCEs to the "children" field. In your fluid template you can now do this:

<ul>
    <f:for each="{field.children}" as="childDce" iteration="iterator">
        <li>{childDce.render -> f:format.raw()}</li>
    </f:for>
</ul>
Copied!
  • first we are iterating through all children, using the f:for loop
  • then we call and output the render() method of child DCE
  • because fluid escapes all html by default, we need to use the f:format.raw view helper

If you do not want to output the whole template of the child DCE, access individual fields through get:

<f:for each="{field.children}" as="childDce" iteration="iterator">
    <li>{childDce.get.myCoolField}</li>
</f:for>
Copied!

Am I also able to use file collections? 

Since version 0.11.x of DCE you are. Just add a group field, set allowed tablename to "sys_file_collection" and add the dce_load_schema option.

Example field configuration:

<config>
    <type>group</type>
    <allowed>sys_file_collection</allowed>
    <size>5</size>
    <minitems>0</minitems>
    <maxitems>999</maxitems>
    <dce_load_schema>1</dce_load_schema>
</config>
Copied!

Your Fluid template receives an array of FileCollection models. Both File and FileReference items can be passed directly to the image ViewHelper:

<f:for each="{field.collections}" as="collection">
    <f:for each="{collection.items}" as="item">
        <f:image image="{item}" maxWidth="250" alt="" />
    </f:for>
</f:for>
Copied!

How to readout an image in a Fluid template and give it a click enlarge function? 

Current DCE file fields provide an array of FAL FileReference objects. To render the first selected image with a link to its processed full-size variant, use:

<f:if condition="{field.yourPicture.0}">
    <a href="{f:uri.image(image: field.yourPicture.0)}" class="your-lightbox-class">
        <f:image image="{field.yourPicture.0}" alt="Thumbnail" maxWidth="100" maxHeight="100" />
    </a>
</f:if>
Copied!

With the f:image view helper a thumbnail of the image, that should be shown, is issued. TYPO3 creates an image with a reduced size and stores it in fileadmin/_processed_/.

In the href parameter of the link, which should show the big version of the image when it is clicked, you use the f:uri.image view helper. In principle it is the same as the f:image view helper, but instead of an image only a URL is created.

The benefit of using this view helper is that you also can use height and width to limit the size of the big image (e.g. 800x600).

How to apply custom CKeditor configuration in DCE? 

When you've defined a DCE field as RTE (rich text editor), you also defined the "richtextConfiguration" to be used, e.g. "default", "minimal" or something custom.

TYPO3 resolves the RTE preset in this order: field-specific PageTS, the field's richtextConfiguration, the global RTE.default.preset PageTS setting, and finally the default preset. Therefore, a DCE field's richtextConfiguration takes precedence over the global default. Only field-specific PageTS can override it.

How to render the content of an RTE field? 

You have to enclose the RTE field with the format.html view helper to get the HTML tags of the RTE rendered.

<f:format.html>{field.rteField}</f:format.html>
Copied!

You can also use the inline notation:

{field.rteField -> f:format.html()}
Copied!

How to access the current TypoScript setup? 

In frontend, you can access directly the TypoScript setup from current page, using {tsSetup.lib.xyz.value}.

How to wrap my content elements with a container? 

Sometimes you need a wrapping element in HTML template, for all content elements from same type. I recommend to use EXT:container, because it brings columns to content elements which are structured in database.

You can also use the DCE feature DCE Container, which simulates a container for certain content elements in a row, based on the same DCE.

How to change the long title in content wizard for DCE group 

If you enable DCEs to be visible in content wizard, they can be grouped in a new group, introduced by DCE, called "Dynamic Content Elements". This can be too much text in some cases.

If you want to rename this group just use this code in PageTS:

mod.wizards.newContentElement.wizardItems.dce.header = Whatever you want
Copied!

You can also modify the position of the group, in PageTS. This is the default value:

mod.wizards.newContentElement.wizardItems.dce.after = default
Copied!

Versions 

4.0.0 

First release with added TYPO3 v14 support

  • [FEATURE][!!!] Add TYPO3 v14.3 support and drop support for TYPO3 v13 and v12
  • [FEATURE] Revive syntax highlighting by integrating the TYPO3 code editor
  • [FEATURE] Add {contentElementRecord} as available variable in Fluid templates
  • [TASK] Render DCE containers separately in the Visual Editor
  • [TASK] Migrate rendering, records, ViewHelpers, PageTSconfig and DataHandler usage to current TYPO3 APIs
  • [TASK] Remove legacy upgrade wizards, deprecated DCE APIs and obsolete configuration options
  • [TASK] Improve and update the documentation and screenshots
  • [BUGFIX] Prevent recursive DataHandler updates
  • [BUGFIX] Rebuild the DCE cache on CLI cache flush
  • [BUGFIX] Fix DCE relation imports and handling of empty FlexForm sections
  • [BUGFIX] Register custom DCE icons after TYPO3 has booted
  • [TASK] Fix Install Tool DI container compatibility (Thanks to Thomas Ainhauser)
  • [BUGFIX] Fix FlexForm and FAL collapse handling (Thanks to Thomas Ainhauser)
  • [BUGFIX] Improve backend preview and field labels (Thanks to Thomas Ainhauser)

3.3.2 

  • [BUGFIX] Revert accidentally added changes

3.3.1 

  • [TASK] Update copyrights
  • [BUGFIX] Force type to XML (Thanks to Georg Ringer)
  • [BUGFIX] Fix exception when pi_flexform is null in database (Thanks to Stefan Hilhorst)
  • [FEATURE] Add support for EXT:vici tables

3.3.0 

  • [FEATURE] Add {site} to variables passed to DCE templates in frontend
  • [TASK] Fix ES6 configuration for DCE javascript

3.2.7 

  • [BUGFIX] Fix "dce_enable_autotranslation" functionality
  • [BUGFIX] Do not use RestrictionContainers in database queries in content element generator

3.2.6 

  • [BUGFIX] Fix list view search for DCE elements to respect selected depth (Thanks to Markus Gerdes)

3.2.5 

  • [TASK] Apply code-style fixes
  • [DEVOPS] Add code quality checks
  • [BUGFIX] Fix PageTitleProvider in v13
  • [BUGFIX] Fix missing global TypoScript in v13
  • [TASK] Update copyrights
  • [BUGFIX] Fix FalViewHelper for TYPO3 v13 (Thanks to Martin Kutschker)
  • [BUGFIX] Fix negated query in FixMalformedDceFieldVariableNamesUpdateWizard
  • [BUGFIX] Use UpgradeWizard annotation to register wizards
  • [DEVOPS] Set b13/container to version ^3.0
  • [DEVOPS] Enable deprecation log in DDEV environment

3.2.4 

  • [BUGFIX] Add check for admin privileges, before showing "Edit DCE" button in content element
  • [BUGFIX] Respect field type when checking for section fields

3.2.3 

  • [FEATURE] Add dark mode support
  • [BUGFIX] Avoid Fluid rendering issues with disabled Jit compiler (Thanks to Florian Rival)

3.2.2 

  • [BUGFIX] Render label for custom DceCodeMirrorFieldRenderType
  • [TASK] Add additional classes in DceModule, to ensure styling of badges
  • [BUGFIX] Fix exceptions in DceFieldLabel
  • [BUGFIX] Fix missing templateFileName in DceModuleController
  • [BUGFIX] Fix dcefield TCA to reapply display conditions
  • [BUGFIX] Backend Problem with Powermail Forms (Thanks to Sebastian Fahrenkrog)
  • [TASK]Improve convertUidToCType for DCEs with identifier (Thanks to Luis Becker)
  • [TASK] Clean up TCA (Thanks to Nikita Hovratov)

3.2.1 

  • [BUGFIX] Do not cause PHP warning in custom TtContentLabel user function

3.2.0 

First release with added TYPO3 v13 support

  • [TASK] Improve labels and styling in DCE backend module
  • [TASK] Fix DCE group position in new content element wizard
  • [BUGFIX] Always enable Direct Output for DCEs with enabled container
  • [BUGFIX] Register DCE custom icons also when the DCE is disabled
  • [TASK] Remove "Disables the "div.csc-default" wrapping" option in DCE
  • [TASK] Remove "Prevent header copy suffix" option in DCE
  • [TASK] Remove third parameter in DataHandler's recordInfo method calls
  • [TASK] Make font weight in code editor bold
  • [TASK] Change the way to ask Doctrine for the type name of a column
  • [TASK] Replace all occurrences of PDO column types
  • [TASK] Fix declaration of DceModuleController's initializeAction
  • [TASK] Raise TYPO3 requirement to include v13
  • [DEVOPS] Fix site hostname in v13 install script

3.1.4 

  • [TASK] Move CodeEditor.css contents as inline styles
  • [BUGFIX] Fix TtContentLabel array handling in Workspace mode
  • [BUGFIX] Update sys_file_reference table for hidden element (Thanks to Florian Rival)
  • [BUGFIX] Fix "Edit DCE" appearing on any content element
  • [DEVOPS] Upgrade DDEV configuration
  • [BUGFIX] Add a check for existence of $GLOBALS['TYPO3_REQUEST'] (Thanks to Florian Rival)
  • [BUGFIX] Fix bug in filewizard (Thanks to Thomas Wittich)

3.1.3 

  • [TASK] Update copyrights
  • [TASK] Add "softref" configuration to RTE field code snippet
  • [BUGFIX] Fix usage of $parameters['row']['enable_container'] in ItemsProcFunc
  • [BUGFIX] Fix usage of $GLOBALS['TYPO3_REQUEST']
  • [BUGFIX] Fix icon color of btn-primary in backend module
  • [DOCS] Fix syntax for reference (Thanks to Sybille Peters)
  • [BUGFIX] Fix TtContentLabel userfunction in case of incomplete data (Thanks to Sybille Peters)

3.1.2 

  • [BUGFIX] Return early in TtContentLabel when special case "new" (Thanks to Nikita Hovratov)

3.1.1 

  • [BUGFIX] Provide JavaScript module "@t3/dce/code-editor" in FormEngine page init

3.1.0 

  • [BUGFIX] Fix adjusting height when in inserting code and disable spellcheck
  • [FEATURE] Add ModifyConfigurationTemplateCodeSnippetsEvent
  • [BUGFIX] Removed unused $isIn parameter in custom field validators
  • [TASK] Refactor DCE's TypoScript utility
  • [TASK] Add migration for type file allowed config (Thanks to Nikita Hovratov)
  • [BUGFIX] Do not pass null value to linkEditContent method, in DcePreviewRenderer

3.0.2 

  • [BUGFIX] Fix DCE icon in backend module
  • [BUGFIX] Allow DCE in legacy installations
  • [BUGFIX] Restore section fields in Simple backend view

3.0.1 

  • [TASK] Provide upgrade wizard for FlexForm sys_file_references
  • [TASK] Remove MigrateOldNamespacesInFluidTemplateUpdateWizard

3.0.0 

First release with TYPO3 v12 support

  • Added TYPO3 12.4 LTS support
  • Dropped v10 and v11 support
  • Applied Massive refactorings

Checkout Upgrading DCE section

Thanks to Stephan Bauer for testing and supporting.

2.9.5 

  • [TASK] Update copyrights
  • [BUGFIX] Remove "useCacheHash" from link.typoscript code snippet
  • [TASK] Assign "data" variable to Fluid template as alias for "contentObject"
  • [BUGFIX] Fix disabling of DCE cache
  • [BUGFIX] Remove wrong php requirements in ext_emconf.php
  • [DEVOPS] Upgrade DDEV configuration

2.9.4 

  • [BUGFIX] Fix PHP 8.1 issues in File to Fal Update Wizard (thanks to Peter Kraume)
  • [BUGFIX] Fix PHP 8.1 issue in label_userFunc (thanks to Peter Kraume)
  • [BUGFIX] Fix non-existing array keys warnings
  • [BUGFIX] Fix deprecated usage of ${var}
  • [TASK] Fix warnings in backend (thanks to Georg Ringer)

2.9.3 

  • [BUGFIX] Fix undefined array keys (for PHP 8)
  • [BUGFIX] Do not try to migrate DCEs without valid UID

2.9.2 

  • [BUGFIX] Respect hidden DCEs in FileToFalUpdateWizard
  • [DOCS] Improve docs
  • [BUGFIX] Respect content element's language when checking for unique slug
  • [BUGFIX] Respect current language in DetailPagesXmlSitemapDataProvider
  • [BUGFIX] Fix PHP warning in FalViewHelper

2.9.1 

  • [BUGFIX] Do not show File2FAL update wizard, when no elements to migrate found
  • [BUGFIX] Do not use deprecated ResourceFactory::getInstance() method in File2Fal wizard
  • [BUGFIX] Do not throw warnings when EXT:container is installed

2.9.0 

2.8.4 

  • [BUGFIX] Remove replace for "typo3-ter/dce" in composer.json (Daniel Haupt)
  • [BUGFIX] Prevent undefined array key warning in AfterSaveHook (creationell)

2.8.3 

  • [BUGFIX] Add missing slash when resolving t3:// links
  • [TASK] Simplify ext_emconf

2.8.2 

  • [DEPRECATION] Mark "file:" and "t3://" as template path deprecated
  • [BUGFIX] Do not use deprecated method in FileInfoViewHelper
  • [BUGFIX] Prepend Environment::getPublicPath() to resolved t3://file links
  • [BUGFIX] Do not apply langauge overlay, when in free mode
  • [BUGFIX] TCA output flexform (thanks to Sebastian Iffland)

2.8.1 

10th Anniversary of the DCE extension for TYPO3 🎉 2012-2022

  • [TASK] Update copyright
  • [TASK] Prevent exception in backend module, when a DCE has no custom icon set
  • [TASK] Remove file picker wizard (inputLink) for DCE template paths
  • [BUGFIX] Apply language overlay to translated container elements
  • [BUGFIX] Remove unused extension configuration in AfterSaveHook
  • [BUGFIX] Fix PHP warning, when accessing non existing array key (PHP 8 support)

2.8.0 

This version has been sponsored by web-crossing GmbH.

  • [FEATURE] Support DCE container within EXT:news detail view
  • [DOCS] Remove invalid links to forge.typo3.org
  • [BUGFIX] Remove unnecessary extend of AbstractCondition

2.7.7 

  • [TASK] Replace ResourceFactory::getInstance() calls
  • [BUGFIX] Use DBAL expressions in update wizards
  • [BUGFIX] Use ObjectManager when creating new Extbase repository instance
  • [BUGFIX] Fix escaping of WrapWithCurlyBracesViewHelper

2.7.6 

  • [BUGFIX] Fix DceCodeMirrorFieldRenderType declaration

2.7.5 

  • [BUGFIX] Fix accidentally added namespace import when creating DCE cache
  • [TASK] Use DceRepository instance for extracting uid from CType

2.7.4 

  • [BUGFIX] Fix usage of iconGroups in tt_content's CType configuration
  • [DEVOPS] Update php-cs-fixer and phpstan
  • [CLEANUP] Indention fixes
  • [TASK] Make DCE's CacheManager non-singleton
  • [TASK] Use correct file permissions when creating cache folder

2.7.3 

  • [BUGFIX] Remove usage of $_EXTKEY
  • [TASK] Cleanup ext_tables.sql
  • [TASK] Remove "starttime" and "endtime" from DCE's TCA
  • [DOC] Improve README
  • [DOC] Add Gridelements notice (resolveChildFlexFormData)

2.7.2 

  • [DEVOPS] Fixing code style issues
  • [BUGFIX] Do not perform file_exists after unlinking (deleting) cache file
  • [BUGFIX] Do not clear DCE caches everytime any TYPO3 cache gets cleared
  • [BUGFIX] Fix typehinting for updateTcaMappingsAction in DceModuleController

2.7.1 

  • Security related bugfix release

2.7.0 

  • [BUGFIX] Remove unused language fields and fix copying/duplicating DCEs on root level
  • [FEATURE] Symfony expressions for Simple Backend View header
  • [BUGFIX] Fix non-rendered container items, when content elements get rendered multiple times
  • [BUGFIX] Update outdated color picker config
  • [DEVOPS] Update DDEV environment and add project environment with Composer
  • [TASK] Add required "extra.typo3/cms.extension-key" value
  • [FEATURE] TYPO3 11 Compatibility (dropped TYPO3 8 support)

2.6.2 

  • Security related bugfix release

2.6.1 

  • [BUGFIX] Add missing "classmap" argument in ext_emconf autoload section
  • [FEATURE] Add support for EXT:container
  • [BUGFIX] Only add FrontendRestrictionContainer when TYPO3_MODE equals "FE"

2.6.0 

  • [TASK] Update module icons and header
  • [TASK] Extend .gitignore
  • [DEVOPS] Apply fix for DDEV 1.15
  • [FEATURE] Add DceViewHelper
  • [FEATURE] Add dedicated "detailpage_title_expression" field for detailpage title generation
  • [TASK] Code style
  • [TASK] Show "Detail page" as badge in DCE module, when enabled
  • [BUGFIX] Do not show new slug settings in TYPO3 8
  • [TASK] Add documentation for new slug features
  • [FEATURE] Add "use slug as title" DCE option and provide new PageTitleProvider
  • [FEATURE] Slugs for detail pages
  • [BUGFIX] Register old "PageLayoutViewDrawItemHook" when EXT:gridelements is active

Thanks to Silverback (https://silverback.st/) for sponsoring this release!

2.5.2 

  • [BUGFIX] Use old PageLayoutViewDrawItemHook when "fluidBasedPageModule" is disabled in TYPO3 10
  • [TASK] Apply FrontendRestrictionContainer to QueryBuilder in ContainerFactory
  • [BUGFIX] Fix DCE container when content-fallback takes effect
  • [BUGFIX] Remove deprecated $string{0} syntax from DceRepository

2.5.1 

  • [TASK] Improve ContainerFactory
  • [DEVOPS] Add DDEV Environment
  • [BUGFIX] Do not use Extbase Controller Action to return DCE Instance
  • [BUGFIX] Add mandatory renderType
  • [BUGFIX] Change configuration position fpr palettes and language-path
  • [TASK] Register LinkAnalyserSlot as EventListener in TYPO3 10
  • [TASK] Use new PreviewRenderer in v10 for backend templates

2.5.0 

  • [TASK] Improve MigrateDceFieldDatabaseRelationTrait
  • [BUGFIX] Fix exception when using Postgtres
  • [TASK] Small documentation improvements
  • [BUGFIX] Keep page cache-able, when using DCE containers, in TYPO3 8
  • [BUGFIX] Fix multiple entries of the same category in {contentObject.categories}
  • [TASK] Code style fixes
  • [DEVOPS] Fix broken code quality check pipeline
  • [BUGFIX] Prevent Linkanalyzer to check non DCE records
  • [BUGFIX] Make CacheManager respect fileCreateMask
  • [TASK] Refactor "File Abstraction Layer" code snippets
  • [BUGFIX] Codemirror fix for TYPO3 10
  • [BUGFIX] Available templates switcher cuts of .xml instead of wrong .xlf
  • [BUGFIX] Only apply "Prevent header copy suffix" when status is "new" in after save hook
  • [TASK] Use new UpdateWizards also in TYPO3 9
  • [BUGFIX] Fix instantiating of ObjectManager
  • [TASK] Provide UpdateWizards, based on old Updates

2.4.1 

  • [BUGFIX] Fix wrong version constraints

2.4.0 

  • [FEATURE] TYPO3 10 Compatibility

2.3.1 

  • [BUGFIX][!!!] Fix queries which build content elements
  • [BUGFIX] Do not throw exceptions in Content Element Generator

2.3.0 

  • [FEATURE] Add new option "container_detail_autohide"
  • [BUGFIX] Fix Doctrine DBAL queries with empty field where clauses

2.2.1 

  • [BUGFIX] Fix wrong escaping of quotes, in OutputPlugin Generator
  • [TASK] Improve error message, when a DCE Field has a mapping to a non-existing tt_content column
  • [TASK] Use Doctrine API to get list of table and column names
  • [TASK] Make DCE work, even without fluid_styled_content installed
  • [TASK] Add hint to documentation, that tab DCE fields changes the FlexForm structure
  • [TASK] Improve README.md
  • [BUGFIX] Fix hidden DCE container items

2.2.0 

  • [FEATURE] New "Prevent header copy suffix" DCE option
  • [BUGFIX] Fix deprecated clear-cache call
  • [BUGFIX] Do not use "module-help" icon in DCE backend module
  • [FEATURE][!!!] Remove old TYPO3_DB calls with Doctrine DBAL
  • [FEATURE] Make mapped "tx_dce_index" contents searchable in backend
  • [TASK] Improve and document Code Caching feature
  • [BUGFIX] Use heredoc for generated FlexForm XML
  • [BUGFIX] Fix missing FQCN in generated PHP code
  • [FEATURE] Implement own CacheManager

2.1.0 

  • [TASK] Use native database connection, when existing
  • [FEATURE][!!!] Re-implement Caching of generated PHP code
  • [TASK] Improve code snippets
  • [BUGFIX][!!!] Make access field values of child DCEs work in TYPO3 9 (before: {dce.fieldName}, now: {dce.get.fieldName})
  • [BUGFIX] Fix localizedUid conditions in FalViewHelper

2.0.6 

  • [BUGFIX] Do not throw exception in backend when proper flexform missing
  • [FEATURE] Improve tx_dce_dce behaviour
  • [BUGFIX] Remove unused code which causes errors

2.0.5 

  • [BUGFIX] Allow lowercase only for DCE identifier
  • [BUGFIX] Include tx_gridelements_columns in db query (thanks to Matthias Bernad)

2.0.4 

  • [BUGFIX] Do not display "Edit DCE" button for all content elements

2.0.3 

  • [BUGFIX] Add default value for tx_dce_dce column in tt_content table
  • [BUGFIX][!!!] Do not use hidden DCE fields

2.0.2 

  • [TASK] Add "Upgrading DCE" to documentation
  • [BUGFIX] Allow null value for input in LanguageService::sL
  • [BUGFIX] Fix resolving of non-dce tt_content records

2.0.1 

  • [BUGFIX] Check for correct table when resolving related records

2.0.0 

  • Change package name and namespace to t3/dce and \T3\Dce
  • Add identifier to DCE, which allows to control the CType of the content element
  • Added direct_output mode
  • Fixed behaviour of detail pages
  • Global namespace registration for dce: in Fluid templates
  • Allow partials and layouts fallback
  • Add {$variable} to field configuration (used for FAL)
  • Add csh-description for all fields
  • Refactored user conditions (Symfony expression language)
  • Removed update check functionality
  • Removed all extension manager settings
  • Refactored and cleaned up code base
  • New FlexForm rendering (using DomDocument instead of FluidTemplate)
  • DCE is 100% deprecation notice free in TYPO3 9.5 LTS
  • Add complete documentation (!)

1.6.0 

  • Added TYPO3 9.5 LTS and dropped TYPO3 7.6 LTS support

1.5.x 

  • Completely refactored code injection (for TCA).

    Instead of requiring a dynamic generated php file, the code is dynamically executed, at the points where TYPO3 expects it.

    So all cache clear functionality and options has been removed.

    If you want to make new DCEs visible you need to clear the system cache or disable the cache at all, like you need to do when modifying the TCA manually.

    DCE should behave exactly the same like before, just without need of cache files in typo3temp.

  • Major bugfixes and improvements (DceContainer & SimpleBackendView)
  • Removed f:layout in DCE templates, by default
  • Applied refactorings

1.4.x 

  • DCE major release with many new features and improvements
  • One breaking change, regarding backend templates.
  • Check out release slides for all new stuff: http://bit.ly/2SFbIzC
  • Bug and compatibility fixes for TYPO3 8.6
  • More fixes for TYPO3 7/8 compatibility in backend.
  • Bug and compatibility fixes for TYPO3 8
  • Also improved dev-ops tools.
  • The typolink view helpers in DCE are marked as deprecated. Please use f:link.typolink or f:uri.typolink instead.
  • Compatibility fixes for TYPO3 7.6 and 8.7 LTS. Also updated RTE code snippets.
  • Fixed Typolink view helper for TYPO3 7.6 LTS and added conditional code snippets (for 7.6 and 8.7 snippets) in DCE configuration.
  • Fixes big performance issue in backend and increases compatibility to EXT:flux.
  • Massive refactorings, to improve speed of DCE extension. Special thanks to Bernhard Kraft!
  • Small bugfix and add example to code snippets of RTE, of how to define a preset for CKeditor.
  • Permission issue for non-admins fixed
  • Removed php warnings in backend
  • Fixed Typolink 8.7 code snippet

Support 

Open tasks 

See all open tasks here in the Github issue tracker.

Facebook page 

To connect the DCE users together and have a central place of announcements, DCE got its own Facebook page, now.

Join it: https://www.facebook.com/TYPO3.DCE.Extension

Slack channel 

Also you can join the #ext-dce Slack channel on typo3.slack.com.

Contribute 

If you are a developer and you want to submit improvements as code, you can fork https://github.com/a-r-m-i-n/dce and make a pull request to DCE's v14 branch.

Thanks!