Skip to content

How to create a new extension for a fluid powered typo3 content element

13. September 2015
Summary
===========================================================================
-Create the new extension with "builder", not "extension-builder"
-Use flux in fluid templates for functionality


Prerequisites
===========================================================================
1. Install typo3 6.2.x
2. Install fluid powered typo3 extensions
3. Install extension "builder"


Step 1/4 - Create skeleton of the extension
===========================================================================
1. Login to typo3 backend
2. Click on Admin tools > Builder (not "Extension-Builder")
3. Create new extension 

Extension key
test

Author name and email
<test@example.org>

Brief title
Test title

Brief description
Test description


Toggles
[ ] Include page templates 
[X] Include content templates
[ ] Include backend module templates
[ ] Create controllers for enabled FluidTYPO3 features
[X] Set the VHS extension as dependency

Build behavior
[ ] Dry run - do not build actual files
[ ] Be verbose about actions taken 



Step 2/4 - Install the extension
===========================================================================
Install the extension in the extension manager. 


Step 3/4 - Refine the FLUID Templates
===========================================================================
Add label, description and group to the flux:form.

label       = "Test FE Plugin" --> This will be shown, in the new content element wizard
description = "Bla bla bla..." 
options     = "{group: 'FCE'}" --> In which tab in the new content element wizard

FILE
typo3conf/ext/test/Resources/Private/Templates/Content/Example.html

CODE
    ...
    <f:section name="Configuration">
        <flux:form id="foo" label="Test4 FE Plugin" description="Bla bla bla..." options="{group: 'FCE'}">
            ...
        </flux:form>
    </f:section>
    ...


Step 4/4 - Add some fields
===========================================================================
FILE
typo3conf/ext/test/Resources/Private/Templates/Content/Example.html

CODE
    ...
    <f:section name="Configuration">
        <flux:form id="example" label="Test4 FE Plugin" description="Bla bla bla..." options="{group: 'FCE'}">

            <flux:field.text name="settings.myCopy" label="My copy" enableRichText="true" defaultExtras="richtext[bold|italic|link]:rte_transform[flag=rte_enabled|mode=ts_css]"/>
            <flux:field.checkbox name="settings.myCheckbox" label="My checkbox" requestUpdate="TRUE"/>

        </flux:form>
    </f:section>
    ...

DOWNLOADS
test5.zip 
http://www.filedropper.com/test5_1

REFERENCES & THANKS GO TO
https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/content-element.html
https://jkphl.is/articles/dating-fluid-powered-typo3/
Advertisements
Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: