For coders TYPO3 Tech Corner

Show or hide FlexForm fields depending on other field values

Show or hide FlexForm fields depending on other field values

Our project management often requests that individual fields in the FlexForm should be hidden, depending on what kind of value is in another field. This is a means to deliver TYPO3 as lean as possible and not to display unnecessary fields for the editorial team.

In general, you have to understand that with in2code TYPO3 we only ever deliver to customers with functional and required fields. This means that settings that do not contain any function or that untested and unnecessary settings (TYPO3 and extensions) are hidden from us for all backend users (including administrators). This increases the clarity and usability of the content management system to be administered.

1. General information about displayCond and FlexForm in TYPO3

The definition of FlexForm is basically identical to the definition of fields using TCA. But while one is a PHP notation, the other is an XML notation. With the help of the displayCond property, you can easily access values from other fields in addition to the TCA in FlexForm.

Here the field field is only displayed if the value "1" is in field field2:

<settings.field> <TCEforms> <displayCond>FIELD:settings.field2:=:1</displayCond> <label>My label</label> <config> <type>select</type> <renderType>selectSingle</renderType> <items type="array"> <numIndex index="0" type="array"> <numIndex index="0">please choose</numIndex> <numIndex index="1"></numIndex> </numIndex> </items> <foreign_table>fe_groups</foreign_table> <foreign_table_where>AND fe_groups.deleted = 0</foreign_table_where> </config> </TCEforms> </settings.field>

You can also link different conditions with AND or OR. In the following example, a value in the switchableControllerActions field is used. Since this value contains angle brackets, a notation with CDATA is used here:

<displayCond> <OR> <numIndex index="0"><![CDATA[FIELD:main.switchableControllerActions:=:New->new;]]></numIndex> <numIndex index="1"><![CDATA[FIELD:main.switchableControllerActions:=:Invitation->new;]]></numIndex> </OR> </displayCond>

Tip: You can also hide entire tabs in FlexForm, as is done with the femanger extension.

2. Hide fields in third extensions

So far, all of this is probably nothing new to you. And TYPO3 also makes it easy to build extensions that should work exactly as we imagine. However, the whole thing becomes more difficult if we want to manipulate the FlexForm of a third extension. For example, let's assume the extension news. Again, we don't want to display unneeded fields in the plugin at all.

In general, we can easily hide the fields in FlexForm using Page TSConfig:

TCEFORM { tt_content { pi_flexform { news_pi1 { sDEF { switchableControllerActions.removeItems := addToList(News->list,News->selectedList,News->dateMenu,News->searchForm,News->searchResult,Category->list,Tag->list) settings\.categoryConjunction.disabled = 1 settings\.categories.disabled = 1 settings\.includeSubCategories.disabled = 1 settings\.recursive.disabled = 1 } } } } }

Tip: With the help of conditions, we can also query a backend user group and hide individual fields.

However, if it comes to the requirement that settings.backPid, for example, should only be hidden in the list view, things get trickier. Actually, you should now replace the entire FlexForm. But since there could be problems with future updates, the use of the FlexFormHook is recommended.

Installation in the ext_localconf.php of your sitepackage:

/** * Hook to remove flexform fields per condition */ $flexFormToolsName = \TYPO3\CMS\Core\Configuration\FlexForm\FlexFormTools::class; $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS'][$flexFormToolsName]['flexParsing'][] = \In2code\In2template\Hooks\FlexFormHook::class;

New file Classes/Hooks/FlexFormHook.php in your sitepackage:

