EXT: [drecomm] Formmaker¶

Forms¶

Forms can be created by inserting a page and select the 'Form' option from the '[DRECOMM] FORM MAKER' part of the page type selection box. A form is just a container to built forms in and has the same characteristics as the SysFolder page type.

The only property that can be set on this level is the temporary storage type. The temporary storage handles the storage of data filled in by the end-user during all form actions that need a page reload, like navigation between pages. There are two types of temporary storage available: cookie and database. Using cookies will require cookies to be enabled on the client machine, but will spare your database server. The size of cookies is limited, this might be a problem for large forms. The advantage of the database type is that you are not depending on any client side settings, the database server load, however, might increase significant.

In order to enable users to put a certain form anywhere in a website, there is a content element named 'Form Maker form'. With this content element, which is available from the 'Insert plugin' list, you can select a form from the TYPO3 page tree and place it anywhere on the website.

Pages¶

Forms consist of pages. A form can contain one or more pages. There are two types of pages: regular form pages and output pages. Each regular form page represent a physical page in the frontend. In the frontend, there is always just one page displayed at a time. You can navigate between different regular form pages using the navigation buttons (explained in the ' Fields ' section below). An output page represent a file. Such a file can be used after a user completed a form to offer a download or to attach that file to an e-mail.

<table border=”0”>

<!--GROUP1-->

        <tr>
                <td>###COLUMN1###</td>
                <td>###COLUMN2###</td>
                <td>###COLUMN3###</td>
        </tr>

<!--GROUP1-->

<!--GROUP2-->

        <tr>
                <td colspan=”3”>###COLUMN2###</td>
        </tr>

<!--GROUP2-->

<!--GROUP3-->

        <tr>
                <td colspan=”2”>###COLUMN1###</td>
                <td>###COLUMN2###</td>
        </tr>

<!--GROUP3-->

</table>

Groups¶

Pages consist of groups. A group is created by using the page type 'Form group' from the '[DRECOMM] FORM MAKER' part of the page type selection box. Groups have multiple purposes. First, it is a container for the actual form fields. Using such a container makes it easy to shortcut and therefore reuse groups of fields. You could create a group 'Personal information' with name and address fields and shortcut to that group from several forms. Second, a group has pretty much the function of a row. Especially when using the default template a group corresponds with a TR tag, but also when using custom HTML templates you will see this is often the case. The last purpose of using groups is to make it possible to adapt the form dynamically depending on certain events or data. The adaption of the form can occur without a page refresh using javascripts attached to one or more fields or with a page refresh using conditions.

Groups consist of columns. Where a group itself can be seen as a row, the columns represent the columns in that row. The number of columns in a group can be defined by the first option when creating a group.

The second option gives the opportunity to attach a condition to a group. The condition is evaluated and the group is only shown when the result of the condition is true (that is true in case of a boolean result, greater than zero in case of a numeric result and with a length greater than zero in case of a string). Conditions are created using the ' Condition '-wizard.

Furthermore, there are two checkboxes to set for each group. The 'Display by default' checkbox determines if a groups has to be displayed on page load. Every valid group is rendered, however when this checkbox is not checked, the group is not displayed due to the CSS setting 'display' is set to 'none'. This way, you can hide a group and let it appear when a checkbox is checked, for example, using javascripts (subform). The second checkbox is only relevant when the page where the group is a part of uses the default template. De default template generates a table, checking this checkbox will close the generated table and immediately start a new one, before rendering this group and the groups after this group. This way, columns can be separated for certain parts of a page.

Columns¶

Groups are divided in columns. Only when using the default template columns actually have to correspond to columns in the frontend. Th default template is created based on this information, which is defined at group level. When using custom templates a column corresponds to a column marker, which doesn't necessarily have to correspond to a real column.

In order to prevent the frontend being messed up when modifying a template (default or custom), each column defined has to contain content. The content can be empty, but there has to be some content. If there is an empty column found, the whole group is skipped. This way, you could create a custom template with, say, twenty groups and only use ten of them. The ten groups that are not used are skipped, when you need to add a group in the form tree you will not need to modify the template immediately.

Content elements¶

Form tree¶

Formmaker tools¶

Template editor¶

The 'File editor' is a simple editor to edit uploaded files. It often happens that templates and stylesheets that are uploaded need a slight modification. In order to prevent you need to upload the files over and over again while experimenting or debugging with a template or stylesheet, the upload options of plain text files have the 'File editor'-wizard attached.

Once you opened the editor, the content of the uploaded file is shown in a text area and can be edited. Clicking the save button will save the file and return to the edited object. Clicking the close button will discard the changes made.

Template settings wizard¶

Fieldtype settings wizard¶

Javascript wizard¶

Expression wizard¶

Instance wizard¶

The 'Instance'-wizard is a wizard without interface for form fields. It copies the edited field and links the original field to the copied field by the 'Instance of' property of the copied field. This way, an instance is created. The new instance is opened for editing. See the ' instances ' section for an explanation about why and how to use instances.

