Feature #58407

Epic #62041: twbs Bootstrap backend, refactor EXT:t3skin and HTML5 output

Epic #62836: FormEngine PHP/HTML Improvements & Bootstrap

Add suggest to TCAs group /select items

Added by Daniel Siepmann over 5 years ago. Updated about 1 year ago.

Status:
Closed
Priority:
Should have
Category:
FormEngine aka TCEforms
Target version:
-
Start date:
2014-05-02
Due date:
% Done:

100%

Estimated time:
1.00 h
PHP Version:
Tags:
Complexity:
easy
Sprint Focus:

Description

Currently it's not possible to search the static items of a group or select TCA column through a suggest wizard.
One example is the include of static typoscript templates.

Associated revisions

Revision 209c8278 (diff)
Added by Georg Ringer almost 5 years ago

[TASK] Add suggest wizard for "include static" in template record

Resolves: #58407
Releases: master
Change-Id: Ia6de994c4f59a36d79b1d5cfe0101caddedb1773
Reviewed-on: http://review.typo3.org/29769
Reviewed-by: Frank Nägler <>
Tested-by: Frank Nägler <>
Reviewed-by: Mathias Schreiber <>
Tested-by: Mathias Schreiber <>
Reviewed-by: Wouter Wolters <>
Tested-by: Wouter Wolters <>

History

#1 Updated by Daniel Siepmann over 5 years ago

I did it for our installation and it's simple.

I hope I'll add the patch for TYPO3 soon, as long here is the code so someone else can do it as well.

You have to add the PHP Part to render the input form for suggest. Add the JS to implement the suggest, and register the wizard in TCA.

    $TCA['sys_template']['columns']['include_static_file']['config']['wizards']['suggest'] = array(
        'type' => 'userFunc',
        'userFunc' => 'EXT:' . $_EXTKEY . '/Classes/Tca/Wizard/SuggestWizard.php:Tx_ExtensionKey_Tca_Wizard_SuggestWizard->renderSuggestSelector',
    );


<?php

    /**
     * Add suggest wizard for select with item configuration.
     *
     * This will use the configured items instead of an Ajax call with select.
     *
     * @author Daniel Siepmann <daniel.siepmann@typo3.com>
     */
    class Tx_ExtensionKey_Tca_Wizard_SuggestWizard {

        /**
         * Render the suggest selector.
         *
         * Called by t3lib_TCEforms as userFunc Wizard.
         *
         * @author Daniel Siepmann <daniel.siepmann@typo3.com>
         *
         * @param  array $params The available configuration.
         * @param  t3lib_TCEforms $tceForm The current tce form containing the field.
         *
         * @return string The needed HTML. The needed JS will be added to t3lib_TCEforms directly.
         */
        public function renderSuggestSelector( array $params, t3lib_TCEforms $tceForm ) {
            $extensionName = str_replace( 'Tx_', '', __CLASS__ );
            $extensionName = t3lib_div::camelCaseToLowerCaseUnderscored(
                substr(
                    str_replace( 'Tx_', '', $extensionName ),
                    0,
                    stripos( $extensionName, '_' )
                )
            );
            $params['fieldName'] = 'data[' . $params['table'] . '][' . $row['uid'] . '][' . $params['field'] . ']';
            $html = t3lib_div::makeInstance( 't3lib_TCEforms_Suggest' )->renderSuggestSelector(
                $params['fieldName'],
                $params['table'],
                $params['field'],
                $params['row'],
                $params
            );
            $config = $params['fieldConfig']['wizards']['suggest'];
            $selectedItems = explode( '|', $params['row'][$params['field']] );
            $jsObj = str_replace( ' ', '', ucwords( str_replace( '-', ' ', t3lib_div::strtolower( 'suggest-' . $table . '-' . $field . '-' . $row['uid'] ) ) ) );

            $tceForm->additionalJS_post[$extensionName] = '
                var ' . $jsObj . ' = new TCEForms.Wfp2Suggest(
                    "'. $params['fieldName'] . '",
                    "'. $params['field'] . '",
                    "'. $params['table'] . '",
                    "'. $params['uid'] . '",
                    1,
                    [' . $this->formatItems( $params['fieldConfig']['items'] ) . ']
                );
                ' . $jsObj . '.defaultValue = "' . t3lib_div::slashJS($GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xml:labels.findRecord')) . '";
            ';

            $html .= '<script src="../' . t3lib_extMgm::extRelPath( $extensionName ) . 'Resources/Public/JavaScript/Backend/SuggestWizard.js' . '" type="text/javascript"></script>';

            return $html;
        }

        /**
         * Format items from TCA for usage inside the JS of the suggest Wizard.
         *
         * @author Daniel Siepmann <daniel.siepmann@typo3.com>
         *
         * @param  array $oldItems The original items as configured in TCA.
         *
         * @return string The items ready for usage in JS.
         */
        public function formatItems( array $oldItems ) {
            $newItems = array();
            foreach ($oldItems as $item) {
                $newItems[] = '["' . $item[0] . '", "' . $item[1] . '"]';
            }
            return implode( ',', $newItems );
        }

    }