<?php declare(strict_types=1); namespace In2code\In2template\Hooks; use TYPO3\CMS\Backend\Utility\BackendUtility; use TYPO3\CMS\Core\Database\ConnectionPool; use TYPO3\CMS\Core\Utility\ArrayUtility; use TYPO3\CMS\Core\Utility\GeneralUtility; /** * FlexFormHook * to add display cond configuration by given page TS settings */ class FlexFormHook { const TABLE_NAME = 'tt_content'; /** * Remove FlexForm fields depending to dataStructureKeys * Example Page TSConfig: * TCEFORM { * tt_content { * pi_flexform { * _addDisplayCond { * 1 { * field = sheets/additional/ROOT/el/settings.backPid/TCEforms/displayCond * value = FIELD:sDEF.switchableControllerActions:=:News->detail * dataStructureKey = news_pi1,list * } * } * } * } * } * @param array $dataStructure * @param array $identifier * @return array */ public function parseDataStructureByIdentifierPostProcess(array $dataStructure, array $identifier): array { $pageTsConfig = BackendUtility::getPagesTSconfig($this->getCurrentPageIdentifier()); if ($this->isConditionEnabled($pageTsConfig, $identifier)) { $configurationParts = $pageTsConfig['TCEFORM.'][$identifier['tableName'] . '.'][$identifier['fieldName'] . '.']['_addDisplayCond.']; foreach ($configurationParts as $part) { if ($part['dataStructureKey'] === $identifier['dataStructureKey']) { $dataStructure = ArrayUtility::setValueByPath($dataStructure, $part['field'], $part['value']); } } } return $dataStructure; } /** * @param array $pageTsConfig * @param array $identifier * @return bool */ protected function isConditionEnabled(array $pageTsConfig, array $identifier): bool { return isset($pageTsConfig['TCEFORM.'][$identifier['tableName'] . '.'][$identifier['fieldName'] . '.']['_addDisplayCond.']); } /** * @return int */ protected function getCurrentPageIdentifier(): int { $contentIdentifier = $this->getCurrentContentIdentifier(); if ($contentIdentifier > 0) { return $this->getPageIdentifierFromContentIdentifier($contentIdentifier); } return 0; } /** * @return int */ protected function getCurrentContentIdentifier(): int { $edit = GeneralUtility::_GP('edit'); if (!empty($edit[self::TABLE_NAME])) { return (int)key($edit[self::TABLE_NAME]); } return 0; } /** * @param int $contentIdentifier * @return int */ protected function getPageIdentifierFromContentIdentifier(int $contentIdentifier): int { $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable(self::TABLE_NAME); $queryBuilder->getRestrictions()->removeAll(); return (int)$queryBuilder ->select('pid') ->from(self::TABLE_NAME) ->where('uid=' . (int)$contentIdentifier) ->execute() ->fetchColumn(); } }

Then your TSConfig page could look like this or something like this:

TCEFORM { tt_content { pi_flexform { # Add display cond configuration to an existing FlexForm configuration (see FlexFormHook class) _addDisplayCond { 1 { # Hide settings.backPid in detail view field = sheets/additional/ROOT/el/settings.backPid/TCEforms/displayCond value = FIELD:sDEF.switchableControllerActions:=:News->detail dataStructureKey = news_pi1,list } } news_pi1 { sDEF { switchableControllerActions.removeItems := addToList(News->list,News->selectedList,News->dateMenu,News->searchForm,News->searchResult,Category->list,Tag->list) settings\.categoryConjunction.disabled = 1 settings\.categories.disabled = 1 settings\.includeSubCategories.disabled = 1 settings\.recursive.disabled = 1 } additional { settings\.hidePagination.disabled = 1 settings\.limit.disabled = 1 settings\.listPid.disabled = 1 settings\.tags.disabled = 1 settings\.disableOverrideDemand.disabled = 1 settings\.list\.paginate\.itemsPerPage.disabled = 1 } template { settings\.templateLayout.disabled = 1 settings\.media\.maxWidth.disabled = 1 settings\.media\.maxHeight.disabled = 1 settings\.cropMaxCharacters.disabled = 1 } } } } tx_news_domain_model_news { categories.disabled = 1 related.disabled = 1 related_from.disabled = 1 tags.disabled = 1 keywords.disabled = 1 description.disabled = 1 alternative_title.disabled = 1 editlock.disabled = 1 notes.disabled = 1 } tx_news_domain_model_link { description.disabled = 1 } }

"Code faster, look at the time" - does this sound familiar to you?

How about time and respect for code quality? Working in a team? Automated tests?

Join us

Lesson cancellation - and now? New portal for the Bavarian school system.

For the Bavarian school system, we developed a new web app based on an existing but very outdated portal. The portal reports lesson cancellations throughout Bavaria and registered users are informed...

Go to news

SQL: Show all tables sorted by size in descending order

Lately I've been using the SQL command more often to find out which tables in the TYPO3 database are the largest. I've published the snippet once.

Go to news

TYPO3 12 with CKEditor 5: Styles in a single selection

If you set a link in the RTE in TYPO3, you may have to choose between different link classes, for example to create buttons in the frontend. What's new in TYPO3 12 is that you can select not just one...

Go to news

Null-Safe Operator in the TYPO3 area

With the introduction of PHP8, problems with undefined arrays or variables in general can arise in many places. Here are a few examples and simple solutions.

Go to news

Delete the first/last lines of a (SQL) file

There isn't much to say about the following commands. Sometimes it can be useful to delete the first (or last) X lines from a file. And if the file is too large to open with a conventional program, a...

Go to news

b13/container: Add and modify child elements in edit view

Unlike gridelements, you cannot manage the child elements in the B13 Container extension when you open the container in the editing view. I would be happy to show you how you can quickly install this...

Go to news