Output wizard¶

Connections wizard¶

Preload wizard¶

Backend functions wizard¶

Frontend editor (under construction)¶

Groups wizard (under construction)¶

Fieldtype repository¶

Fieldtype repository items consist of a name, description and a HTML template. The template can contain the default TYPO3 markers for groups (<!-- ... -->) and fields (### ... ###). Enclosing a part of the template in group markers will enable users to multiply that template part several times. For example, you can define a radio button and enclose it in group markers so users can create a list of radio buttons using just one field. There are two kind of field markers: system markers and user markers. There are three system markers that are obligatorily: ###SYS:Name###, ###SYS:Id### and ###SYS:Value###. The system markers are used to identify a field. All other markers needed will be user markers that look like this: ###USR: ... ###. User markers will return as option in the ' Fieldtype settings '-wizard.

Javascripts¶

Javascript repository items consist of a name, description, parameter list and a javascript function. The parameter list is a comma separated list of parameter names. These names appear in the ' Javascript '-wizard and can be filled in by the user. The parameters can be accessed in the javascript function by the array 'cParams'. This way, the parameters corresponding to a parameter list 'id,name' can be accessed by the variables 'cParams[“id”]' respectively 'cParams[“name”]'.

Furthermore, all javascripts from the repository have access to two more variables: cObj and cType. cObj contains the calling HTML object and cType contains the type (next, previous, last, first, etc.) of submit button that is pressed. Therefore, cType is only not empty when a javascript is attached to the onSubmit event.

The javascript function itself is that part of the function that you would normally find between the accolades corresponding to the function statement:

function someJavascriptFunction(someParameter) {
        <!-- THIS IS THE PART TO SAVE IN THE REPOSITORY -->
}

PHP repository¶

Group repository¶

Import¶

Export¶

Conversion¶

Extension manager¶

Security¶

Using presets¶

A detailed description how to use presets is given in the ' Javascript wizard ' section in the ' Users manual ' section above. The idea behind presets is another layer on top of the advanced options of the ' Javascript '-wizard. Preset are accessed via the 'Presets' page in this wizard, while the advanced options can be accessed via the 'Advanced' page. A preset contains three options which can be set by default or can be set by the user using the interface. These options are translated to one or more javascript attachments. Thus, the results of an preset will also be visible through the advanced options and visa versa the advanced options are matched against the three preset parameters. If a match is found, advanced options will also appear on the preset page.

The three options are being stored in xml format. Once the parameters are set, the preset will generate one or more javascript attachments. After using the user friendly interface of a preset, the parameter values could look like this:

<DFMSettings type="javascript">
<setting>
        <event><![CDATA[onsubmit]]></event>
        <javascripts>
                <javascript>
                        <id><![CDATA[1]]></id>
                        <parameters>
                                <parameter>
                                        <name><![CDATA[tekst]]></name>
                                        <value><![CDATA[testing]]></value>
                                </parameter>
                        </parameters>
                </javascript>
        </javascripts>
</setting>
</DFMSettings>

Presets can be complex to understand, play with it and it will become clear soon.

Creating presets¶

When you created an advanced javascript (or a simple one, but one where the user has to supply fuzzy information like ID's) you might want to create a new preset. This section is a kickstart to your first preset. Presets are saved in PHP files in the extension directory, more precise: in the wizard_javascript/presets directory. Each preset has it's own file. The file contains a PHP class that extends the class 'preset'.

Array (
  [0] => Array (
           [id] => list with javascript ID's
           [event] => list with events
           [function] => function ID
           [parameters] => Array (
                             [parameter1] => value1
                             [parameter2] => value2
                           )

         )
  [1] => Array (
           [id] => list with javascript ID's
           [event] => list with events
           [function] => function ID
           [parameters] => Array (
                             [parameter1] => value1
                             [parameter2] => value2
                           )
         )
)

PEAR¶

The PDF generation class requires PEAR (PHP Extension and Application Repository) to be installed. PEAR can be downloaded from http://pear.php.net/ or on UNIX machines installed using the php4-pear package.

HTML2PS¶

The PDF generation class requires HTML2PS to be installed and being executable. HTML2PS can be downloaded from http://user.it.uu.se/~jan/html2ps.html or on UNIX machines installed using the html2ps package.

PS2PDF¶

The PDF generation class requires PS2PDF to be installed and being executable. PS2PDF is part of the GhostScript distribution that can be downloaded from http://www.cs.wisc.edu/~ghost/ or on UNIX machines installed using the gs package.

CURL¶

PI1: form field¶

PI2: form button¶

PI3: form link¶

MOD1: repositories and tools¶

MOD2: form tree¶

Constants¶

Regular expressions¶

Common Functions¶

Expressions¶

Settings¶

Import¶

Export¶

Formmaker columns¶

TemplaVoila¶

Form tree¶

HTML_ToPDF: PDF generator¶

htmlMimeMail: E-mail generator¶