/**
 * Add suggest wizard for select with item configuration.
 *
 * This will use the configured items instead of an Ajax call.
 *
 * @param  {object} window    The window object of the browser.
 * @param  {object} document  The document object of the browser.
 * @param  {undefined} undefined Just undefined
 *
 * @author Daniel Siepmann <daniel.siepmann@typo3.com>
 */
(function( window, document, undefined ) {

    if (!window.TCEForms) {
        window.TCEForms = {};
    }

    /**
     * Class for JS handling of suggest fields in TCEforms.
     *
     * @author Daniel Siepmann <daniel.siepmann@typo3.com>
     */
    window.TCEForms.Wfp2Suggest = Class.create({
        objectId: '',
        suggestField: '',
        suggestResultList: '',
        minimumCharacters: 2,
        defaultValue: '',
        field: '',

        /**
         * Wrapper for script.aculo.us' Autocompleter functionality: Assigns a new autocompletion object to
         * the input field of a given Suggest selector.
         *
         * @param  string  objectId  The ID of the object to assign the completer to
         * @param  string  field     The field which is currently edited
         * @param  string  table     The table which is currently edited
         * @param  string  uid       The uid which is currently edited
         * @param  integer minimumCharacters the minimum characaters that is need to trigger the initial search
         * @param  array   items     The available items
         *
         * @author Daniel Siepmann <daniel.siepmann@typo3.com>
         */
        initialize: function(objectId, field, table, uid, minimumCharacters, items) {
            this.field = field;
            this.table = table;
            this.uid = uid;
            this.objectId = objectId;
            this.suggestField = objectId + 'Suggest';
            this.suggestResultList = objectId + 'SuggestChoices';
            this.items = items;

            var itemsForSuggest = [],
                i = 0;
            for (i = this.items.length - 1; i >= 0; i--) {
                itemsForSuggest[i] = this.items[i][0];
            }

            new Autocompleter.Local(
                this.suggestField,
                this.suggestResultList,
                itemsForSuggest,
                {
                    partialChars: minimumCharacters,
                    fullSearch: true,
                    updateElement: this.addElementToList.bind( this )
                }
            );

            $(this.suggestField).observe('focus', this.checkDefaultValue.bind(this));
            $(this.suggestField).observe('keydown', this.checkDefaultValue.bind(this));
        },

        /**
         * check for default value of the input field and set it to empty once somebody wants to type something in
         */
        checkDefaultValue: function() {
            if ($(this.suggestField).value === this.defaultValue) {
                $(this.suggestField).value = '';
            }
        },

        /**
         * Adds an element to the list of items in a group selector.
         *
         * @author Daniel Siepmann <daniel.siepmann@typo3.com>
         * @param  object  item  The item to add to the list (usually an li element)
         * @return void
         */
        addElementToList: function(item) {
            var formEl = 'data[' + this.table + '][' + this.uid + '][' + this.field + ']',
                value = '',
                i = 0;

            for (i = this.items.length - 1; i >= 0; i--) {
                if (this.items[i][0] !== item.innerText) {
                    continue;
                }
                value = this.items[i][1];
            }

            // Add item to selected items.
            setFormValueFromBrowseWin( formEl, value, item.innerText, item.innerText );
            // Trigger T3 Framework.
            TBE_EDITOR.fieldChanged(this.table, this.uid, this.field, formEl);
            // Reset suggest field value.
            $(this.suggestField).value = this.defaultValue;
        }
    });

})( window, document );

#2 Updated by Daniel Siepmann over 5 years ago

  • Subject changed from Add suggest to TCAs group items to Add suggest to TCAs group /select items

#3 Updated by Gerrit Code Review over 5 years ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/29769

#4 Updated by Felix Kopp almost 5 years ago

  • Parent task set to #62836

#5 Updated by Gerrit Code Review almost 5 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29769

#6 Updated by Georg Ringer almost 5 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#7 Updated by Benni Mack about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF