Users manual¶
The QFQ extension is activated through tt-content records. One or more tt-content records per page are necessary to render forms, reports (exports) or to perform delete and save commands submitted by a QFQ form.
Features not implemented yet¶
- Multi Forms
QFQ content element¶
QFQ is used by configuring Typo3 content elements. Insert one or more QFQ content elements on a Typo3 page. Specify column and language per content record as wished.
The title of the QFQ content element will not be rendered. It’s only visible in the backend for orientation.
QFQ Keywords (Bodytext)¶
Name Explanation form Formname defined in ttcontent record bodytext * Fix. E.g.: form = person * by SIP: form = {{form}} * by SQL: form = {{SELECT c.form FROM conference AS c WHERE c.id={{a:C}} }} r recordId. The form will load the record with the specified id * Variants: r = 123, by SQL: r = {{SELECT ...}} * If not specified, the default is ‘0’ <level>.db Select a DB. Only necessary if a different than the standard DB should be used. <level>.fbeg Start token for every field (=column) <level>.fend End token for every field (=column) <level>.head Start token for whole <level> <level>.tail End token for whole <level> <level>.rbeg Start token for row. <level>.rbgd Alternating (per row) token <level>.rend End token for row. Will be rendered before subsequent levels are processed <level>.renr End token for row. Will be rendered after subsequent levels are processed <level>.rsep Seperator token between rows <level>.fsep Seperator token between fields (=columns) <level>.sql SQL Query <level>.althead If <level>.sql is empty, these token will be rendered debugShowBodyText If =‘1’ and config.ini:showDebugInfo=yes: shows a tooltip with bodytext
Debug¶
config.ini: SHOW_DEBUG_INFO = yes|no|auto
yes:
Form:
- For every internal link/button, show tooltips with decoded SIP on mouseover.
- Shows ‘Edit form’ (wrench symbol) button on a form.
Report: Will be configured per tt-content record.
debugShowBodyText = 1
no: No debug info.
auto: Depending if there is a Typo3 BE session, set internally:
- SHOW_DEBUG_INFO = yes (BE session exist)
- SHOW_DEBUG_INFO = no (no BE session)
Form¶
- Forms will be created by using the Form editor on the Typo3 frontend (HTML form).
- The Formeditor itself consist of two predefined QFQ forms: form and formElement
- Every form consist of a) a Form record and b) multiple FormElement records.
- A form is assigned to a table. Such a table is called the primary table for this form.
- There are three types of forms which can roughly categorized into:
- Simple form: the form acts on one record, stored in one table.
- The form will create necessary SQL commands for insert, update and delete automatically.
- Advanced form: the form acts on multiple records, stored in more than one table.
- Fields of the primary table acts like a simple form, all other fields have to be specified with addNupdate records.
- Multi form: the form acts simultanously on more than one record. All records use the same FormElements.
- The FormElements are defined as a regular simple / or advanced form, plus a SQL Query, which selects and iterates over all records. Those records will be loaded at the same time.
- Simple form: the form acts on one record, stored in one table.
Variable (incl. mixed SQL Statement)¶
Most fields of a form specification might contain:
‘’constants’’ (=strings), this is the standard use case.
‘’variables’’ retrieved from the stores (see below),
‘’SQL statements’’ (limited set of),
or any combination of the above.
A variable (or SQL) statement is surrounded by curly braces:
{{VarName[:<store / prio>[:<sanitize class>[:<escape>]]]}}
Example:
{{r}}
{{index:FS}}
{{name:FS:alnumx:s}}
{{SELECT name FROM person WHERE id=1234}}
{{SELECT name FROM person WHERE id={{r}} }}
{{SELECT name FROM person WHERE id={{key1:C:alnumx}} }}
Leading and trailing spaces inside curly braces are removed.
- {{ SELECT “Hello World” }} acts as {{SELECT “Hello World”}}
- {{ varname }} acts as {{varname}}
There are several stores, from where to retrieve the value. If a value is not found in one store, the next store is searched, until a value is found or there are no more stores available.
If anywhere along the line an empty string is found, this is a value: therefore, the search will stop.
If no value is found, the value is an <empty string>.
URL Parameter¶
- URL (=GET) Parameter can be used in forms and reports as variables.
- If a value violates a parameter sanitize class, the value becomes an empty string.
Escape¶
- Variables used in SQL Statements might cause trouble, if they contain single or double ticks.
- Escaping of single or double is defined by the parameter <escape> (fourth parameter):
- ‘s’ - single ticks will be escaped.
- ‘d’ - double ticks will be escaped.
- It’s not possible to escape single and double ticks at the same time.
- Which of them to escape (single or double) depends on the surrounding SQL query.
- Escaping is only necessary inside of SQL queries.
Sanitize class¶
- All values in Store C (Client) and store F (Form) will be sanitized:
- All Predefined variable names have a specific default sanitize class. For these variables, it’s not necessary to specify a sanitize class.
- All other variables (Store: C, F) get by default the sanitize class defined in the corresponding form. If not defined the default class is ‘digit’.
- A default sanitize class can be overwritten by individual definition: {{a:C:all}}
- alnumx: [A-Za-z][0-9]@-_.,;: /()
- digit: [0-9].-+
- email: [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}
- min|max: only usable in forms. Compares the value against an lower and upper limit (numeric or string).
- min|max date: only usable in forms. Compares the value against an lower and upper date or datetime.
- pattern: only usable in forms. Compares the value against a regexp.
- allbut: all characters allowed, but not [ ] { } % & #. The used regexp: ‘^[^[]{}%&\#]+$’,
- all: no sanitizing
Store / prio¶
Only variables that are known in a specified store can be substituted.
Name Description Content F Store: FORM - F: data not saved in database yet. All native form elements. Recent values from the Browser. S Store: SIP - S: Client parameter ‘s’ will indicate the current SIP, which will be loaded from the SESSION repo to the SIP-Store. sip, r (record_id), form R Store: RECORD - R: Record - the current record loaded in the form All columns of the current record from the current table P Parent record. E.g.: on multi forms the current record of the outer query All columns of the MultiSQL Statement from the table for the current row D Default values column : The table.column specified default value. M Column type: The table.column specified type C Store: CLIENT - C: POST variable, if not found: GET variable Parameter sent from the Client (=Browser). T Store: TYPO3 (Bodytext) - T: a) Bodytext (ttcontent record), b) Typo3 internal variables See Typo3 tt_content record configuration V Store: VARS - V: Generic variables 0 Zero - allways value: 0, might be helpful if a variable is empty or undefined and will be used in an SQL statement. All possible keys E Empty - allways value: 0, might be helpful if a variable is empty or undefined and will be used in an SQL statement All possible keys Y Store: SYSTEM - S: a) Database, b) helper vars for logging/debugging: SYSTEM_SQL_RAW ... SYSTEM_FORM_ELEMENT_COLUMN
- Default <prio>: FSRD - Form / SIP / Record / Table definition.
- Hint: Preferable, parameter should be submitted by SIP, not by Client (=URL).
- Warning: Data submitted via ‘Client’ can be easily spoofed and altered.
- Best: Data submitted via SIP never leaves the server, cannot be spoofed or altered by the user.
- SIPs can _only_ be defined by using Report. Inside of Report use columns ‘Link’ (with attribute ‘s’), ‘page?’ or ‘Page?’.
Predefined variable names¶
Store: FORM - F¶
- Represents the values in the form, typically before saving them.
- Used for:
- Formelements who will be rerendered, after a parent element has been changed by the user.
- Formelement actions, before saving the form.
- Values will be sanitized by the class configured in corresponding the formelement. By default, the sanitize class is alnumx.
Name Explanation FormElement name Name of native formelement. To get, exactly and only, the specified form element (for ‘p_id’): {{p_id:F}}
Store: SIP - S¶
- Filled automatically by creating links. E.g.:
- in Report by using _page? or _link (with active ‘s’)
- in Form by using subrecords: ‘new’, ‘edit’, ‘delete’ links (system) or by column type _page?, _link.
Name Explanation sip 13 char uniqid r current record id form current form name table current table name urlparam all non Typo3 paramter in one string <user defined> additional user defined link parameter
Store: RECORD - R¶
- Current record loaded in Form.
- If r=0, alle values are empty.
Name Explanation <column name> Name of a column of the primary table (as defined in the current form). To get, exactly and only, the specified form element: {{p_id:R}}
Store: CLIENT - C¶
Name Explanation s =SIP r record id. Typically stored in SIP, rarely specified on the URL keySemId always current Semester Id keySemIdUser {{keySemIdUser}}, may be changed by user HTTP_HOST current HTTP HOST REMOTE_ADDR Client IP address ‘$_SERVER[*]’ All other variables accessable by $_SERVER[]. Only the often used have a pre-defined sanitize class. form Unique name of current form ANREDE {{sex}} == male >> Sehr geehrter Herr, {{sex}} == female Sehr geehrte Frau EANREDE {{sex}} == male >> Dear Mr., {{sex}} == female >> Dear Mrs.
Store: TYPO3 (Bodytext) - T¶
Name Explanation Note form Formname defined in ttcontent record bodytext
- Fix. E.g. form = person
- via SIP. E.g. form = {{form}}
see note pageId Record id of current Typo3 page see note pageType Current selected page type (typically URL parameter ‘type’) see note pageLanguage Current selected page language (typically URL parameter ‘L’) see note ttcontentUid Record id of current Typo3 content element see note feUser Logged in Typo3 FE User feUserUid Logged in Typo3 FE User uid feUserGroup FE groups of logged in Typo3 FE User
- note: not available * in ‘dynamicUpdate’ or * by FormElement class ‘action’ with type ‘beforeSave’, ‘afterSave’, ‘beforeDelete’, ‘afterDelete’.
Store: VARS - V¶
Name Explanation random random string with length of 32 chars, alphanum slaveId see FormElement action
Store: SYSTEM - S¶
Name Explanation DB_USER defined in config.ini DB_SERVER defined in config.ini DB_NAME defined in config.ini DB_INIT defined in config.ini SQL_LOG defined in config.ini SQL_LOG_MODE defined in config.ini SHOW_DEBUG_INFO defined in config.ini CSS_LINK_CLASS_INTERNAL defined in config.ini CSS_LINK_CLASS_EXTERNAL defined in config.ini CSS_CLASS_QFQ_CONTAINER defined in config.ini EXT_PATH computed during runtime SITE_PATH computed during runtime DATE_FORMAT defined in config.ini sqlFinal computed during runtime, used for error reporting sqlParamArray computed during runtime, used for error reporting sqlCount computed during runtime, used for error reporting
SQL Statement¶
The detection of an SQL command is case insensitive.
Leading whitespace will be skipped.
The following commands are interpreted as SQL commands:
- SELECT
- INSERT, UPDATE, DELETE, REPLACE, TRUNCATE
- SHOW, DESCRIBE, EXPLAIN, SET
A SQL Statement might contain parameters, including additional SQL statements. Inner SQL queries will be executed first.
All variables will be substituted one by one from inner to outer.
Maximum recursion depth: 5 (a recursion depth of 2 is sometimes used for mailing with templates, 3 and more probably confuses too much and is therefore not practicable, but supported until depth of 5)
The number of variables inside an input field or a SQL statement is not limited.
A resultset of a SQL statement will be imploded over all: concat all columns of a row, concat all rows - there is no glue string.
Example:
{{SELECT id, name FROM Person}} {{SELECT id, name, IF({{feUser}}=0,'Yes','No') FROM Vorlesung WHERE sem_id={{keySemId:Y}} }} {{SELECT id, city FROM Address AS adr WHERE adr.p_id={{SELECT id FROM Account AS acc WHERE acc.name={{feUser}} }} }}
Special case for SELECT input fields. To deliver a result array specify an ‘!’ before the SELECT:
*{{!SELECT ...}}*
- This is only possible for the outermost SELECT.
Form: basic setup¶
Name | Type | Description |
---|---|---|
id | int, autoincrement | created by by MySQL |
name | string | unique and speaking name of the form. Form will be identified by this name |
title | string | Title, shown on/above the form. |
noteInternal | textarea | Internal notes: special functionality, used variables, ... |
tableName | string | Primay table of the form |
permitNew | enum(‘sip’, ‘logged_in’, ‘logged_out’, ‘always’, ‘never’) | Default: sip |
permitEdit | enum(‘sip’, ‘logged_in’, ‘logged_out’, ‘always’, ‘never’) | Default: sip |
render | enum(‘plain’,’table’, ‘bootstrap’) | Default bootstrap |
requiredParameter | string | Name of required SIP parameter, seperated by comma. ‘#’ as comment delimiter |
showButton | set(‘new’, ‘delete’, ‘close’, ‘save’) | Default ‘new,delete,close,save’. Shown buttons in the upper right corner of the form. |
multiMode | enum(‘none’,’horizontal’,’vertical’) | Default ‘none’ |
multiSql | text | Optional. SQL Query which selects all records to edit. |
multiDetailForm | string | Optional. Form to open, if a record is selected to edit (double click on record line) |
multiDetailFormParameter | string | Optional. Translated Parameter submitted to detailform (like subrecord parameter) |
forwardMode | string: ‘auto|no|page’. | |
forwardPage | string / query | If $forward==”page”: page to jump to |
bsLabelColumns | string | The bootstrap grid system is based on 12 columns. The sum of bsLabelColumns, bsInputColumns and bsNoteColumns should be 12. These values here are the base values for all formelements. Exceptions per formelement can be specified per formelement. |
bsInputColumns | string | |
bsNoteColumns | string | note: default number of ‘bootstrap 12grid’ columns |
parameter | text | Misc additional parameters. See Field: Form.parameter |
deleted | string | ‘yes’|’no’. |
modified | timestamp | updated automatically through stored procedure |
created | datetime | set once through QFQ |
Field: Form.showButton¶
Display or hide the button ‘new’ and / or ‘delete’.
- new: Creates a new record. If the form needs any special parameter via SIP or Client, hide this ‘new’ button - the necessary parameter are not provided.
- delete: The simple form of deleting a record only deletes the record itself, not any child records.
Field: Form.parameter¶
- The following parameter are optional and can be configured in the Form.parameter field.
Name | Type | Description |
---|---|---|
maxVisiblePill | int | Show pills upto <maxVisiblePill> as button, all further in a dropdown menu. Eg.: maxVisiblePill=3 |
class | string | HTML div with given class, surrounding the whole form. Eg.: class=container-fluid |
- Example:
- maxVisiblePill = 5
- class = container-fluid
FormElements¶
- Each form contains one or more FormElement.
- The FormElements are divided in three categories:
- Ordering and grouping: Native Form-Elements and Container-Elements (both with feIdContainer=0) will be ordered by ‘ord’.
- Inside of a container, all nested elements will be displayed.
Class: Container¶
- Pills are containers for ‘fieldset’ and ‘native’ Form-Elements.
- Fieldsets are containers for ‘native’ Form-Elements
Type: fieldset¶
- Native Formelements can be assigned to a fieldset.
- name: technical name, used as HTML identifier.
- label: Shown title of the fieldset.
Type: pill¶
- Pill is synonymous for a tab. A pill looks like a tab.
- Pills are only available with mode render=’bootstrap’.
- If there is at least one pill defined, every native Formelement needs to be assigned to a pill or to a fieldset.
- If there is at least one pill defined, every fieldset needs to be assigned to a pill.
- Parameter:
- FormElement.’‘’name’‘’: technical name, used as HTML identifier.
- FormElement.’‘’label’‘’: Label shown on the corresponding pill button or inside the dropdown menu.
- FormElement.’‘’type’‘’: pill
- FormElement.’‘’feIdContainer’‘’: 0 # Pill’s can’t be nested.
- Form.’‘’Parameter’‘’: maxVisiblePill=<nr> Number of Pill-Buttons shown. Undefined means unlimited. Excess Pill buttons will be displayed as a dropdown menu.
Class: Native¶
Name | Type | Description |
---|---|---|
id | int | |
formId | int | |
feIdContainer | int | |
enabled | enum(‘yes’|’no’) | |
dynamicUpdate | enum(‘yes’|’no’) | In the browser, formelements with “dynamicUpdate=’yes’” will be updated depending on user input. Dynamic Update |
name | string | |
label | string | Label of formelement. Depending on layout model, left or on top of the formelement |
mode | enum(‘show’, ‘readonly’, ‘required’, ‘disabled’ ) | Show: regular user input field. This is the default. Required: User has to specify a value. Typically, an <empty string> represents ‘no value’. Readonly: user can’t change any data. Data not saved. Disabled: form element is not visible. |
class | enum(‘native’, ‘action’, ‘container’) | Details below. |
type | enum(‘checkbox’, ‘date’, ‘time’, ‘datetime’, ‘dateJQW’, ‘datetimeJQW’, ‘extra’, ‘gridJQW’, ‘text’, ‘note’, ‘password’, ‘radio’, ‘select’, ‘subrecord’, ‘textarea’, ‘timeJQW’, ‘upload’, ‘fieldset’, ‘pill’, ‘beforeLoad’, ‘beforeSave’, ‘beforeInsert’, ‘beforeUpdate’, ‘beforeDelete’, ‘afterLoad’, ‘afterSave’, ‘afterInsert’, ‘afterUpdate’, ‘afterDelete’, ‘sendmail’) | |
checkType | enum(‘min|max’, ‘pattern’, ‘number’, ‘email’) | |
checkPattern | ‘regexp’ | if $check_type==’pattern’: pattern to match |
onChange | string |
|
ord | string | display order of form elements (‘order’ is a reserved keyword) |
tabindex | string | HTML tabindex attribute |
size | string | Visible length of input element. Might be ommited, depending on the choosen form layout. Format: <width>,<height> (in characters) |
bsLabelColumns | string | Number of bootstrap grid columns for label. By default empty, value inherits from the form. |
bsInputColumns | string | Number of bootstrap grid columns for input. By default empty, value inherits from the form. |
bsNoteColumns | string | Number of bootstrap grid columns for note. By default empty, value inherits from the form. |
maxLength | string | Maximum characters for input. |
note | string | Note of formelement. Depending on layout model, right or below of the formelement |
tooltip | text | Display this text as tooltip on mouse over |
placeholder | string | Text, displayed inside the input element in light grey |
clientJs | text | Javascript called on ‘on change’ formelements |
value | text | Default value |
sql1 | text | SQL query (‘sql’ is a reserved keyword) |
sql2 | text | second SQL query |
parameter | text | might contain misc parameter. Depends on the type of formelement. |
feGroup | string | Comma-separated list of Typo3 FE Group ID. NOT SURE IF THIS WILL BE IMPLEMENTED. Native formElements, fieldsets and pills can be assigned to feGroups. Group status: show, hidden, disabled. Group Access: FE-Groups. User will be assigned to FE-Groups and the form defintion reference such FE-groups. Easy way of granting permission. |
deleted | string | ‘yes’|’no’. |
modified | timestamp | updated autmatically through stored procedure |
created | datetime | set once through QFQ |
Attribute | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
id | Internal id | |||||||||||||
formId | Form | |||||||||||||
containerId | Assign the Formelement to user defined fieldSet or pill | |||||||||||||
enabled | Formelement is active or not | |||||||||||||
name | Name of a column of the primary table. Formelements with a corresponding table will be saved automatically. | |||||||||||||
label | Label shown to the user. | |||||||||||||
mode | show, readonly, required, lock, disable. | |||||||||||||
class | native | |||||||||||||
type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
checkType | ||||||||||||||
checkPattern | ||||||||||||||
onChange | ||||||||||||||
ord | ||||||||||||||
tabindex | ||||||||||||||
size |
|
|
|
|||||||||||
maxLength | 1 |
|
||||||||||||
note | ||||||||||||||
tooltip | ||||||||||||||
placeholder | ||||||||||||||
clientJs | ||||||||||||||
value | ||||||||||||||
sql1 | ? | |||||||||||||
sql2 | ? | |||||||||||||
Additional attributes in Field ‘parameter’. Typically in key=value format. | ||||||||||||||
type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
accept | ? | |||||||||||||
alt | ? | |||||||||||||
autocomplete | ||||||||||||||
autofocus | ||||||||||||||
checkBoxMode | ||||||||||||||
checked | ||||||||||||||
unchecked | ||||||||||||||
label2 | ||||||||||||||
itemList | ||||||||||||||
emptyItemAtStart | ||||||||||||||
emptyItemAtEnd | ||||||||||||||
emptyHide | ||||||||||||||
accept |
|
- 1: A line break created every <size> elements. Easy way to make checkboxes or radio vertical instead of horizontal.
- 2: Any number >1 makes the ‘select’ input ‘multiple’ ready.
- See: https://www.w3.org/TR/html5/forms.html#file-upload-state-(type=file)
- All ‘native’ Formelements like ‘input’, ‘checkbox’, ...
Type: checkbox¶
Checkboxes can be rendered in mode:
single:
- One column in a table corresponds to one checkbox.
- The value for statuses checked and unchecked are free to choose.
- This mode is selected, if a) checkBoxMode = single, or b) checkBoxMode is missing and the number of fields of the column definition is <3.
- parameter:
- checkBoxMode = single (optional)
- checked = <value> (optional, the value which represents ‘checked’)
- If checked is empty or missing: If type = ‘enum’ or ‘set’, get first item of the definition. If type = string, get default.
- unchecked = <value> (optional, the value which represents ‘unchecked’)
- If unchecked is empty or missing: If type = ‘enum’ or ‘set’, get second item of checked. If type = ‘string’, get ‘’.
- label2 = <value> (Text right beside checkbox) (optional)
multi:
One column in a table represents multiple checkboxes. This is typically useful for the column type set.
The value for status checked are free to choose, the value for status unchecked is always the empty string.
Each field key (or the corresponding value from the key/value pair) will be rendered right beside the checkbox.
parameter
- checkBoxMode: multi
- itemList - E.g.:
itemList=red,blue,orange
itemList=1:red,2:blue,3:orange
itemList={{!SELECT id, value FROM someTable}}
FormElement ‘’‘Maxlength’‘’ - vertical or horizontal alignment:
- Value: ‘’, 0, 1 - The radios will be aligned vertical.
- Value: >1 - The readios will be aligned horizontal, with a linebreak every ‘value’ elements.
Type: date¶
- Range datetime: ‘1000-01-01’ to ‘9999-12-31’ or ‘0000-00-00’. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
- Optional: * dateFormat: ; yyyy-mm-dd | dd.mm.yyyy
Type: datetime¶
- Range datetime: ‘1000-01-01 00:00:00’ to ‘9999-12-31 23:59:59’ or ‘0000-00-00 00:00:00’. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
- Optional: * dateFormat: ; yyyy-mm-dd | dd.mm.yyyy * showSeconds: 0|1 - shows the seconds. Independent if the user specifies seconds, they are displayed ‘1’ or not ‘0’. * showZero: 0|1 - For an empty timestamp, With ‘0’ nothing is displayed. With ‘1’ the string ‘0000-00-00 00:00:00’ is displayed.
Type: extra¶
- Element is not shown in the browser.
- The element can be used to define / precalculate values for a column, which do not already exist as a native FormElement.
- The element is build /computed on form load.
Type: input¶
- General input for text and number.
- size:
- <number>: width of input element in characters. Lineheight = 1.
- <cols>,<rows>: input element = textarea, width=<cols>, height=<rows>
Type: note¶
Type: radio¶
Radio Buttons will be built from one of three sources:
- ‘sql1’: E.g. {{!SELECT type AS label FROM car }} or {{!SELECT type AS label, typeNr AS id FROM car}} or {{!SHOW tables}}.
- Resultset format ‘named’: column ‘label’ and optional a column ‘id’.
- Resultset format ‘index’:
- One column in resultset >> first column represents label
- Two or more columns in resultset >> first column represents id and second column represents label.
- FormElement.’‘’parameter’‘’:
- ‘’‘itemList’‘’ attribute. E.g.: itemList=red,blue,orange or itemList=1:red,2:blue:3:orange
- Definition of the enum or set field (only labels, no ids are possible).
FormElement ‘’‘Maxlength’‘’ - vertical or horizontal alignment:
- Value: ‘’, 0, 1 - The radios will be aligned vertical.
- Value: >1 - The readios will be aligned horizontal, with a linebreak every ‘value’ elements.
FormElement.’‘’parameter’‘’:
- ‘’‘emptyItemAtStart’‘’: Existence of this item inserts an empty entry at the beginning of the selectlist.
- ‘’‘emptyItemAtEnd’‘’: Existence of this item inserts an empty entry at the end of the selectlist.
- ‘’‘emptyHide’‘’: Existence of this item hides the empty entry. This is usefull for e.g. Enums, which have a en empty entry and the empty value should not be an option to be selected.
Type: select¶
Select lists will be built from one of three sources:
- ‘sql1’: E.g. {{!SELECT type AS label FROM car }} or {{!SELECT type AS label, typeNr AS id FROM car}} or {{!SHOW tables}}.
- Resultset format ‘named’: column ‘label’ and optional a column ‘id’.
- Resultset format ‘index’:
- One column in resultset >> first column represents label
- Two or more columns in resultset >> first column represents id and second column represents label.
- FormElement.’‘’parameter’‘’:
- ‘’‘itemList’‘’ attribute. E.g.: itemList=red,blue,orange or itemList=1:red,2:blue:3:orange
- Definition of the enum or set field (only labels, no ids are possible).
FormElement.’‘’size’‘’:
- <empty>|0|1: Dropdown list.
- >1: Select field with ‘size’ rows height. Multiple selection of items is possible.
FormElement.’‘’parameter’‘’:
- ‘’‘emptyItemAtStart’‘’: Existence of this item inserts an empty entry at the beginning of the selectlist.
- ‘’‘emptyItemAtEnd’‘’: Existence of this item inserts an empty entry at the end of the selectlist.
- ‘’‘emptyHide’‘’: Existence of this item hides the empty entry. This is usefull for e.g. Enums, which have a en empty entry and the empty value should not be an option to be selected.
Type: subrecord¶
The FormElement type ‘subrecord’ renders a list of records (so called secondary records), typically to show, edit, delete or add new records. The list is defined as a SQL query. The number of records shown is not limited. These FormElement will be rendered inside the form as a HTML table.
sql1: SQL query to select records. E.g.:
{{!SELECT a.id AS id, CONCAT(a.street, a.streetnumber) AS a, a.city AS b, a.zip AS c FROM Address AS a}}
Notice the exclamation mark after ‘{{‘ - this is necessary to return an array of elements, instead of a single string.
Exactly one column ‘id’ has to exist; it specifies the primary record for the target form. In case the id should not be visible to the user, it has to be named ‘_id’.
Columnname: [title=]<title>[|[width=]<number>][|nostrip][|icon][|link][|url][|mailto][|_rowClass][|_rowTitle]
All parameter are position independet.
Separate parameter by ‘|’.
[title=]<text>: Title of the column. The keyword ‘title=’ is optional. Columns with a title starting with ‘_’ won’t be rendered.
[width=]<number>: Max. width of chars displayed per cell. The keyword ‘width=’ is optional. Default max width: 20. This setting also affects the title of the column.
nostrip: by default, html tags will be stripped off the cell content before rendering. This protects the table layout. ‘nostrip’ deactivates the cleaning to make pure html possible.
icon: the cell value contains the name of an icon in typo3conf/ext/qfq/Resources/Public/icons. Empty cell values will omit an html image tag (=nothing rendered in the cell).
link: value will be rendered as described under Column: _link
url: value will be rendered as a href url.
mailto: value will be rendered as a href mailto.
_rowClass
- The value is a CSS class name(s) which will be rendered in the <tr class=”<_rowClass>”> of the subrecord table.
- The column itself is hidden to the user.
- By using Bootstrap, the following predefined classes are available:
- Text color: text-muted|text-primary|text-success|text-info|text-warning|text-danger (http://getbootstrap.com/css/#helper-classes)
- Row background: active|success|info|warning|danger (http://getbootstrap.com/css/#tables-contextual-classes)
_rowTitle
- Defines the title attribute of a subrecod table row (tooltip).
Examples:
SELECT note1 AS 'Comment', note2 AS 'Comment|50' , note3 AS 'title=Comment|width=100|nostrip', note4 AS '50|Comment', 'checked.png' AS 'Status|icon', email AS 'mailto', CONCAT(homepage, '|Homepage') AS 'url', ELT(status,'info','warning','danger') AS '_rowClass', help AS '_rowTitle' ...
parameter
form: Target form, e.g. form=person
page: Target page with detail form. If none specified, use the current page.
title: Title displayed over the table in the current form.
detail: Mapping of values from the primary form to the target form (defined via form=...).
Syntax:
<source table column name 1|&constant 1>:<target column name 1>[,<source table column name 2|&constant 2>:<target column name 2>][...]
Example: detail=id:personId,&12:xId,&{{a}}:personId
By default, the given value will overwrite values on the target record. In most situations, this is the wished behaviour.
Exceptions of the default behaviour have to be defined on the target form in the corresponding formelement in the field value by changing the default Store priority definition. E.g. {{<columnname>:RS0}} - For existing records, the store R will provide a value. For new records, store R is empty and store S will be searched for a value: the value defined in detail will be choosen. At last the store ‘0’ is defined as a fallback.
source table column name: E.g. A person form is opened with person.id=5 (r=5). The definition detail=id:personId and form=address maps person.id to address.personId. On the target record, the column personId becomes ‘5’.
Constant ‘&’: Indicate a ‘constant’ value. E.g. &12:xId or {{...}} (all possibilities, incl. further SELECT statements) might be used.
Type: string¶
Type: submit¶
Typically not used. Useful if user wishes an explicit ‘Submit’ Button.
Type: time¶
- Range time: ‘00:00:00’ to ‘23:59:59’ or ‘00:00:00’. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
- Optional: * showSeconds: 0|1 - shows the seconds. Independent if the user specifies seconds, they are displayed ‘1’ or not ‘0’. * showZero: 0|1 - For an empty timestamp, With ‘0’ nothing is displayed. With ‘1’ the string ‘00:00[:00]’ is displayed.
Type: upload¶
- See: https://www.w3.org/TR/html5/forms.html#file-upload-state-(type=file)
- parameter:accept: image/,video/,audio/,.doc,.docx,.pdf,<mime type>*
An upload element is based on a file browse button and a delete button. Only one of them is shown at a time. The file browse button is displayed, if there is no file uploaded already. The trash button is displayed, if there is file uploaded already.
The user can than select a file from the local filesystem. After choosing the file, the upload starts immediately, shown by a turning wheel. When the server received the whole file and accepts the file, the browse button dissappears and the filename is shown, followed by a delete button. Either the user is satisfied now or the user can delete the uploaded file (and maybe upload another one). Until this point, the file is cached on the server but not copied to the final destination. The user have to save the current record, either to finalize the upload or to delete a previous uploaded file.
FormElement. parameter:
fileDestination: Destination where to copy the file. A good practice is to specify a relative fileDestination - such an installation (filesystem and database) are moveable.
If fileDestination should contain the original filename, the variable {{_filename}} can be used. Example
fileDestination={{SELECT 'fileadmin/user/pictures/', p.name, '-{{_filename}}' FROM Person AS p WHERE p.id={{r}} }}
- If a file already exist under fileDestination, an error message is shown and ‘save’ is aborted.
The user has no possibility to overwrite the already existing file. If the whole workflow is correct, this situation should no arise.
All necessary subdirectories in fileDestination are automatically created.
Using the current record id in the fileDestination: Using {{r}} is problematic for new records: that one is still ‘0’ at the time of saving. Use {{id:R0}} instead.
Deleting a record and the referenced file¶
If the user deletes a record which contains reference(s) to files, such files are deleted too.
Only columns where the columname contains pathFileName are checked for file references. Therefore, always choose a columnanem which contains pathFileName.
If there are other records, which references the same file, such files are not deleted (but the record is deleted). It’s a very basic check: just the current column of the current table is compared.
Class: Action¶
Type: before... | after...¶
Types:
- beforeLoad
- afterLoad
- beforeSave
- afterSave
- beforeInsert
- afterInsert
- beforeUpdate
- afterUpdate
- beforeDelete
- afterDelete
Check data
Perform checks by fireing s SQL query and expecting a predefined number of selected records. Depending on the ‘action’-type, the check is perform on form load, or form save.
- OK: the expected number of records has been selected. Continue processing the next FormElement.
- Fail: the expected number of records has not been selected (less or more): Display an error message and abort the current form load or form save.
FormElement.’‘’parameter’‘’:
- ‘’‘requiredList‘’‘ - List of native-FormElements: only if all of those elements are filled, the current action-FormElement will be processed.
- ‘’‘sqlValidate’‘’ - query. E.g.: sqlValidate={{!SELECT id FROM Person AS p WHERE p.name LIKE {{name:F:all}} AND p.firstname LIKE {{firstname:F:all}} }}
- Pay attention to ‘{{!...’ after the equal sign.
- ‘’‘expectRecords‘’‘ - number of records. E.g.: expectRecords=0 or expectRecords=0,1 or expectRecords={{SELECT COUNT(id) FROM Person}} * Separate multiple valid record numbers by ‘,’. If at least one of those matches, the check will pass successfully.
- ‘’‘messageFail‘’‘ - Message to show. E.g.: messageFail=There is already a person called {{firstname:F:all}} {{name:F:all}}
Insert / Update / Delete records
- Save values of a form to different record(s), optionally on different table(s).
- Typically usefull on ‘afterSave’ - be carefull when using it earlier, e.g. beforeLoad.
FormElement.’‘’parameter’‘’:
- ‘’‘requiredList‘’‘ - List of native-FormElements: only if all of those elements are filled, the current action-FormElement will be processed.
- ‘’‘slaveId‘’‘:
- If slaveId does not exist or is empty (e.g. a defined query has an empty result):
- If there is a primary table column, with the same name as the current action-FormElement: take the value from that column as slaveId.
- If not: treat it as ‘0’.
- A value of 0 means the following sqlInsert will be fired.
- A value > 0 means the following sqlUpdate will be fired and the slaveId specifies which one.
- Access the slaveId by using the variable {{slaveId:V}} inside of sqlUpdate, sqlInsert or sqlDelete.
- If slaveId does not exist or is empty (e.g. a defined query has an empty result):
- ‘’‘sqlUpdate‘’‘ - query. E.g.: sqlUpdate={{UPDATE Address SET street = ‘{{street:F:all}}’ WHERE id={{slaveId:V}} LIMIT 1}}
- ‘’‘sqlInsert‘’‘ - query. E.g.: sqlInsert={{INSERT INTO Address (pId, street) VALUES ( {{id:R}}, ‘{{street:F:all}}’ WHERE id={{slaveId:V}} }}
- ‘’‘sqlDelete‘’‘ - query: E.g.: sqlDelete={{DELETE FROM Address WHERE id={{slaveId:V}} AND ‘’=’{{city:F:allbut:s}}’ LIMIT 1}}
- If the action-FormElement name exist as a column in the master record: Update that column with the recent slaveId (after an INSERT the last_insert_id() acts as the new slaveId).
Type: sendmail¶
- Send mail(s) on request.
- respects ‘processRow’
Dynamic Update¶
The ‘Dynamic Update’ feature makes a form more interactive. If a user change a FormElement who is tagged with ‘dynamicUpdate’, all elements who are tagged with ‘DynamicUpdate’, will be recalculated and rerendered.
- The following fields will be recalculated during ‘Dynamic Update’
- ‘modeSql’ - Possible values: ‘show’, ‘required’, ‘readonly’, ‘hidden’
- ‘value’
- ‘parameter.*’ - especially ‘itemList’
To make a form dynamic:
Mark all FormElements with {dynamic update}=enabled, which should send or receive a ‘do update’ signal.
Define the receiving FormElements in a way, that they will interpret the recent user change. The form variable of the specific sender FormElement `{{<sender element>:F:<sanitize>}} should be part of one of the above fields to get an impact. E.g.:
[receiving formElement].parameter: itemList={{ SELECT IF({{carPriceRange:FE:alnumx}}='expensive','Ferrari,Tesla,Jaguar','General Motors,Honda,Seat,Fiat') }}
Label and Description are not ‘Dynamic Update’ aware (Feature Request #2081).
Report¶
General¶
To display a report on any given TYPO3 page, create a content element of type ‘QFQ Element’ (plugin) on that page.
A simple example¶
Assume that the database has a table person with columns first_name and last_name. To create a simple list of all persons, we can do the following:
10.sql = SELECT id AS person_id, CONCAT(first_name, " ", last_name, " ") AS name FROM person
10 Stands for a root level of the report (see section Structure). 10.sql defines a SQL query for this specific level. When the query is executed it will return a result having one single column name containing first and last name separated by a space character.
The HTML output displayed on the page resulting from only this definition could look as follows:
Marc MusterElton JohnSpeedy Gonzales
I.e., QFQ will simply output the content of the SQL result row after row for each single level.
However, we can modify (wrap) the output by setting the values of various keys for each level: 10.rsep=<br/> for example tells QFQ to seperate the rows of the result by a HTML-line break. The final result in this case is:
10.sql = SELECT id AS person_id, CONCAT(first_name, " ", last_name, " ") AS name FROM person
10.sep = <br />
HTML output:
Marc Muster<br />Elton John<br />Speedy Conzales<br />
Syntax¶
All root level queries will be fired in the order specified by ‘level’ (Integer value).
For each row of a query (this means all queries), all subqueries will be fired once.
- E.g. if the outer query selects 5 rows, and a nested query always select 3 rows, than the total number of rows are 5 x 3 = 15 rows.
There is a set of variables that will get replaced before the SQL-Query gets executed:
Column values of the recent rows: {{<level>.<columnname>}}
Global variables: {{global.<name>}}
Variables from specific stores: {{<name>[:<store/s>[:<sanitize class>]]}}
Current row index: {{<level>.line.count}}
Total rows (num_rows for SELECT and SHOW, affected_rows for UPDATE and INSERT): {{<level>.line.total}}
Last insert id for INSERT: {{<level>.line.insertId}}
See Variable (incl. mixed SQL Statement) for a full list of all available variables.
Be aware that line.count / line.total have to be known before the query is fired. E.g. 10.sql = SELECT {{10.line.count}}, ... WHERE {{10.line.count}} = ... won’t work as expected. {{10.line.count}} can’t be replaced before the query is fired, but will be replaced during processing the result!
Different types of SQL queries are possible: SELECT, INSERT, UPDATE, DELETE, SHOW
Only SELECT and SHOW queries will fire subqueries.
Processing of the resulting rows and columns:
In general, all columns of all rows will be printed out sequentially.
On a per column base, printing of columns can be suppressed. This might be useful to select values which will be accessed later on in another query via the {{level.columnname}} variable. To suppress printing of a column, use a underscore as column name prefix.
Reserved column names have a special meaning and will be processed in a special way. See Processing of columns in the SQL result for details.
There are extensive ways to wrap columns and rows automatically. See Wrapping rows and columns: Level keys
Debug the bodytext¶
The parsed bodytext could be displayed by activating ‘showDebugInfo’ (Debug) and specifying
debugShowBodyText = 1
A small symbol with a tooltip will be shown, where the content record will be displayed on the webpage. Note: Debug information will only be shown with showDebugInfo=yes in config.ini .
Structure¶
A report can be divided into several levels. This can make report definitions more readable because it allows for splitting of otherwise excessively long SQL queries. For example, if your SQL query on the root level selects a number of person records from your person table, you can use the SQL query on the second level to look up the city where each person lives.
See the example below:
10.sql = SELECT id AS _person_id, CONCAT(first_name, " ", last_name, " ") AS name FROM person
10.rsep = <br />
10.10.sql = SELECT CONCAT(postal_code, " ", city) FROM address WHERE p_id = {{10.person_id}}
10.10.rbeg = (
10.10.rend = )
This would result in
Marc Muster (3004 Bern)
Elton John (8008 Zürich)
Speedy Conzales (3012 Bern)
Text across several lines¶
To make SQL queries, or QFQ records in general, more readable, it’s possible to split a line across several lines. Lines with keywords are on their own (QFQ Keywords (Bodytext)) starts a new line - if a line is not a ‘keyword’ line, it will be appended at the last keyword line. ‘Keyword’ lines are detected on:
- <level>.<keyword> =
- {
- <level>[.<level] {
Example:
10.sql = SELECT 'hello world'
FROM mastertable
10.tail = End
20.sql = SELECT 'a warm welcome'
'some additional', 'columns'
FROM smartTable
WHERE id>100
20.head = <h3>
20.tail = </h3>
Nesting of levels¶
Levels can be nested. E.g.:
10 {
sql = SELECT ...
5 {
sql = SELECT ...
head = ...
}
}
This is equal to:
10.sql = SELECT ...
10.5.sql = SELECT ...
10.5.head = ...
By default, curly braces ‘{}’ are used for nesting. Alternatively angle braces ‘<>’, round braces ‘()’ or square braces ‘[]’ are also possible. To define the braces to use, the first line of the bodytext has to be a comment line and the last character of that line must be one of ‘{}[]()<>’. The corresponding braces are used for that QFQ record. E.g.:
# Specific code. >
10 <
sql = SELECT
head = <script>
data = [
{
10, 20
}
]
</script>
>
Per QFQ tt-content record, only one type of nesting braces can be used.
Be carefull to:
write nothing else than whitespaces/newline behind an open brace
the closing brace has to be alone on a line.
10.sql = SELECT 'hello world' 20 { sql = SELECT 'a new query' head = <h1> tail = </h1> } 30 { sql = SELECT 'a third query' head = <h1> tail = </h1> 40 { sql = SELECT 'a nested nested query' } } 30.40.tail = End 50 { sql = SELECT 'A query with braces on their own' }
Access to upper column values¶
Columns of the upper level result can be accessed via variables, eg. {{10.person_id}} will be replaced by the value in the person_id column.
Levels | A report is divided into levels. Example 1 has 3 levels 10, 20.25, 20.25.10 |
Qualifier | A level is divided into qualifiers 20.30.10 has 3 qualifiers 20, 30, 10 |
Root levels | Is a level with one qualifier. E.g.: 10 |
Sub levels | Is a level with more than one qualifier. E.g. levels 20.25 and 20.30.10 |
Child | The level 20 has one child 20.25 |
Parent | The level 20.25 has a parent 20 |
Example explanation | 10 and 20 are root level and will be executed independently. 10 don’t have a sub level. 20.25 will be executed as many times as 20 has row numbers. 20.30.10 won’t be executed because there isn’t any 20.30 level |
Report Example 1:
# Displays current date
10.sql = SELECT CURDATE()
# Show all students from the person table
20.sql = SELECT p.id AS p_id, p.first_name, " - ", p.last_name FROM person AS p WHERE p.typ LIKE "student"
# Show all the marks from the current student ordered chronological
20.25.sql = SELECT e.mark FROM exam AS e WHERE e.p_id={{20.p_id}} ORDER BY e.date
# This query will never be fired, cause there is no direct parent called 20.30.
20.30.10.sql = SELECT 'never fired'
Wrapping rows and columns: Level keys¶
Order and nesting of queries, will be defined with a typoscript-like syntax: level.sublevel1.subsublevel2. ... Each ‘level’ directive needs a final key, e.g: 20.30.10. sql. A key sql is necessary in order to process a level. All QFQ Keywords (Bodytext).
Processing of columns in the SQL result¶
- The content of all columns of all rows will be printed sequentially, without separator.
- Rows with Special column names will be processed in a special way.
Special column names¶
- Special column names always start with ‘_’.
- Column names, which start with a ‘_’ and which are not reserved (=special column name), will not be printed. Nevertheless, access to it via the {{<level>.<column>}} variable (without ‘_’) are possible.
- The input parameters for the processing function are stored as column values.
- Single parameters are delimited by the ‘|’ character.
- Parameters are identified by the function either
- by their order
- or by a one character qualifier followed by the ‘:’ character, placed in front of the actual parameter value.
Reserved column name | Purpose |
---|---|
_link | Easily create links with different features. |
_mailto | Quickly create email links. A click on the link will open the default mailer. The address is encrypted via JS against email bots. |
_pageX or _PageX | Shortcut version of the link interface for fast creation of internal links. The column name is composed of the string page/Page and a optional character to specify the type of the link. |
_sendmail | Send emails. |
_exec | Run batch files or executables on the webserver. |
_vertical | Render Text vertically. This is usefull for tables with limited column width. |
_img | Display images. |
_bullet | Display a blue/gray/green/pink/red/yellow bullet. If none color specified, show nothing |
_check | Display a blue/gray/green/pink/red/yellow checked sign. If none color specified, show nothing |
_<nonReservedName> | Suppress output. Column names with leading underscore are used to select data from the database and make it available in other parts of the report without generating any output. |
Column: _link¶
{{url | display | i (internal), e(external) | - (same),n (new), p (parent), t(top) | -, (e(edit), c(copy), n(new), d(delete), i(insert) , f(file)) }}
- Most URLs will be rendered via class link.
- Column names like _pagee, _mailto, ... are wrapper to class link.
- The parameters for link contains a prefix to make them position-independet.
URL | IMG | Meaning | Qualifier | Example | Description |
---|---|---|---|---|---|
x | URL | u:<url> | u:http://www.example.com | If an image is specified, it will be rendered inside the link, default link class: external | |
x | m:<email> | m:info@example.com | Default link class: email | ||
x | Page | p:<pageId> | p:impressum | Prepend ‘?’ or ‘?id=’, no hostname qualifier (automatically set by browser), default link class: internal, default value: {{pageId}} | |
Text | t:<text> | t:Firstname Lastname | |||
Render | r:<mode> | r:[0-5] | See: render-mode, Default: 0 | ||
x | Picture | P:<filename> | P:bullet-red.gif | Picture ‘<img src=”bullet-red.gif”alt=”....”>’, default link class: internal. | |
x | Edit | E | E | Show ‘edit’ icon as image | |
x | New | N | N | Show ‘new’ icon as image | |
x | Delete | D | D | Show ‘delete’ icon as image | |
x | Help | H | H | Show ‘help’ icon as image | |
x | Info | I | I | Show ‘information’ icon as image | |
x | Show | S | S | Show ‘show’ icon as image | |
x | Bullet | B:[<color>] | B:green | Show bullet with ‘<color>’. Colors: blue, gray, green, pink, red, yellow. Default Color: green. | |
x | Check | C:[<color>] | C:green | Show checked with ‘<color>’. Colors: blue, gray, green, pink, red, yellow. Default Color: green. | |
URL Params | U:<key1>=<value1>[&<keyN>=<valueN>] | U:a=value1&b=value2&c=... | Any number of additional Params. Links to forms: U:form=Person&r=1234 | ||
Tooltip | o:<text> | o:More information here | Tooltip text | ||
Alttext | a:<text> | a:Name of person | Alttext for images | ||
Class | c:[n|i|e|<text>] | c:i | CSS class for link. n:no class attribut, i:internal (ext_localconf.php)(default), e:external (ext_localconf.php), <text>: explicit named | ||
Target | g:<text> | g:_blank | target=_blank,_self,_parent,<custom>. Default: no target | ||
Question | q:<text> | q:please confirm | See: question. Link will be executed only if user clicks ok/cancel, default: ‘Please confirm’ | ||
Encryption | e:0|1|... | e:1 | Encryption of the e-mail: 0: no encryption, 1:via Javascript (default) | ||
Right | R | R | Defines picture position: Default is ‘left’ (no definition) of the ‘text’. ‘R’ means ‘right’ of the ‘text’ | ||
SIP | s[:0|1] | s, s:0, s:1 | If ‘s’ or ‘s:1’ a SIP entry is generated with all non Typo 3 Parameters. The URL contains only parameter ‘s’ and Typo 3 parameter |
Render mode¶
Mode | Both: url & text | Only: url | Only: text | Description |
---|---|---|---|---|
0 (default) | <a href=url>text</a> | <a href=url>url</a> | text or image will be shown, only if there is a url, page or mailto | |
1 | <a href=url>text</a> | <a href=url>url</a> | text | Text or image will be shown, independet of there is a url |
2 | <a href=url>text</a> | no link if text is empty | ||
3 | text | url | text | no link, only text or image |
4 | url | url | text | no link, show text, if text is empty, show url |
5 | nothing at all |
Link Examples¶
SQL-Query | Result |
---|---|
SELECT “m:info@example.com” AS _link | info@example.com as linked text, encrypted with javascript, class=external |
SELECT “m:info@example.com|c:0” AS _link | info@example.com as linked text, not encrypted, class=external |
SELECT “m:info@example.com|P:mail.gif” AS _link | info@example.com as linked image mail.gif, encrypted with javascript, class=external |
SELECT “m:info@example.com|P:mail.gif|o:Email” AS _link | info@example.com as linked image mail.gif, encrypted with javascript, class=external, tooltip: “sendmail” |
SELECT “m:info@example.com|t:mailto:info@example.com|o:Email” AS link | ‘mail to info@example.com‘ as linked text, encrypted with javascript, class=external |
SELECT “u:www.example.com” AS _link | www.example as link, class=external |
SELECT “u:http://www.example.com” AS _link | http://www.example as link, class=external |
SELECT “u:www.example.com|q:Please confirm” AS _link | www.example as link, class=external, See: question |
SELECT “u:www.example.com|c:i” AS _link | http://www.example as link, class=internal |
SELECT “u:www.example.com|c:nicelink” AS _link | http://www.example as link, class=nicelink |
SELECT “p:form_person|c:e” AS _link | <a class=”external” href=”?form_person”>Text</a> |
SELECT “p:form_person¬e=Text|t:Person” AS _link | <a class=”internal” href=”?form_person&S_person=Text”>Person</a> |
SELECT “p:form_person|E” AS _link | <a class=”internal” href=”?form_person”><img alttext=”Edit” src=”typo3conf/ext/qfq/Resources/Public/icons/edit.gif”></a> |
SELECT “p:form_person|E|g:_blank” AS _link | <a target=”_blank” class=”internal” href=”?form_person”><img alttext=”Edit” src=”typo3conf/ext/qfq/Resources/Public/icons/edit.gif”></a> |
SELECT “p:form_person|C” AS _link | <a class=”internal” href=”?form_person”><img alttext=”Check” src=”typo3conf/ext/qfq/Resources/Public/icons/checked-green.gif”></a> |
SELECT “p:form_person|C:green” AS _link | <a class=”internal” href=”?form_person”><img alttext=”Check” src=”typo3conf/ext/qfq/Resources/Public/icons/checked-green.gif”></a> |
Question¶
Syntax
q[:<alert text>[:<level>[:<positive button text>[:<negative button text>[:<timeout>[:<flag modal>]]]]]]
- If a user clicks on a link, an alert is shown. If the user answers the alert by clicking on the ‘positive button’, the browser opens the specified link. If the user click on the negative answer (or waits for timout), the alert is closed and the browser does nothing.
- All parameter are optional.
- Parameter are seperated by ‘:’
- To use ‘:’ inside the text, the colon has to be escaped by ‘\’. E.g. ‘ok\: I understand’.
Parameter | Description |
---|---|
Text | The text shown by the alert. HTML is allowed to format the text. Any ‘:’ needs to be escaped. Default: ‘Please confirm’. |
Level | success, info, warning, danger |
Positive button text | Default: ‘Ok’ |
Negative button text | Default: ‘Cancel’ |
Timeout in seconds | 0: no timeout, >0: after the specified time in seconds, the alert will dissapear and behaves like ‘negative answer’ |
Flag modal | 0: Alert behaves not modal. 1: (default) Alert behaves modal. |
Examples:
SQL-Query | Result |
---|---|
SELECT “p:form_person|q:Edit Person:warn” AS _link | Shows alert with level ‘warn’ |
SELECT “p:form_person|q:Edit Person::I do:No way” AS _link | Instead of ‘Ok’ and ‘Cancel’, the button text will be ‘I do’ and ‘No way’ |
SELECT “p:form_person|q:Edit Person:::10” AS _link | The Alert will be shown 10 seconds |
SELECT “p:form_person|q:Edit Person:::10:0” AS _link | The Alert will be shown 10 seconds and is not modal. |
Delete¶
Records will be deleted via typo3conf/ext/qfq/qfq/api/delete.php and needs the parameter:
- _targetUrl=<url> , typically, this is the $_SERVER[‘REQUEST_URI’] available via {{REQUEST_URI:Y}}.
- _answerMode=html
Example:
SELECT 'u:typo3conf/ext/qfq/qfq/api/delete.php|U:table=Person&r=123&_targetUrl={{REQUEST_URI:Y}}&_answerMode=html|q:Do you want delete John Doe?|s|c:n' AS _link
It’s easier to use the shortcut via special columnname _paged.
- If the record to delete contains column(s), whose columnname match on %pathFileName% and such a column points to a real existing file,
- such a file will be deleted too. If the table contains records where the specific file is multiple times referenced, than the file is not deleted (it would break the still existing references). Multiple references are not found, if they use different colummnnames or tablenames.
Columns: _page[X]¶
The colum name is composed of the string page and a trailing character to specify the type of the link.
Syntax
SELECT "[options]" AS _page[<link type>]
with: [options] = [p:<page & param>]|[t:<text>]|[o:<tooltip>]|[q:<question parameter>]|[c:<class>]|[g:<target>]|[r:<render mode>]
<link type> = c,d,e,h,i,n,s
column name | Purpose | default value of question parameter | Mandatory parameters | |
---|---|---|---|
_page | Internal link without a grafic | empty | p:<pageId>[¶m] |
_pagec | Internal link without a grafic, with question | Please confirm! | p:<pageId>[¶m] |
_paged | Internal link with delete icon (trash) | Delete record ? | p:<pageId>[¶m] |
_pagee | Internal link with edit icon (pencil) | empty | p:<pageId>[¶m] |
_pageh | Internal link with help icon (question mark) | empty | p:<pageId>[¶m] |
_pagei | Internal link with information icon (i) | empty | p:<pageId>[¶m] |
_pagen | Internal link with new icon (sheet) | empty | p:<pageId>[¶m] |
_pages | Internal link with how icon (magnifier) | empty | p:<pageId>[¶m] |
- All parameter are optional.
- Optional set of predefined icons.
- Optional set of dialog boxes.
Parameter | Description | Default value | Example |
---|---|---|---|
<page> | TYPO3 page id or page alias. | The current page: {{pageId}} | 45 application application&N_param1=1045 |
<text> | Text, wrapped by the link. If there is an icon, text will be displayed to the right of it. | empty string | |
<tooltip> | Text to appear as a ToolTip | empty string | |
<question> | If there is a question text given, an alert will be opened. Only if the user clicks on ‘ok’, the link will be called | Expected “=” to follow “see” | |
<class> | CSS Class for the <a> tag | The default class defined for internal links in ext_localconf.php (see ...) | |
<target> | Parameter for HTML ‘target=’. F.e.: Opens a new window | empty | P |
<rendermode> | Show/render a link at all or not. See render-mode 0-5 | ||
<create sip> | s | ‘s’: create a SIP |
Column: _paged¶
Necessary parameter:
- table
- r
Syntax
SELECT "p:delete?table=<tablename>&r=<recordId|q:<question>|..." AS _paged
Columns: _Page[X]¶
- Similar to _page[X]
- Parameter are position dependent and therefore without a qualifier!
[<page id|alias>[¶m=value&...]] | [text] | [tooltip] | [question parameter] | [class] | [target] | [render mode] | [create sip] "" as _pagee.
Column: _vertical¶
Render text vertically. This is useful for tables with limited column width. The vertical rendering is achieved via CSS tranformations (rotation) defined in the style attribute of the wrapping tag. You can optionally specify the rotation angle.
Syntax
SELECT "<text>|[<angle>]|[<width>]|[<height>]|[<wrap tag>]" AS _vertical
Parameter | Description | Default value |
---|---|---|
<text> | The string that should be rendered vertically. | none |
<angle> | How many degrees should the text be rotated? The angle is measured clockwise from baseline of the text. | 270 |
<width> | Width (of what?). Needs to have a CSS_unit (e.g. px, em) specified. (Implemented?) | 1em |
<height> | Height (of what?). Needs to have a CSS-unit (e.g. px, em) specified. (Implemented?) | none |
<wraptag> | What tag should be used to wrap the vertical text? Possible options are div, span, etc. | div |
Minimal Example
10.sql = SELECT "Hallo" AS _vertical
Advanced Examples
10.sql = SELECT "Hallo|90" AS _vertical
20.sql = SELECT "Hallo|90|3em|7em|span" AS _vertical
Column: _mailto¶
Easily create Email links.
Syntax
SELECT "<email address>|[<link text>]" AS _mailto
Parameter | Description | Default value |
---|---|---|
<emailaddress> | The email address where the link should point to. | none |
<linktext> | The text that should be displayed on the website and be linked to the email address. This will typically be the name of the recipient. If this parameter is omitted, the email address will be displayed as link text. | none |
Minimal Example
10.sql = SELECT "john.doe@example.com" AS _mailto
Advanced Example
10.sql = select "john.doe@example.com|John Doe" AS _mailto
Column: _sendmail¶
Send simple plain text emails. Every mail will be logged in the mail log. The logfile can be configured in ext_localconf.php via $TYPO3_CONF_VARS[$_EXTKEY][‘log’][‘mail’].
Syntax
SELECT "receiver@domain.com[:john doe],receiver2@domain.com[:jane doe]|sender@domain.com[:willi wutzmann]|subject|body" AS _sendmail
Parameter | Description | Required |
---|---|---|
receiver@domain.com[:johndoe],receiver2@domain.com[:janedoe] | Comma-separated list of Email-receiver(s). An optional name can be added using a colon (:) | |
sender@domain.com[:williwutzmann] | Sender of the email. An optional name can be added using a colon (:) | |
subject | Subject of the email | |
body | Message |
Minimal Example
10.sql = SELECT "john.doe@example.com|company@example.com|Latest News|The new version is now available." AS _sendmail
This will send an email with subject Latest News from company@example.com to john.doe@example.com.
Advanced Examples
10.sql = SELECT "customer1@example.com, customer2@example.com|company@example.com|Latest News|The new version is now available." AS _sendmail
This will send an email with subject Latest news from company@example.com to customer1@example.com and to customer2@example.com.
Column: _advancedmail¶
Send plain text/html emails. This is identical to ?t#Column:_sendmail, but allows to additionaly set the cc:, bcc: and reply-to: -headers. Every mail will be logged in the mail log. The logfile can be configured in ext_localconf.php via $TYPO3_CONF_VARS[$_EXTKEY][‘log’][‘mail’].
Syntax
SELECT "receiver@domain.com[:john doe],receiver2@domain.com[:jane doe]|sender@domain.com[:willi wutzmann]|subject|cc1@domain.com[:willi wutzmann]|bcc1@domain.com[:george wutzmann]|replyto@domain.com[:Support-Desk]|format|body" AS _sendmail
Parameter | Description | required |
---|---|---|
receiver@domain.com[:johndoe],receiver2@domain.com[:janedoe] | Comma-separated list of Email-receiver(s). An optional name can be added using a colon (:) | |
sender@domain.com[:williwutzmann] | Sender of the email. An optional name can be added using a colon (:) | |
subject | Subject of the email | |
cc1@domain.com[:williwutzmann] | Comma-separated list of CC-receiver(s). An optional name can be added using a colon (:) | |
bcc1@domain.com[:georgewutzmann] | Comma-separated list of BCC-receiver(s). An optional name can be added using a colon (:) | |
replyto@domain.com[:Support-Desk] | Reply-to address. An optional name can be added using a colon (:) | |
format | Flag indicating if this is a plaintext or html message. Possible values are ‘plain’ and ‘html’ | |
body | Message (plain text or html) |
Column: _img¶
Renders images. Allows to define an alternative text and a title attribute for the image. Alternative text and title text are optional.
- If no alternative text is defined, an empty alt attribute is rendered in the img tag (since this attribute is mandatory in HTML).
- If no title text is defined, the title attribute will not be rendered at all.
Syntax
SELECT "<path to image>|[<alt text>]|[<title text>]" AS _img
Parameter | Description | Default value/behaviour |
---|---|---|
<pathtoimage> | The path to the image file. | none |
<alttext> | Alternative text. Will be displayed if image can’t be loaded (alt attribute of img tag). | empty string |
<titletext> | Text that will be set as image title in the title attribute of the img tag. | no title attribute rendered |
Minimal Example
10.sql = SELECT "fileadmin/img/img.jpg" AS _img
Advanced Examples
10.sql = SELECT "fileadmin/img/img.jpg|Aternative Text" AS _img # alt="Alternative Text, no title
20.sql = SELECT "fileadmin/img/img.jpg|Aternative Text|" AS _img # alt="Alternative Text, no title
30.sql = SELECT "fileadmin/img/img.jpg|Aternative Text|Title Text" AS _img # alt="Alternative Text, title="Title Text"
40.sql = SELECT "fileadmin/img/img.jpg|Alternative Text" AS _img # alt="Alternative Text", no title
50.sql = SELECT "fileadmin/img/img.jpg" AS _img # empty alt, no title
60.sql = SELECT "fileadmin/img/img.jpg|" AS _img # empty alt, no title
70.sql = SELECT "fileadmin/img/img.jpg||Title Text" AS _img # empty alt, title="Title Text"
80.sql = SELECT "fileadmin/img/img.jpg||" AS _img # empty alt, no title
Column: _exec¶
Runs batch files or executables on the webserver. In case of an error, returncode and errormessage will be returned.
Syntax
<command>
Parameter | Description | Default value |
---|---|---|
<command> | The command that should be executed on the server. | none |
Minimal Examples
10.sql = SELECT "ls -s" AS _exec
20.sql = SELECT "./batchfile.sh" AS _exec
Column: _F¶
Challenge 1¶
Due to the limitations of MySQL, reserved column names can’t be further concatenated. Assume you want to display an image:
# This is valid:
10.sql = SELECT concat("/static/directory/", p.foto) AS _img FROM person AS p WHERE ...
# Returns:
<img src=...>
Now assume you want to wrap the image in a div tag:
# This is valid:
10.sql = SELECT "<div>", CONCAT("/static/directory/", p.foto) AS _img, "</div>" FROM person AS p WHERE ...
# Returns:
<div><img src=...></div>
The example above works fine - however, as soon as you want to use field wrappers, things get messy:
# This is valid:
10.sql = SELECT "<div>", CONCAT("/static/directory/", p.foto) AS _img, "</div>" FROM person AS p WHERE ...
10.fbeg = <td>
10.fend = </td>
# Returns:
<td><div></td><td><img src=...></td><td></div></td>
To achieve the desired result, one might want to try something like this:
# This is NOT valid:
10.sql = SELECT CONCAT("<div>", concat("/static/directory/", p.foto) AS _img, "</div>") FROM person AS p WHERE ...
10.fbeg = <td>
10.fend = </td>
# Returns a MySQL error because nesting concat() -functions is not allowed
Challenge 2¶
Assume you have multiple columns with reserved names in the same query and want to use one of them in a later query:
10.sql = SELECT CONCAT("/static/directory/", g.picture) AS _img, CONCAT("/static/preview/", g.thumbnail) AS _img FROM gallery AS g WHERE ...
20.sql = SELECT "{{10.img}}", d.text FROM description AS d ...
The example above will fail because there are two img columns which can not be distinguished.
Solution¶
The reserved column ‘F’(=Format) can be used to
- further wrap columns with a reserved name
- assign an arbitrary name to a column built through a reserved name to make it accessible in later queries.
Solution for #Challenge_1:
10.sql = SELECT CONCAT("Q:img|T:div") AS wrappedImg FROM person AS p WHERE ...
10.fbeg = <td>
10.fend = </td>
# Returns:
<td><div><img src=...></div></td>
Solution for #Challenge_2:
10.sql = SELECT CONCAT("Q:img|V:mypic") AS wrappedImg FROM person AS p WHERE ...
20.sql = SELECT "{{10.mypic}}" ...
Parameter | Description | Required |
---|---|---|
Q | Any of the reserved column names | |
Z | Process the column but don’t display it | |
X | Strip tags / Remove all tags | |
T | Wrap the column with the defined tag. F.e.: T:tdcolspan=”2” | |
V | Define an unambiguous variable name for this colum. F.e.: V:someName | |
Add all the parameters required for the column defined with Q: |
Include a form via link/url¶
In most occasions it is handy if a formname does not have to be hard-coded in report but can be passed to the page as a parameter. To achieve this, first build a link on page A which includes the required parameters:
page A
10.sql = SELECT CONCAT("p:pageB|U:form=Person&r=", id) AS _pagee FROM ...
The above example builds a link to pageB - refer to the Column: _link-manual for details. The link tells page B to render the form with name formname and load the record with id id for editing.
QFQ CSS Classes¶
- qfq-table-50, qfq-table-80 - release the default width of 100% and specify minwidth=50% resp. 80%.
E.g.:
10.sql = SELECT id, name, firstName, ...
10.head = <table class='table table-condensed qfq-table-50'>
Examples¶
The following section gives some examples of typical reports
Basic Queries¶
- One simple query
10.sql = SELECT "Hello World"
Result:
Hello World
Two simple queries
10.sql = SELECT "Hello World"
20.sql = SELECT "Say hello"
Result:
Hello WorldSay hello
Two simple queries, with break
10.sql = SELECT "Hello World<br />"
20.sql = SELECT "Say hello"
Result:
Hello World
Say hello
Accessing the database¶
Real data, one single column
10.sql = SELECT p.first_name FROM exp_person AS p
Result:
BillieElvisLouisDiana
Real data, two columns
10.sql = SELECT p.first_name, p.last_name FROM exp_person AS p
Result:
BillieHolidayElvisPresleyLouisArmstrongDianaRoss
The result of the SQL query is output row by row and column by column without adding any formatting information. See Formatting Examples for examples of how the output can be formatted.
Formatting Examples¶
Formating (i.e. wrapping of data with HTML tags etc.) can be achieved in two different ways:
One can add formatting output directly into the SQL by either putting it in a separate column of the output or by using concat to concatenate data and formatting output in a single column.
One can use ?level keys to define formatting information that will be put before/after/between all rows/columns of the actual levels result.
Two columns
# Add the formating information as a coloum
10.sql = SELECT p.first_name, " " , p.last_name, "'<br /'>" FROM exp_person AS p
Result:
Billie Holiday
Elvis Presley
Louis Armstrong
Diana Ross
One column ‘rend’
10.sql = SELECT p.name FROM exp_person AS p
10.rend = <br />
Result:
Billie Holiday
Elvis Presley
Louis Armstrong
Diana Ross
More HTML
10.sql = SELECT p.name FROM exp_person AS p
10.head = <ul>
10.tail = </ul>
10.rbeg = <li>
10.rend = </li>
Result:
o Billie Holiday
o Elvis Presley
o Louis Armstrong
o Diana Ross
The same as above, but with braces:
10 {
sql = SELECT p.name FROM exp_person AS p
head = <ul>
tail = </ul>
rbeg = <li>
rend = </li>
}
Two queries:
10.sql = SELECT p.name FROM exp_person AS p
10.rend = <br />
20.sql = SELECT a.street FROM exp_address AS a
20.rend = <br />
Two queries: nested
# outer query
10.sql = SELECT p.name FROM exp_person AS p
10.rend = <br />
# inner query
10.10.sql = SELECT a.street FROM exp_address AS a
10.10.rend = <br />
- For every record of ‘10’, all records of 10.10 will be printed.
Two queries: nested with variables
# outer query
10.sql = SELECT p.id, p.name FROM exp_person AS p
10.rend = <br />
# inner query
10.10.sql = SELECT a.street FROM exp_address AS a WHERE a.pid='{{10.id}}'
10.10.rend = <br />
- For every record of ‘10’, all assigned records of 10.10 will be printed.
Two queries: nested with hidden variables in a table
10.sql = SELECT p.id AS _p_id, p.name FROM exp_person AS p
10.rend = <br />
# inner query
10.10.sql = SELECT a.street FROM exp_address AS a WHERE a.p_id='{{10.p_id}}'
10.10.rend = <br />
Same as above, but written in the nested notation
10 {
sql = SELECT p.id AS _p_id, p.name FROM exp_person AS p
rend = <br />
10 {
# inner query
sql = SELECT a.street FROM exp_address AS a WHERE a.p_id='{{10.p_id}}'
rend = <br />
}
}
- Columns starting with a ‘_’ won’t be printed but can be accessed as regular columns.
Best practice: Form¶
Debug Report¶
Writing “report’s” in the nested notation or long queries broken over several lines, might not interpreted as wished. Best for debugging is to specify in the tt-content record:
debugShowBodyText = 1
- Note: Debug information is only display if it’s enabled in config.ini by
- SHOW_DEBUG_INFO=yes or
- SHOW_DEBUG_INFO=auto and logged in in the same Browser as a Typo3 backend user.
More detailed error messages¶
If SHOW_DEBUG_INFO is enabled, a full stacktrace and variable contents are displayed in case of an error.
Person search form¶
QFQ content record:
# Creates a small form that redirects back to this page
10 {
sql = SELECT '_'
head = <form action='#' method='get'><input type='hidden' name='id' value='{{pageId:T}}'>Search: <input type='text' name='search' value='{{search:CE:all}}'><input type='submit' value='Submit'></form>
}
# SQL statement will find and list all the relevant forms
20 {
sql = SELECT CONCAT('?detail&form=form&r=', f.id) AS _Pagee, f.id, f.name, f.title
FROM Form AS f
WHERE f.name LIKE '%{{search:CE:all}}%'
head = <table class='table'>
tail = </table>
rbeg = <tr>
rend = </tr>
fbeg = <td>
fend = </td>
}
Form: compute next free ‘ord’ automatically¶
Requirement: new records should automatically get the highest number plus 10 for their ‘ord’ value. Existing records should not be altered.
Version 1¶
Compute the next ‘ord’ in advance in the subrecord field of the primary form. Submit that value to the new record via SIP parameter to the secondary form.
On the secondary form: for ‘new’ records choose the computed value, for existing records leave the value unchanged.
Primary form, subrecord formelement, field parameter: set
detail=id:formId,{{SELECT '&', IFNULL(fe.ord,0)+10 FROM Form AS f LEFT JOIN FormElement AS fe ON fe.formId=f.id WHERE f.id={{r:S0}} ORDER BY fe.ord DESC LIMIT 1}}:ord
Secondary form, ord formelement, field value: set
`{{RS0}}`.
Version 2¶
Compute the next ‘ord’ as default value direct inside the secondary form. No change is needed for the primary form.
- Secondary form, ord formelement, field value: set {{SELECT IF({{ord:R0}}=0, MAX(IFNULL(fe.ord,0))+10,{{ord:R0}}) FROM (SELECT 1) AS a LEFT JOIN FormElement AS fe ON fe.formId={{formId:S0}} GROUP BY fe.formId}}.
Form: Person Wizard - firstname, city¶
Requirement: A form that displays the column ‘firstname’ from table ‘Person’ and ‘city’ from table ‘Address’. If the records not exist, the form should create it.
Form primary table: Person
Form salve table: Address
Relation: Person.id = Address.personId
- Form: wizard
- Name: wizard
- Title: Person Wizard
- Table: Person
- Render: bootstrap
- FormElement: firstname
- Class: native
- Type: text
- Name: firstname
- Label: Firstname
- FormElement: email, text, 20
- Class: native
- Type: text
- Name: city
- Label: City
- Value: {{SELECT city FROM Address WHERE personId={{r}} ORDER BY id LIMIT 1}}
- FormElement: insert/update address record
- Class: action
- Type: afterSave
- Label: Manage Address
- Parameter:
- slaveId={{SELECT id FROM Address WHERE personId={{r}} ORDER BY id LIMIT 1}}
- sqlInsert={{INSERT INTO Address (personId, city) VALUES ({{r}}, ‘{{city:F:allbut:s}}’) }}
- sqlUpdate={{UPDATE Address SET city=’{{city:F:allbut:s}}’ WHERE id={{slaveId:V}} }}
- sqlDelete={{DELETE FROM Address WHERE id={{slaveId:V}} AND ‘’=’{{city:F:allbut:s}}’ LIMIT 1}}
Form: Person Wizard - firstname, single note¶
Requirement: A form that displays the column ‘firstname’ from table ‘Person’ and ‘note’ from table ‘Note’. If the records not exist, the form should create it. Column Person.noteId points to Note.id
Form primary table: Person
Form slave table: Address
Relation: Person.id = Address.personId
- Form: wizard
- Name: wizard
- Title: Person Wizard
- Table: Person
- Render: bootstrap
- FormElement: firstname
- Class: native
- Type: text
- Name: firstname
- Label: Firstname
- FormElement: email, text, 20
- Class: native
- Type: text
- Name: note
- Label: Note
- Value: {{SELECT Note FROM Note AS n, Person AS p WHERE p.id={{r}} AND p.noteId=n.id ORDER BY id }}
- FormElement: insert/update address record
- Class: action
- Type: afterSave
- Name: noteId
- Label: Manage Note
- Parameter:
- sqlInsert={{INSERT INTO Note (note) VALUES (‘{{note:F:allbut:s}}’) }}
- sqlUpdate={{UPDATE Note SET note=’{{note:F:allbut:s}}’ WHERE id={{slaveId:V}} }}
Best Practise: Chart¶
- QFQ delivers a chart JavaScript lib: https://github.com/nnnick/Chart.js.git. Docs: http://www.chartjs.org/docs/
- The library is not sourced in the HTML page automatically. To do it, either include the lib
typo3conf/ext/qfq/Resources/Public/JavaScript/Chart.min.js:
- in the specific tt_content record (shown below in the example) or
- system wide via Typo3 Template record.
- By splitting HTML and JavaScript code over several lines, take care not accidently to create a ‘nesting’-end token.
Check the line after 10.tail =. It’s ‘}’ alone on one line. This is a valid ‘nesting’-end token!. There are two options
to circumvent this:
- Don’t nest the HTML & JavaScript code - bad workaround, this is not human readable.
- Select different nesting token, e.g. ‘<’ / ‘>’ (check the first line on the following example).
# <
10.sql = SELECT '_'
10.head =
<div style="height: 1024px; width: 640px;">
<h3>Distribution of FormElement types over all forms</h3>
<canvas id="barchart" width="1240" height="640"></canvas>
</div>
<script src="typo3conf/ext/qfq/Resources/Public/JavaScript/Chart.min.js"></script>
<script>
$(function () {
var ctx = document.getElementById("barchart");
var barChart = new Chart(ctx, {
type: 'bar',
data: {
10.tail =
}
});
});
</script>
# Labels
10.10 <
sql = SELECT "'", fe.type, "'" FROM FormElement AS fe GROUP BY fe.type ORDER BY fe.type
head = labels: [
tail = ],
rsep = ,
>
# Data
10.20 <
sql = SELECT COUNT(fe.id) FROM FormElement AS fe GROUP BY fe.type ORDER BY fe.type
head = datasets: [ { data: [
tail = ], backgroundColor: "steelblue", label: "FormElements" } ]
rsep = ,
>