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 } }

TYPO3: Finding unused files in fileadmin

Do you want to delete unused or orphaned files in fileadmin or another storage location? Unfortunately, there's no direct core functionality for this. But a small command in your site package can...

Go to news

TYPO3: Editors with individual user_upload folders

Perhaps you're familiar with this client requirement? Editors should be able to add videos using the "Add media by URL" button. But the files shouldn't be located in fileadmin/user_upload/, but rather...

Go to news

TYPO3: Finding pages in mixed mode

In TYPO3, Mixed Mode refers to translated pages that contain content only partially related to the corresponding content in the main language. This is indicated in the backend by an error message. But...

Go to news

Extbase Extensions: Think extensibility with data, site and language

Today, I have a small request for the TYPO3 extension authors out there: Make sure your extensions are extensible. This will also promote the distribution of the corresponding plugins.

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