0
votes

I'm pulling my hair out over this.

I created a T3-Extension - backend module - using Extension Builder. Now I want to provide the user with the link-wizard, so she/he can select an internal link from the T3-Tree.

I created a TCA-Entry for this:

'url' => [
        'label' => 'Link',
        'exclude' => 1,
        'config' => [
            'type'  => 'input',
            'size'  => '50',
            'max'   => '256',
            'eval'  => 'trim',
            'renderType' => 'inputLink',
            'fieldControl' => [
                'linkPopup' => [
                    'options' => [
                        'blinkLinkOptions' => 'mail,page,spec,url,folder',
                        'blindLinkFields' => 'class,params,target,title',
                        'allowedExtensions' => 'html,php'
                    ],
                ],
            ],
            'fieldWizard' => [
                'localizationStateSelector' => [
                    'disabled' => false,
                ]
            ]
        ],
    ],

In the fluid-template (the view) I'm simply using this:

<f:form.textfield property="url" />

According to the docs, the TCA-config should add a button after the input field.

But that's not the case.

Am I doing something wrong or is this simply not working?

I also tried using flux in my templates (which has a link-browser view helper), but when I use <flux:...> nothing is rendered in the form.

Using Typo3 8.7

2

2 Answers

0
votes

I finally found a solution for this.

This is in the controller of my extension

$options = [
        'renderType' => 'inputLink',
        'tableName' => 'myTable',
        'fieldName' => 'url',
        'databaseRow' => [
            'uid' => $myModel->getUid(),
            'pid' => 0
        ],
        'parameterArray' => [
            'fieldConf' => [
                'label' => 'URL',
                'config' => [
                    'eval' => 'trim',
                    'size' => 1024,
                ],
            ],
            'itemFormElValue' => $myModel->getUrl(),
            'itemFormElName' => 'data[myTable][editform][url]',
            'itemFormElID' => 'data[mytable][editform][url]',
            'field' => 'url',
            'fieldChangeFunc' => [
                'TBE_EDITOR_fieldChanged' => "TBE_EDITOR.fieldChanged('mytable','editform','url','data[mytable][editform][url]');"
                ],

        ]
    ];

        $nodeFactory = new NodeFactory();
        $linkField = new InputLinkElement($nodeFactory, $options);
        $urlField = $linkField->render();

        $this->view->assign('renderedUrlField', $urlField['html']);

Where «mytable» is the table the controller uses, «editform» is the form-name and «url» is the database-field that's been used to store the value.

For some reason, you need to name your form «editform», since a sysext-JS refers to that.

You need to add this to your controller to make this working:

use TYPO3\CMS\Backend\Form\Element\InputLinkElement;
use TYPO3\CMS\Backend\Form\NodeFactory;

And in the fluid-template, you have to use:

<f:format.raw>{renderedUrlField}</f:format.raw>

because it returns html-code.

Now initialize the FormEngine

Add this to your Default.html in the section <f:be.container...>:

includeJsFiles="{
        1:'/typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.tbe_editor.js',
3:'/typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.inline.js',
        4:'/typo3/sysext/backend/Resources/Public/JavaScript/backend.js'
    }"

            includeRequireJsModules="{
        0:'{f:uri.resource(path:\'JavaScript/ckeditor/ckeditor.js\')}',
        4:'TYPO3/CMS/Backend/FormEngine',
        5:'TYPO3/CMS/Backend/FormEngineValidation',
        7:'TYPO3/CMS/Backend/ContextMenu',
        8:'TYPO3/CMS/Backend/FormEngineReview',
        9:'{f:uri.resource(path:\'JavaScript/main.js\')}'
      }"

I included ckeditor as well here.

And now, you need to initialize the FormEngine. I did this in main.js:

TYPO3.settings.FormEngine = {"formName":"editform"};

define(['jquery', 'TYPO3/CMS/Backend/FormEngine'], function($){
    'use strict';

    $(function(){
        TYPO3.FormEngine.initialize();
    });
});

The first line is important, otherwise, the JS will throw an error.

Hope this helps somebody.

0
votes

My answer will not help if you want to create the link wizard with Fluid, but it answers a part of the question and adds additional information.

Setting the link wizard for a field via TCA will not magically make the link wizard appear in Fluid. It will however make the link wizard available if you directly edit a record in the backend (with the list view).

Example: you create a table tx_myext_domain_model_mydata with the field url, set the TCA to use the link wizard. Then use the list view to create and edit records.

You can see examples of records with a link wizard in the extension styleguide. It is good to use this extension, because it is a semi-official demo of various backend functionality. The extension "news" for example also makes use of editing news records (tx_news_domain_model_news.internalurl).

Install "styleguide" extension, create sample records, select "elements basic" and look at for example "input_29 link" (for TYPO3 8). See source code and TCA Reference renderType inputLink.

enter image description here