How to add Tooltips to a Flexform Plugin Configuration?
Asked Answered
T

1

5

I guess its quite Simple as soon as you know it once, but I am searching on this Topic now for 4+ Hours. So maybe someone can help me out, with a push to the right direction.

I develop an Extension for TYPO3 6.2 with Extbase. The Plugin Configuration is done with a FlexForm. To increase Usabillity I want to add Tooltips (helptexts or CSH) to my FlexForm.

Approach 1: I tryed it with the Tag

<cshFile>

and adding the corresponding XML to the Extension Files. As many Forums and Blogs suggest, this is deprecated, so I tought lets try the other Approach.

Approach 2: Adding the "locallang_csh_flexforms.xml" to the Plugin within the ext_tables.php. This seems more Logical, also its suggested as the new way to do it. Also this Method somehow gets used by the tx_news Extension, which overall has a solid code.

However this doesnt seem to Work for me, I tryed to replace all deprecated Classes (used by tx_news) and cloned the Implementation to my Plugin. The FlexForm is shown, but still no Tooltip available. I will now post some Code Snippets of my current State. Its the attempt to do what is done in "tx_news".

These are the Files I mostly worked with, if I didnt forgett any. If something else is of Interest, please let me know, I will add it.

Functionality in tx_news enter image description here

ext_tables.php

if (!defined('TYPO3_MODE')) {
    die ('Access denied.');
}
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addLLrefForTCAdescr(
    'tt_content.pi_flexform.psc_disqus_sso_sso.list', 'EXT:' . $_EXTKEY . '/Resources    /Private/Language/locallang_csh_flexforms.xml');

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
    $_EXTKEY,
    'Sso',
    'Psc Disqus'
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY,     'Configuration/TypoScript', 'Psc Disqus SSO');

//flexforms
$extensionName = \TYPO3\CMS\Core\Utility    \GeneralUtility::underscoredToUpperCamelCase($_EXTKEY);
$pluginSignature = strtolower($extensionName) . '_sso';

$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_excludelist'][$pluginSignature] = 'layout,recursive,select_key,pages';
$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_addlist'][$pluginSignature] =     'pi_flexform';

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue($pluginSignature,     'FILE:EXT:'.$_EXTKEY.'/Configuration/FlexForms/SsoSession.xml');

locallang_csh_flexforms.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
    <description>CSH for flexforms</description>
    <type>CSH</type>
    <fileId>EXT:psc_disqus_sso/locallang_csh_flexforms.xml</fileId>
    <labelContext type="array"></labelContext>
</meta>
<data type="array">
    <languageKey index="default" type="array">
        <label index="settings.useSSO.description">Check to Use SSO Functionality</label>

        <label index="settings.disqus.general.shortName.description">Tells the Disqus service your forum's shortname, which is the unique identifier for your website as registered on Disqus. If undefined, the Disqus embed will not load.</label>
        <label index="settings.disqus.general.title.description">Tells the Disqus service the title of the current page. This is used when creating the thread on Disqus for the first time. If undefined, Disqus will use the <title> attribute of the page. If that attribute could not be used, Disqus will use the URL of the page.</label>
        <label index="settings.disqus.general.categoryId.description">Tells the Disqus service the category to be used for the current page. This is used when creating the thread on Disqus for the first time.</label>
        <label index="settings.disqus.general.disableMobile.description">Tells the Disqus service to never use the mobile optimized version of Disqus.</label>

...(just some more labels and closing tags)...

SsoSession.xml

<T3DataStructure>
<meta>
    <langDisable>1</langDisable>
