Project

General

Profile

Actions

Bug #99934

closed

JavascriptModules not working for FormControls in Inline-Records

Added by Mark Weisgerber about 1 year ago. Updated 9 months ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Backend JavaScript
Start date:
2023-02-12
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
8.1
Tags:
es6,javascript,javascriptmodules,formcontrol
Complexity:
Is Regression:
Sprint Focus:
Stabilization Sprint

Description

It seems that the javascript modules cannot be found when I expand an inline record in the backend. But if I call this inline record directly, then my javascript module works.
With TYPO3 11.x and RequireJS it worked but after the migration to 12.x and ES6 it seems to be broken.

I get this error message in the browser-console when I expand the inline-record:
Uncaught (in promise) Error: Unable to resolve specifier '@weisgerber/dog_db/text-open-ai.js'

Steps to reproduce:
Create a model with an inline field to a second model
In this second model create a text field and add a custom fieldControl.

Here is my configuration:

Model 2: extensions/dog_db/Configuration/TCA/tx_dogdb_domain_model_foodcontent.php:

'row_description' => [
    'exclude' => true,
    'label' => 'LLL:EXT:dog_db/Resources/Private/Language/locallang_db.xlf:tx_dogdb_domain_model_foodcontent.row_description',
    'config' => [
        'type' => 'text',
        'cols' => 40,
        'rows' => 15,
        'eval' => 'trim',
        'default' => '',
        'fieldControl' => [
            'textOpenAITranslated' => [
                'renderType' => 'textOpenAITranslatedWizard'
            ],
            'textDeepLWritten' => [
                'renderType' => 'textDeepLWrittenWizard'
            ]
        ]
    ]
],

Model 1: extensions/dog_db/Configuration/TCA/tx_dogdb_domain_model_manufacturer.php:

 'products_food' => [
            'exclude' => true,
            'label' => 'LLL:EXT:dog_db/Resources/Private/Language/locallang_db.xlf:tx_dogdb_domain_model_manufacturer.foodcontent',
            'config' => [
                'type' => 'inline',
                'foreign_table' => 'tx_dogdb_domain_model_foodcontent',
                'foreign_field' => 'manufacturer',
                'maxitems' => 9999,
                'appearance' => [
                    'collapseAll' => 0,
                    'levelLinksPosition' => 'top',
                    'showSynchronizationLink' => 1,
                    'showPossibleLocalizationRecords' => 1,
                    'showAllLocalizationLink' => 1
                ],
            ],
        ],

ext_localconf.php:

$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['nodeRegistry'][1673632810] = [
    'nodeName' => 'textOpenAITranslatedWizard',
    'priority' => 33,
    'class' => \Weisgerber\DogDb\FormEngine\FieldControl\TextOpenAITranslatedWizard::class
];
$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['nodeRegistry'][1674761643] = [
    'nodeName' => 'textDeepLWrittenWizard',
    'priority' => 35,
    'class' => \Weisgerber\DogDb\FormEngine\FieldControl\TextDeepLWrittenWizard::class
];

extensions/dog_db/Classes/FormEngine/FieldControl/TextOpenAITranslatedWizard.php


    public function render(): array
    {
        $row = $this->data['databaseRow'];
        $paramArray = $this->data['parameterArray'];

        $nameNormal = $paramArray['itemFormElName'];

        $resultArray = $this->initializeResultArray();

        $resultArray['linkAttributes']['class'] = 'textOpenAITranslatedWizard';

        $resultArray['iconIdentifier'] = 'text-openai-translated-wizard';
        $resultArray['title'] = "Erstellt mit OpenAI ChatGPT";

        $resultArray['linkAttributes']['data-name'] = htmlspecialchars($nameNormal);
        $resultArray['linkAttributes']['data-id'] = $this->data['databaseRow']['uid'];
        $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create(
            '@weisgerber/dog_db/text-open-ai.js'
        );

        return $resultArray;
    }

extensions/dog_db/Configuration/JavaScriptModules.php:

return [
    'dependencies' => ['backend'],
    'imports' => [
        '@weisgerber/dog_db/' => 'EXT:dog_db/Resources/Public/JavaScript/',
    ],
];

extensions/dog_db/Resources/Public/JavaScript/text-open-ai.js

import $ from 'jquery';
import FormEngine from '@typo3/backend/form-engine.js';

class TextOpenAi {
  constructor() {
    // some stuff
  }
}

export default new TextOpenAi();

Actions #1

Updated by Benni Mack about 1 year ago

  • Target version changed from 12.2 to 12.3
Actions #2

Updated by Benni Mack 12 months ago

  • Target version changed from 12.3 to 12 LTS
Actions #3

Updated by Oliver Hader 11 months ago

  • Description updated (diff)
Actions #4

Updated by Benni Mack 10 months ago

  • Target version changed from 12 LTS to Candidate for patchlevel
Actions #5

Updated by Benni Mack 10 months ago

  • Sprint Focus set to Stabilization Sprint
Actions #6

Updated by Andreas Kienast 9 months ago

  • Status changed from New to Needs Feedback

Hello Mark,

can you please add the following configuration in your JavaScriptModules.php and check, if the import works as expected?

<?php

return [
    'dependencies' => ['backend'],
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@weisgerber/dog_db/' => 'EXT:dog_db/Resources/Public/JavaScript/',
    ],
];

Actions #7

Updated by Mark Weisgerber 9 months ago

Hello Andreas,

thank you, so it works again, yay:)

Actions #8

Updated by Andreas Kienast 9 months ago

  • Status changed from Needs Feedback to Closed

Thank you for verifying the proposed solution. I'll therefore close the ticket.

Actions

Also available in: Atom PDF