Commit bddd34ce authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Merge remote-tracking branch 'remotes/origin/crose_work' into raos_work

parents 20e30e12 81e5a8dc
......@@ -19,7 +19,6 @@
/css
/fonts
/qfq.flowchart.dia.autosave
/qfq*.zip
/support
/extension/Resources/Public/fonts
/extension/Resources/Public/JavaScript
......
......@@ -34,7 +34,7 @@ LOAD
* active/valid formname: [$this->store->setVar(SYSTEM_FORM, $formName, STORE_SYSTEM);]
* SIP: [$this->store->getVar('form', STORE_SIP)]
* All parameters from active SIP: [$this->store->getStore(STORE_SIP)]
* Check Contstants.php for known Store members
* Check Contstants.php for known Store members:
* In QuickFormQuery.php the whole Form will be copied to `$this->formSpec` and depending on further processing, the
elements are available in `$this->feNative` and `$this->feAction`.
......@@ -43,13 +43,34 @@ LOAD
* If a form is called without a SIP (form.permitNew='always'), than a SIP is created on the fly (as a
parameter in the form).
* Depending on `r=0` or `r>0` a form submit will do an MySQL `insert` or `update` later during save.
* For new records (r=0), clicking on 'save' without closing the form is a tricky situation. Additionally the user might have open multiple
tabs (same form, all r=0) and after saving the record (wihtout closing the form) the user expects that it's ok to edit
the record again and again. Unfortunately, the initial created SIP (before 'form load') is not uniqe anymore (multiple
tabs might contain a saved 'new record'). To guarantee correct saving of r=0 records, a unique on the fly generated SIP
is creatd during form load - individually per browser tab.
* Uniq SIP for mutliple tabs with r=0
* Depending on `r=0` or `r>0` a form submit will do an MySQL `insert` or `update` later during save.
* For new records (r=0), clicking on 'save' without closing the form is a tricky situation. Additionally the user might have open multiple
tabs (same form, all r=0) and after saving the record (wihtout closing the form) the user expects that it's ok to edit
the record again and again. Unfortunately, the initial created SIP (before 'form load') is not uniqe anymore (multiple
tabs might contain a saved 'new record'). To guarantee correct saving of r=0 records, a unique on the fly generated SIP
is creatd during form load - individually per browser tab.
* Faking the STORE_TYPO3 for API calls:
* The PHP code api/save.php, api/load.php is called directly, without any TYPO3 Framework. Therefore the Typo3 information
'pageId', 'feUser*', 'beUser*', 'ttContentUid', ... is not available.
* *Form load*: an additional hidden Formelement '_sipForTypo3Vars' will be created with a subset of the current
STORE_TYPO3 values. The workaround with the SIP is usefull, cause the same form can be shown on different places (QFQ records) -
this is not very likely, but might happen. The 'on the fly rendered' SIP helps to deliver the status.
AbstractBuildForm.php: process() > prepareT3VarsForSave() > Store.php: copyT3VarsToSip();
* *Form save*: FillStoreForm.php: process() > Store: fillTypo3StoreFromSip()
* Formular zusammenbauen
* QuickFormQuery: doForm > loadFormSpecification - laedt alle Elemente die nicht genested sind: native, pill, fieldset, templateGroup >> $his->formNative
* Damit wird '(BuildFormBootstrap / AbstractBuildForm) > process()' aufgerufen.
* Hier wird AbstractBuildForm->elements() aufgerufen (ein Aufruf fuer alle root elemente).
* Pro native Element (inkl. pill, fieldset, templateGroup) wird $builElementFunctionName aufgerufen.
- buildText()
- ....
- buildFieldSet() << von hier werden alle zum aktuellen 'FieldSet' gehoerenden SubElemente abgearbeitet - via AbstractBuildForm->elements() (damit schliesst sich der Kreis und wird rekursiv)
- buildPill() << von hier werden alle zum aktuellen 'Pill' gehoerenden SubElemente abgearbeitet - via AbstractBuildForm->elements() (damit schliesst sich der Kreis und wird rekursiv)
- buildTemplateGroup() << von hier werden alle zum aktuellen 'Pill' gehoerenden SubElemente abgearbeitet - via AbstractBuildForm->elements() (damit schliesst sich der Kreis und wird rekursiv)
>>
SAVE
----
* Via wrapper api/save.php
......
......@@ -18,7 +18,7 @@ Neue Versionsnummer
git checkout master
git merge crose_work
4) Neuen Tag vergeben: git tag 0.11
4) Neuen Tag vergeben: git tag 0.12.0
5) Alle Files, inkl. Tags, in GIT einchecken.
......
......@@ -32,7 +32,7 @@ Preparation for Ubuntu 14.04::
Preparation steps for Ubuntu 16.04::
sudo apt-get install php7-intl
sudo apt install php7.0-intl
Setup
-----
......@@ -53,6 +53,12 @@ Setup
::
page.meta {
X-UA-Compatible = IE=edge
X-UA-Compatible.attribute = http-equiv
viewport=width=device-width, initial-scale=1
}
page.includeCSS {
file1 = typo3conf/ext/qfq/Resources/Public/Css/bootstrap.min.css
......@@ -68,9 +74,10 @@ Setup
file2 = typo3conf/ext/qfq/Resources/Public/JavaScript/bootstrap.min.js
file3 = typo3conf/ext/qfq/Resources/Public/JavaScript/validator.min.js
file4 = typo3conf/ext/qfq/Resources/Public/JavaScript/jqx-all.js
file5 = typo3conf/ext/qfq/Resources/Public/JavaScript/tinymce.min.js
file6 = typo3conf/ext/qfq/Resources/Public/JavaScript/EventEmitter.min.js
file7 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.min.js
file5 = typo3conf/ext/qfq/Resources/Public/JavaScript/globalize.js
file6 = typo3conf/ext/qfq/Resources/Public/JavaScript/tinymce.min.js
file7 = typo3conf/ext/qfq/Resources/Public/JavaScript/EventEmitter.min.js
file8 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.min.js
}
......@@ -80,11 +87,11 @@ Setup a *report* to manage all *forms*: Create a Typo3 page and insert a content
::
# If there is a form given by SIP: show
form = {{form:S}}
# If there is a form given by SIP: show
form={{form:S}}
10 {
# List of Forms: Do not show this list of forms if there is a form given by SIP.
# List of Forms: Do not show this list of forms if there is a form given by SIP.
# Table header.
sql = SELECT CONCAT('{{pageId:T}}&form=Form&') as Pagen, '#', 'Name', 'Title', 'Table' FROM (SELECT 1) AS fake WHERE '{{form:SE}}'=''
head = <table class="table table-hover">
......@@ -95,9 +102,8 @@ Setup a *report* to manage all *forms*: Create a Typo3 page and insert a content
fend = </th>
10 {
# All forms.
# Table rows.
sql = SELECT CONCAT('{{pageId:T}}&form=Form&r=', f.id) as Pagee, f.id, f.name, f.title, f.tableName FROM Form AS f ORDER BY f.name
# All forms
sql = SELECT CONCAT('{{pageId:T}}&form=Form&r=', f.id) as Pagee, f.id, f.name, f.title, f.tableName, CONCAT('form=Form&r=', f.id) as Paged FROM Form AS f ORDER BY f.name
rbeg = <tr>
rend = </tr>
fbeg = <td>
......@@ -105,54 +111,57 @@ Setup a *report* to manage all *forms*: Create a Typo3 page and insert a content
}
}
.. _config-qfq-ini:
config.qfq.ini
--------------
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| Keyword | Example | Description |
+=========================+=========================================+============================================================================+
| DB_USER | DB_USER=qfqUser | Credentials configured in MySQL |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_PASSWORD | DB_PASSWORD=12345678 | Credentials configured in MySQL |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_SERVER | DB_SERVER=localhost | Hostname of MySQL Server |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_NAME | DB_NAME=qfq_db | Database name |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_NAME_TEST | DB_NAME_TEST=qfq_db_test | Used during development of QFQ |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_INIT | DB_INIT=set names utf8 | Global init for using the database. |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SQL_LOG | SQL_LOG=sql.log | Filename to log SQL commands: relative to <ext_dir> or absolute. |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SQL_LOG_MODE | SQL_LOG_MODE=modify | *all*: every statement will be logged - this is a lot |
| | | *modify*: log only statements who change data |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SHOW_DEBUG_INFO | SHOW_DEBUG_INFO=auto | Possible values: auto|yes|no. For 'auto': If a BE User is logged in, |
| | | debug information will be shown on the fronend. |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_LINK_CLASS_INTERNAL | CSS_LINK_CLASS_INTERNAL=internal | CSS class name of links which points to internal tagets |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_LINK_CLASS_EXTERNAL | CSS_LINK_CLASS_EXTERNAL=external | CSS class name of links which points to internal tagets |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_CONTAINER |CSS_CLASS_QFQ_CONTAINER=container | QFQ with own Bootstrap: 'container'. |
| | | QFQ already nested in Bootstrap of mainpage: <empty> |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_FORM_PILL |CSS_CLASS_QFQ_FORM_PILL=qfq-color-grey-1 | Wrap around title bar for pills: CSS Class, typically a background color |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_FORM_BODY |CSS_CLASS_QFQ_FORM_BODY=qfq-color-grey-2 | Wrap around formelements: CSS Class, typically a background color |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DATE_FORMAT | DATE_FORMAT= yyyy-mm-dd | Possible options: yyyy-mm-dd, dd.mm.yyyy |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_PATTERN_ERROR |FORM_DATA_PATTERN_ERROR=please check pa. | Customizable error message used in validator.js. 'pattern' violation |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_REQUIRED_ERROR|FORM_DATA_REQUIRED_ERROR=missing value | Customizable error message used in validator.js. 'required' fields |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_MATCH_ERROR |FORM_DATA_MATCH_ERROR=type error | Customizable error message used in validator.js. 'match' retype mismatch |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_ERROR |FORM_DATA_ERROR=generic error | Customizable error message used in validator.js. 'no specific' given |
+-------------------------+-----------------------------------------+----------------------------------------------------------------------------+
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| Keyword | Example | Description |
+=============================+=========================================+============================================================================+
| DB_USER | DB_USER=qfqUser | Credentials configured in MySQL |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_PASSWORD | DB_PASSWORD=12345678 | Credentials configured in MySQL |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_SERVER | DB_SERVER=localhost | Hostname of MySQL Server |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_NAME | DB_NAME=qfq_db | Database name |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_NAME_TEST | DB_NAME_TEST=qfq_db_test | Used during development of QFQ |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DB_INIT | DB_INIT=set names utf8 | Global init for using the database. |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SQL_LOG | SQL_LOG=sql.log | Filename to log SQL commands: relative to <ext_dir> or absolute. |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SQL_LOG_MODE | SQL_LOG_MODE=modify | *all*: every statement will be logged - this is a lot |
| | | *modify*: log only statements who change data |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| SHOW_DEBUG_INFO | SHOW_DEBUG_INFO=auto | Possible values: auto|yes|no. For 'auto': If a BE User is logged in, |
| | | debug information will be shown on the fronend. |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_LINK_CLASS_INTERNA L | CSS_LINK_CLASS_INTERNAL=internal | CSS class name of links which points to internal tagets |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_LINK_CLASS_EXTERNAL | CSS_LINK_CLASS_EXTERNAL=external | CSS class name of links which points to internal tagets |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_CONTAINER |CSS_CLASS_QFQ_CONTAINER=container | QFQ with own Bootstrap: 'container'. |
| | | QFQ already nested in Bootstrap of mainpage: <empty> |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_FORM_PILL |CSS_CLASS_QFQ_FORM_PILL=qfq-color-grey-1 | Wrap around title bar for pills: CSS Class, typically a background color |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| CSS_CLASS_QFQ_FORM_BODY |CSS_CLASS_QFQ_FORM_BODY=qfq-color-grey-2 | Wrap around formelements: CSS Class, typically a background color |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| DATE_FORMAT | DATE_FORMAT= yyyy-mm-dd | Possible options: yyyy-mm-dd, dd.mm.yyyy |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_PATTERN_ERROR |FORM_DATA_PATTERN_ERROR=please check pa. | Customizable error message used in validator.js. 'pattern' violation |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_REQUIRED_ERROR |FORM_DATA_REQUIRED_ERROR=missing value | Customizable error message used in validator.js. 'required' fields |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_MATCH_ERROR |FORM_DATA_MATCH_ERROR=type error | Customizable error message used in validator.js. 'match' retype mismatch |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_DATA_ERROR |FORM_DATA_ERROR=generic error | Customizable error message used in validator.js. 'no specific' given |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
| FORM_BUTTON_ON_CHANGE_CLASS | FORM_BUTTON_ON_CHANGE_CLASS=alert-info btn-info | Color for save button after modification |
+-----------------------------+-----------------------------------------+----------------------------------------------------------------------------+
......@@ -160,6 +169,7 @@ Example: *typo3conf/config.qfq.ini*
::
; To get internal default values, inactivate the option by commenting (= ';') it.
DB_USER = qfqUser
DB_SERVER = localhost
DB_PASSWORD = 12345678
......@@ -169,14 +179,17 @@ Example: *typo3conf/config.qfq.ini*
SHOW_DEBUG_INFO = auto
CSS_LINK_CLASS_INTERNAL = internal
CSS_LINK_CLASS_EXT = external
;CSS_CLASS_QFQ_CONTAINER =
;CSS_CLASS_QFQ_FORM =
CSS_CLASS_QFQ_FORM_PILL = qfq-color-grey-1
CSS_CLASS_QFQ_FORM_BODY = qfq-color-grey-2
;FORM_DATA_PATTERN_ERROR =
;FORM_DATA_REQUIRED_ERROR =
;FORM_DATA_MATCH_ERROR =
;FORM_DATA_ERROR =
;CSS_CLASS_QFQ_CONTAINER =
;CSS_CLASS_QFQ_FORM =
CSS_CLASS_QFQ_FORM_PILL = qfq-color-grey-1
CSS_CLASS_QFQ_FORM_BODY = qfq-color-grey-2
;FORM_DATA_PATTERN_ERROR =
;FORM_DATA_REQUIRED_ERROR =
;FORM_DATA_MATCH_ERROR =
;FORM_DATA_ERROR =
;FORM_BS_LABEL_COLUMNS = 3
;FORM_BS_INPUT_COLUMNS = 6
;FORM_BS_NOTE_COLUMNS = 3
Documentation
-------------
......@@ -187,7 +200,7 @@ To render the QFQ reST documentation:
Preparation for Ubuntu 16.04::
sudo apt install unzip python-setuptools
sudo apt install unzip python-setuptools python-pip
* Install the extension "Sphinx Python Documentation Generator and Viewer" (sphinx).
......@@ -197,3 +210,5 @@ Preparation for Ubuntu 16.04::
* In the Exension Manager open the configuration dialog of the extension 'sphinx'. Activate the 'Sphinx 1.4.4' option and save it.
* On top of the browser window click on the 'question mark' to open the menu, choose 'Sphinx'.
* Show doumentation 'QFQ Extension'
* If you have problems with the rendering, please check: http://mbless.de/blog/2015/01/26/sphinx-doc-installation-steps.html
......@@ -6,8 +6,8 @@
conf.py:
copyright: 2017
project: QFQ Extension
version: 0.11.0
release: 0.11.0
version: 0.12.0
release: 0.12.0
latex_documents:
- - Index
- qfq.tex
......
......@@ -8,6 +8,9 @@
.. ,,
..
.. --------------------------------------------------
.. External Links: `Bootstrap <http://getbootstrap.com/>`_:
.. Add Images: https://wiki.typo3.org/ReST_Syntax#Images
..
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../Includes.txt
......@@ -21,7 +24,6 @@ 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
----------------------------
......@@ -78,7 +80,7 @@ QFQ Keywords (Bodytext)
+-------------------+---------------------------------------------------------------------------------+
| <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 |
| debugShowBodyText | If ='1' and config.qfq.ini:*showDebugInfo=yes* - shows a tooltip with bodytext |
+-------------------+---------------------------------------------------------------------------------+
.. _debug:
......@@ -109,7 +111,7 @@ Debug
Form
----
* Forms will be created by using the *Form editor* on the Typo3 frontend (HTML form).
* Forms will be created by using the *QFQ 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.
......@@ -203,7 +205,9 @@ Sanitize class
+==================+======+=======+=========================================================================================+
| **alnumx** | Form | Query | [A-Za-z][0-9]@-_.,;: /() ÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜŸäëïöüÿ |
+------------------+------+-------+-----------------------------------------------------------------------------------------+
| **digit** | Form | Query | [0-9].-+ |
| **digit** | Form | Query | [0-9] |
+------------------+------+-------+-----------------------------------------------------------------------------------------+
| **numerical** | Form | Query | [0-9.-+] |
+------------------+------+-------+-----------------------------------------------------------------------------------------+
| **email** | Form | Query | [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,} |
+------------------+------+-------+-----------------------------------------------------------------------------------------+
......@@ -428,9 +432,9 @@ Store: *VARS* - V
+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------+
| slaveId | see *FormElement* `action` |
+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------+
| filename | Original filename of an uploaded file via an 'upload'-FormElement. |
| filename | Original filename of an uploaded file via an 'upload'-FormElement. Valid only during processing of the current 'upload'-formElement. |
+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------+
| fileDestinaton | Destination (path & filename) for an uploaded file. Defined in an 'upload'-FormElement.parameter. |
| fileDestinaton | Destination (path & filename) for an uploaded file. Defined in an 'upload'-FormElement.parameter. Valid: same as 'filename'. |
+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------+
......@@ -526,6 +530,8 @@ SQL Statement
* This is only possible for the outermost SELECT.
.. _form-main:
Form: main
----------
......@@ -567,10 +573,10 @@ Form: main
|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|
|bsInputColumns | string | for all *FormElements*. Exceptions per *FormElement* can be specified per *FormElement*.|
+-------------------------+----------------------------------------------------------+ Default: label=3, input=6, note=3 |
+-------------------------+----------------------------------------------------------+ Default: label=3, input=6, note=3. See :ref:`form-layout`. |
|bsNoteColumns | string | |
+-------------------------+----------------------------------------------------------+-----------------------------------------------------------------------------------------+
|parameter | text | Misc additional parameters. See :ref:`form-parameter` |
|parameter | text | Misc additional parameters. See :ref:`form-parameter`. |
+-------------------------+----------------------------------------------------------+-----------------------------------------------------------------------------------------+
|deleted | string | 'yes'|'no'. |
+-------------------------+----------------------------------------------------------+-----------------------------------------------------------------------------------------+
......@@ -598,6 +604,8 @@ parameter
* The following parameter are optional and can be configured in the *Form.parameter* field.
* Comments: lines starting with a '#' are treated as a comment and will not be parsed.
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| Name | Type | Description |
+========================+========+==========================================================================================================+
......@@ -621,6 +629,8 @@ parameter
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| data-error | string | If none specific is defined: Text for error message used for all FormElements of current form |
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| buttonOnChangeClass | string | Color for save button after user modified some content or current form. E.g.: 'btn-info alert-info' +
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
* Example:
......@@ -669,8 +679,8 @@ classBody
* Check `typo3conf/ext/qfq/Resources/Public/Css/qfq-bs.css` for predefined classes.
* Typical use:
1) adjust the background color of the *FormElement* area.
1) make all form labels right align: `qfq-form-right`.
* adjust the background color of the *FormElement* area.
* make all form labels right align: `qfq-form-right`.
* Predefined background colors: `qfq-color-white`, `qfq-color-grey-1` (dark), `qfq-color-grey-2` (light),
`qfq-color-blue-1` (dark), `qfq-color-blue-2`. (light)
......@@ -696,6 +706,7 @@ The 'extraDeleteForm' parameter might be specified for a 'form' and/or for 'subr
FormElements
------------
* Each *form* contains one or more *FormElement*.
* The *FormElements* are divided in three categories:
......@@ -705,6 +716,11 @@ FormElements
* Ordering and grouping: Native *FormElements* and Container-Elements (both with feIdContainer=0) will be ordered by 'ord'.
* Inside of a container, all nested elements will be displayed.
* Technical, it's *not* necessary to configure a FormElement for the primary index column `id`.
* Additional options to a *FormElement* will be configured via the *FormElement.parameter* field (analog to *Form.parameter*
for *Forms* ).
* Comments: lines starting with a '#' are treated as a comment and will not be parsed.
.. _class-container:
......@@ -713,13 +729,16 @@ Class: Container
* Pills are containers for 'fieldset' *and* / *or* 'native' *FormElements*.
* Fieldsets are containers for 'native' *FormElements*.
* TemplateGroups are containers for 'fieldset' *and* / *or* 'native' *FormElements*.
Type: fieldset
^^^^^^^^^^^^^^
* Native *FormElements* can be assigned to a fieldset.
* name: technical name, used as HTML identifier.
* label: Shown title of the fieldset.
* FormElement settings:
* *name*: technical name, used as HTML identifier.
* *label*: Shown title of the fieldset.
Type: pill
^^^^^^^^^^
......@@ -729,16 +748,50 @@ Type: pill
* 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 settings:
* 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.
* *name*: technical name, used as HTML identifier.
* *label*: Label shown on the corresponding pill button or inside the dropdown menu.
* *type*: *pill*
* *feIdContainer*: `0` - Pill's can't be nested.
* *parameter*:
* *maxVisiblePill*: `<nr>` - Number of Pill-Buttons shown. Undefined means unlimited. Excess Pill buttons will be
displayed as a dropdown menu.
.. _class-native:
Type: templateGroup
^^^^^^^^^^^^^^^^^^^
*TemplateGroups* will be used to create a series of grouped (by the given *templateGroup*) *FormElements*.
FormElements can be assigned to a *templateGroup*. These *templateGroup* will be rendered upto *n*-times. On 'form load'
only a single (=first) copy of the *templateGroup* will be shown. Below the last copy of the *templateGroup* an 'add'-button is
shown. If the user click on it, an additional copy of the *templateGroup* is displayed. This can be repeated up to
*templateGroup.maxLength* times. Also, the user can 'remove' previously created copies by clicking on a remove button near
beside every *templateGroup*. The first copy of a templateGroup can't be removed.
* FormElement settings:
* *label*: Shown in the FormElement-editor *container* field.
* *maxLength*: Maximum number of copies of the current *templateGroup*. Default: 5.
* *bsLabelColumn*, *bsInputColumn*, *bsNoteColumn*: column widths for row with the 'Add' button.
* *parameter*:
* *tgAddClass*: Class of the 'add' button. Default: `btn btn-default`.
* *tgAddText*: Text shown on the button. Default: `Add`.
* *tgRemoveClass*: Class of the 'remove' button. Default: `btn btn-default`.
* *tgRemoveText*: Text shown on the button. Default: `Remove`.
* *tgClass*: Class wrapped around every copy of the *templateGroup*. E.g. the class `qfq-child-margin-top` adds a
margin between two copies of the *templateGroup*. Default: empty
Multiple *templateGroups* per form are allowed.
The name of the native FormElements, inside the templateGroup, which represents the effective table columns, uses the placeholder
`%d`. E.g. the columns `grade1`, `grade2`, `grade3` needs a *FormElement.name* = `grade%d`. The counting will always start with 1.
The placeholder `%d` can also be used in the *FormElement.label*
Class: Native
-------------
......@@ -840,7 +893,18 @@ See also at specific *FormElement* definitions.
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| data-error | string | If none specific is defined: Text for error message used for all FormElements of current form |
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| htmlBefore | string | HTML Code wrapped before the complete *FormElement* |
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| htmlAfter | string | HTML Code wrapped after the complete *FormElement* |
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
| wrapRow | string | If specified, skip default wrapping (`<div class='col-md-?>`). Instead the given string is used. |
+------------------------+--------+ |
| wrapInput | string | |
+------------------------+--------+ |
| wrapInput | string | |
+------------------------+--------+ |
| wrapNote | string | |
+------------------------+--------+----------------------------------------------------------------------------------------------------------+
Effect matrix
^^^^^^^^^^^^^
......@@ -960,7 +1024,7 @@ Checkboxes can be rendered in mode:
* 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*:
* *FormElement.parameter*:
* *checkBoxMode* = single (optional)
* *checked* = <value> (optional, the value which represents 'checked')
......@@ -979,7 +1043,7 @@ Checkboxes can be rendered in mode:
* 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*
* *FormElement.parameter*
* *checkBoxMode*: multi
* *itemList* - E.g.:
......@@ -988,47 +1052,82 @@ Checkboxes can be rendered in mode:
* ``itemList=1:red,2:blue,3:orange``
* ``itemList={{!SELECT id, value FROM someTable}}``
* *FormElement* Maxlength - vertical or horizontal alignment:
* *FormElement.maxlength* - vertical or horizontal alignment:
* Value: '', 0, 1 - The check boxes will be aligned vertical.
* Value: >1 - The check boxes will be aligned horizontal, with a linebreak every 'value' elements.
* *FormElement.parameter*:
* *emptyHide*: Existence of this item hides an entry with an empty string. This is useful for e.g. Enums, which have an empty
entry, but the empty value should not be selectable.
* *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.
* *buttonClass*: Instead of the plain HTML checkbox fields, Bootstrap
`buttons <http://getbootstrap.com/javascript/#buttons-checkbox-radio>`_. are rendered as `checkbox` elements. Use
one of the following `classes <http://getbootstrap.com/css/#buttons-options>`_:
* `btn-default` (default, grey),
* `btn-primary` (blue),
* `btn-success` (green),
* `btn-info` (light blue),
* `btn-warning` (orange),
* `btn-danger` (red).
With a given *buttonClass*, all buttons (=radios) are rendered horizontal. A value in *FormElement.maxlength* has no effect.
* *No preselection*:
* If a form is in 'new' mode and if there is a default value configured on a table column, such a value is shown by default.
There might be situations, where the user should be forced to select a value (e.g. specifying the gender). An unwanted
default value can be suppressed by specifying an explicit definition on the FormElement field `value`::
{{<columnname>:RZ}}
For existing records the shown value is as expected the value of the record. For new records, it's the value `0`,
which is typically not one of the ENUM / SET values and therefore nothing is selected.
* 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
* *FormElement.parameter.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.
* *FormElement.parameter*:
* *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.
* The element is build / computed on form load and saved alongside with the SIP parameter of the current form.
* Access the value without specifying any store (default store priority is sufficient).
Type: text
^^^^^^^^^^
* General input for text and number.
* size:
* *FormElement.size*:
* <number>: width of input element in characters. Lineheight = 1.
* <cols>,<rows>: input element = textarea, width=<cols>, height=<rows>
* *parameter*
* *FormElement.parameter*:
* *retype=1* (optional): Current input element will be rendered twice. The form can only submitted if both elements are equal.
* *retypeLabel=<text>* (optional): The label of the second element.
* *retypeNote=<text>* (optional): The note of the second element.
* *retype* = 1 (optional): Current input element will be rendered twice. The form can only submitted if both elements are equal.
* *retypeLabel* =<text> (optional): The label of the second element.
* *retypeNote* =<text> (optional): The note of the second element.
* Also check the :ref:`fe-parameter-attributes` *data-...-error* to customize error messages shown by the validator.
Type: editor
......@@ -1046,13 +1145,13 @@ Type: editor
* Bottom: *statusbar* - by default hidden, exception: *min_height* and *max_height* are given via size parameter.
* The default setting is::
* The default setting in *FormElement.parameter* is::