</meta>
 <sheets>
  <sDEF>
   <ROOT>
     <TCEforms>
        <sheetTitle>SSO Settings</sheetTitle>
     </TCEforms>
     <type>array</type>
     <el>
        <settings.useSSO>
            <TCEforms>
                <label>Activate Disqus Single Sign On</label>
                <config>
                    <type>check</type>
                </config>
                <onChange>reload</onChange>
            </TCEforms>      
        </settings.useSSO>
         <settings.disqus.sso.name>
            <TCEforms>
                <label>Website name (Your site's name. Disqus will display it in the Post As window.)</label>
                <config>
                    <type>input</type>
                    <size>30</size>
                    <default>Website</default>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.name>
        <settings.disqus.sso.loginButton>
            <TCEforms>
                <label>Login Button (optional)</label>
                <config>
                    <type>group</type>
                    <internal_type>file</internal_type>
                    <allowed>jpg,gif,png</allowed>
                    <max_size>2000</max_size>
                    <uploadfolder>uploads/tx_pscdisqussso/loginButton</uploadfolder>
                    <show_thumbs>1</show_thumbs>
                    <size>1</size>
                    <minitems>0</minitems>
                    <maxitems>1</maxitems>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.loginButton>
        <settings.disqus.sso.favIcon>
            <TCEforms>
                <label>Icon (optional)</label>
                <config>
                    <type>group</type>
                    <internal_type>file</internal_type>
                    <allowed>jpg,gif,png</allowed>
                    <max_size>2000</max_size>
                    <uploadfolder>uploads/tx_pscdisqussso/loginButton</uploadfolder>
                    <show_thumbs>1</show_thumbs>
                    <size>1</size>
                    <minitems>0</minitems>
                    <maxitems>1</maxitems>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.favIcon>
        <settings.disqus.sso.loginPage>
            <TCEforms>
                <label>Login Page</label>
                <config>
                    <type>group</type>
                    <internal_type>db</internal_type>
                    <allowed>pages</allowed>
                    <size>1</size>
                    <maxitems>1</maxitems>
                    <minitems>0</minitems>
                    <show_thumbs>1</show_thumbs>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.loginPage>
        <settings.disqus.sso.loginHeight>
            <TCEforms>
                <label>Login Window Height</label>
                <config>
                    <type>input</type>
                    <size>20</size>
                    <max>30</max>
                    <default>800</default>
                    <eval>int</eval>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.loginHeight>
        <settings.disqus.sso.loginWidth>
            <TCEforms>
                <label>Login Window Width</label>
                <config>
                    <type>input</type>
                    <size>20</size>
                    <max>30</max>
                    <default>400</default>
                    <eval>int</eval>
                </config>
                <displayCond>FIELD:settings.useSSO:REQ:true</displayCond>
            </TCEforms>      
        </settings.disqus.sso.loginWidth>
     </el>
   </ROOT>
  </sDEF>
  <disqusConfigurationGeneral>
   <ROOT>
     <TCEforms>
      <sheetTitle>Disqus Settings</sheetTitle>
     </TCEforms>
     <type>array</type>
     <el>
        <settings.disqus.general.shortName>
            <TCEforms>
                <label>Disqus Shortname</label>
                <config>
                    <type>input</type>
                    <size>30</size>
                    <eval>required</eval>
                </config>
            </TCEforms>      
        </settings.disqus.general.shortName>
        <settings.disqus.general.title>
            <TCEforms>
                <label>Title (Tells the Disqus service the title of the current page. This is used when creating the thread on Disqus for the first time. If undefined, Disqus will use the &lt;title&gt; attribute of the page. If that attribute could not be used, Disqus will use the URL of the page.)</label>
                <config>
                    <type>input</type>
                    <size>30</size>
                </config>
            </TCEforms>      
        </settings.disqus.general.title>
        <settings.disqus.general.categoryId>
            <TCEforms>
                <label>Disqus Category (see documentation)</label>
                <config>
                    <type>input</type>
                    <size>30</size>
                </config>
            </TCEforms>      
        </settings.disqus.general.categoryId>
        <settings.disqus.general.disableMobile>
            <TCEforms>
                <label>Disable Disqus Mobile Optimization (see documentation)</label>
                <config>
                    <type>check</type>
                </config>
            </TCEforms>      
        </settings.disqus.general.disableMobile>
        <settings.disqus.general.disableMobile>
            <TCEforms>
                <label>Disable Disqus Mobile Optimization (see documentation)</label>
                <config>
                    <type>check</type>
                </config>
            </TCEforms>
        </settings.disqus.general.disableMobile>
     </el>
   </ROOT>
  </disqusConfigurationGeneral>
 </sheets>
</T3DataStructure>
Tedmund answered 14/6, 2014 at 1:16 Comment(0)
A
9

It's quite easy... but caching of TYPO3 6.2 can be dramatically annoying in this case

  1. Let's say that you have an extension with key my_extension and Bar plugin, the common flexform inclusion in ext_tables.php looks like:

    $pluginSignature = str_replace('_','',$_EXTKEY) . '_bar'; // which gives `myextension_bar`
    $GLOBALS['TCA']['tt_content']['types']['list']['subtypes_addlist'][$pluginSignature] = 'pi_flexform';
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue($pluginSignature, 'FILE:EXT:' . $_EXTKEY . '/Configuration/FlexForms/flexform_bar.xml');
    
  2. Create file for CSH for an example (name doesn't matter, anyway by convention...):

    typo3conf/ext/my_extension/Resources/Private/Language/locallang_csh_flexform_bar.xlf
    
  3. Add a reference to this locallang in ext_tables.php with proper (!) key

    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addLLrefForTCAdescr(
        'tt_content.pi_flexform.myextension_bar.list',
        'EXT:my_extension/Resources/Private/Language/locallang_csh_flexform_bar.xlf'
    );
    
  4. MOST IMPORTANT open Install Tool, go to Important actions and click Clear all cache

  5. That's all: your CSH should work now, if it doesn't check if key of locallang (tt_content.pi_flexform...) is valid, also check in Configuration > $GLOBALS['TCA_DESCR'] if it's listed there (if not clear cache form Install tool again)

Sample locallang_csh_flexform_bar.xlf:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<xliff version="1.0">
    <file source-language="en" datatype="plaintext" original="messages" date="2014-05-28T07:44:03Z" product-name="my_extension">
        <header/>
        <body>
            <trans-unit id="settings.disqus.sso.name.description">
                <source>Your site's name. Disqus will display it in the Post As window.</source>
            </trans-unit>
        </body>
    </file>
</xliff>
Amygdaline answered 14/6, 2014 at 9:0 Comment(2)
Thats the Solution, the Caching Framework again hit me in the Face. :) Btw, thanks for providing an xlf Example, didnt find any Examples out there.Tedmund
Worked for me. First I tried only the fieldname in my XLF file, then I realized the appendix ".description" is important for it to work.Shinshina

© 2022 - 2024 — McMap. All rights reserved.