[SOLVED] Custom Javascript for custom TCA renderTypes

TYPO3 Questions
1

Hello,

we are currently migrating from Typo3 v11 to v13.

In serveral extensions we have created custom renderTypes to offer some special functions to our editors.

As inline JS code is not working anymore, we cretead ES6 Modules like Create a custom link browser — TYPO3 Explained main documentation and included it via

$result['javaScriptModules'][] = JavaScriptModuleInstruction::create('@vendor/my_ext/video-filename-selector.js');

So far it is working. But we have one missing link: Sometimes we want to change the value of another field or anything else in the TCEForms GUI. Therefore we need the id, name or anything else to identify the fields. In our old code we simply created the JS code via PHP like:

var videoFieldVisible'.$fieldIdCleaned.' = $(\'input[data-formengine-input-name="data[tx_myext_domain_model_teaser]['.$fieldId.'][desktop_video_teaser]"]\');

So all worked fine in IRRE too… But now we seem to not have any link between the generated HTML Code in our implementation of AbstractFormElement render() and the ES6 module code.

All examples we found in the docs are dealing with document.querySelector(‘.classname’) etc., but this does solve the problem as we need an unique identifier.

2

Just discovered invoke() in the source code of JavaScriptModuleInstruction which seems to do the job?

`$result['javaScriptModules'][] = JavaScriptModuleInstruction::create('@vendor/my_ext/video-filename-selector.js')->invoke('selectVideo', $fieldId);`

The value is then passed to the param if selectVideo() function of the ES6 module.