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

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

Back

"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