From Fabrik

Elements are the building blocks of both forms and tables.

Elements are the 'widgets' that allow your users to enter data into your forms. They also define how that data is shown in the table view. Element types can be installed as plug-ins from fabrikar's plug-in manager. We pre-install a series of the most commonly used elements when Fabrik is installed on your Joomla site. Others are available for download from the downloads site

Listing Elements

Each element can be selected with the check box to the left of its name. Once selected it can be altered by clicking on the buttons in the top right hand corner:

Add to table view - Makes the element appear as a column in the table view.
Remove from table view - Hides the element from the table view.
Published - Sets the state of the element to published. Note that other element publishing options make effect how the element is displayed.
Unpublish - Sets the element's state to unpublished.
Copy - Copies the element.
Delete - Deletes the element.
Edit - Edits the element. Note that you can also edit the element by clicking on its name.
New - Create a new element.

For each form in the list you have a couple of links:

Published - Toggles the form's published state.
Show in table - Toggles if the element is shown as a column in the table view.
Order - The standard Joomla order widget which defines in which order the elements appear within their groups. Note that group ordering is handled by editing the form, selecting the groups tab and reordering the group's in the list.

The element list can quickly become quite long. You can use the filters above the element list to show only the elements you are working on.

The "Full element name" field shows the text that you should use to access the element when using placeholders - i.e.

{tablename___elementname}

Editing/Adding an Element

Details

Name - The element's name, this is used internally to represent the element. If you are saving the form to a database table this name is used to define the table's field that correlates to the element. No white space or non-alpha numeric characters are allowed in the name (except for "-" and "_").
Label - This is the text that appears next to the element in the form. In addition it is the default text that appears at the top of the element's column in the table view - this can be overridden by entering a 'Heading label' - found under the 'Table settings' tab.
Group - This is required, you need to specify a group that the element belongs to.
- Hint: if you are entering a series of elements into the same group, filter the element list by said group and when you come to add a new element this drop-down will default to the group you filtered on.
Order - If creating a new element then the element is automatically added to the bottom of the selected group. If editing the element then this is a dropdown where you can select the order that the element appears within the group.
Element type - Select the element's plug-in. The options subsection will be filled with the selected plug-ins options.

Options

These are specific to the selected Element type, see below for a detailed description of each element.

Publishing

Published - State if the element is published or not, this effects if it is shown in the form and the table view.
Add to page title - If yes selected then the element's data will be appended to the browser's title.
Access - Defines which user group can enter or modify the element's data.
Read only access - Defines which user group can view a read - only version of the form's data. With these last two features you can quickly add in features such as allowing only editors to approve records.
Encrypt data - Only applicable to field and text area elements. This uses MySQL's AES_ENCRYPT/AES_DECRYPT methods to store and retrieve the data in an encrypted format. Joomla's 'secret' config value is used as the key. Fields encrypted in this way will not be search-able using the table's 'advanced search all' option.

RSS

These options are only applicable if the element's table has been set up to create a RSS feed of its data

Show in RSS feed - Selecting 'yes' will add this element's data to the feed items.
Include label - If "show in RSS feed" is set to 'yes' then selecting 'yes' here will add the element's label before the element's data in the RSS feed.
Use as pseudo key - Deprecated. Please ignore.

Tips

Tips are notes that appear when you hover over the element, they are used to provide extra information to the user filling in the form, generally explaining what type of information is expected.

Hover text - Enter some text here that will be used as the hover tip content which is shown when the mouse hovers over the element's label in the form view.
Hover text title - The title for the hover text, if left blank the element's label is used .
Tips over element - If no selected then the tip only appears when you hover over the element label.
If yes selected then the tip appears when you hover over the label or the element.
Show tip in detailed view - Show the tip when in the detailed view. Note that tips are always applied in the form view.
Comment - An internal memo which allows you to state the purpose of the element. This is not visible to the people filling in the form.

Table settings tab

These options define how the element should behave when in the table view.

Show in table - Select this option to display the element in the table view.
Link to details - Select this option to enable the element label to provide a link in the table view to the detailed or form view.
Allow ordering - Turns the table's heading into a link, clicking on this link will reorder the data by the values in this element's fields.
Heading label - Override the use of the element's label as this element's column heading in the table view.
Icon folder - Select a folder which contains a series of images in png format. When in the table view, if an image is found in this folder that matches the element's value the image is used to represented the value
custom link - If "link to details" is 'yes' then the url given here overwrites the standard link to the details url. An example url is
```
http://www.mydomain.com/mypage.php?pagevar={mytable___myfield}
```
If the field is not a primary key (id field type), the url should instead be
```
http://www.mydomain.com/mypage.php?pagevar={mytable___myfield_raw}
```
Use as row class - If set to row then each of the table's rows will have this element's value added as an additional class name. An example where this might be useful would be if your element was a drop down to select a priority for a task. With this option turned on your row might have additional classes assigned to it like "high", "medium" and "low" - you could then edit your table template to style "high" in red, "medium" in orange and "low" in blue.

Filters

Filters are created above your table and allow your users to filter the data contained with in your table.

Filter type - Defines what filter to use.
- None - No filter is assigned for this element.
- Field - A free form text field is displayed allowing user to search for data within this column.
- Dropdown - A drop down list of all of the table's distinct values for this element's data. If creating a drop down filter from a database join element then the drop down contains all the data found in the joined table.
- Autocomplete - A field which, when the user starts typing, updates a dropdown list of potential matches.
- Range - Search for data between two given values, this is mostly applicable to date elements, for creating a ranged date filter.
Exact match - If selected then only the exact match of the dropdown will be returned in the search data. Note that this option is only used when the 'dropdown' filter type is chosen.
Example: table x has an element name and 3 rows containing Rob, Robert and Hugo as data. The user selects Rob from the 'name's' drop down filter.
If this option is ticked then only one record - containing Rob - will be displayed;
if this option is not ticked then two records - containing Rob and Robert - will be displayed.
Filter access - States which user group is allowed to use the filter.
Return only full word searches on field searches - If selected then only full words of the field will be returned in the search data. Note that this option is only used when the 'field' filter type is chosen.
Example: table x has an element name and 3 rows containing Rob, Robert and Hugo as data. The user types Rob in the search field.
If this option is ticked then only one record - containing Rob - will be displayed;
if this option is not ticked then two records - containing Rob and Robert - will be displayed.
Include in advanced search - Determines if the element is selectable as an option in the table's advanced search feature.
Include in search all - Determines if the element's data is search-able via the table's search all feature.
Required - If yes is selected then the filter must be used in order to display data in the table.
Filter data - Determines what method to use to create the dropdown filter's options.
- Default - Take the setting defined in tables-> parameters -> Filter data
- Show table data - shows only entries that have been recorded in the database. This has the advantage of ensuring that your users won't filter on a value which doesn't exist in the database. The disadvantage is that for large tables there is a noticeable performance hit with this option.
- Show all - Shows all possible options. Applies to checkbox, radio buttons, database join elements etc. Rendering is quick, the disadvantage is that searches may not always yield a result.

Table Column CSS

Heading class - Specify a class name for the element's column heading e.g. "myHeading"
Heading CSS - Specify some css for the element's column heading e.g. "font-color:red"
Cell class - Specify a class name for the element's column e.g. "important"
Cell CSS - Specify some css name for the element's column e.g. "font-color:red"

Calculations

Calculations are shown at the bottom of the table, and contain mathematical operations performed on the element's data.

Sum the column total - If yes select then the elements data is added up
Sum access - Determines which user group can see the sum
Split on - Specify an element to split the sum calculations into.

E.g.
If we have a table:

Name	Surname	Age
Rob	Clayburn	29
Alice	Bird	25
Stan	Clayburn	80

And we choose to split the sum calculation on “surname” then we would get 2 results:

sum Clayburn = 109
sum Bird = 25

Average the column total - If yes selected then the average value of the element's data is calculated
Average access - Determines which user group can see the average
Split on - Same principal as the sum split on option
Column median -Calculate the element's data's median value
Median access - Determines which user group can see the median
Split on - Same principal as the sum split on option
Count records - Count the total number of records found
Count value - Only record's whose element data match the value entered here will be included in the count total
Count access - Determines which user group can see the count
Split on - Same principal as the sum split on option

Element Validations

Validations ensure that the data entered by your uses match what you require from them. In Fabrik validations are plug-ins. If you are technically included you can write a validation plug-in to match your particular need. There is an example validation rule with fully commented code in /components/com_fabrik/plugins/validationrule/example. If validations fail then they raise an warning next to the element.

Element Java-script

The Javascript tab allows you to add infinite JavaScript actions to your element. For each action you have the choice between manually entering some JavaScript code, or using the GUI to create simple interactions.

Action - The JavaScript event that will trigger the code either specified in the Code field or generate from the GUI options.
Code - The Javascript to run when the specified action occurs. The variable 'this' refers to the instance of the element plug-in class that has been attached to the element - for example the check-box class is found in components/com_fabrik/plugins/elements/fabrikcheckbox/javascrpt.js.

All of these classes inherit from the base element class which is location in /components/com_fabrik/views/form/element.js

Or

Do - The Javascript action to perform the description of each option is self explanatory
That - the element or group to perform the action upon.
Is - To perform the action the value of the element must be matched with the selection chosen here and the value entered in the last field.

e.g.

hide group1 when this == 1

will hide group one when the value of the element is 1

the inverse event would be this:

show group1 when this != 1

WYSIWYG Example

Say we have an 'car accident report' form, the first group 'details' contains the main information about the accident.

Its last element is a radio button called 'add_location' and labelled 'Do you want to pin point the location of the accident'. It has two options 'yes' and 'no' (whose values are 1 and 0) this element default's to the 'no'.

Our form's second group is called 'location' and has further fields to define the accident's location. We want to hide the group when the form loads (as 'add_location' defaults to 'no'), show it when 'add_location' is 'yes' and hide it when 'add_location' is 'no'

So... enter the following events:

 action: load
slideout 'location' when this == 0

 action: click
slidein 'location; when this == 1

 action: click
'location' when this == 0

Code example

Lets say we want to add the values in two elements together, element1 and element2 and put the results in an element called 'total'. This should be applied each time the user leaves either of the two fields. First of all we want to create a sum() function which can be accessed by the two elements:

Create a XX.js file in components/com_fabrik/js, where XX is your numeric form ID, and put your functions in there, then just call the functions from your element JS actions.

function sum(){
 
var total1 = form_1.formElements.get('tablename___element1') .getValue();
 
var total2 = form_1.formElements.get('tablename___element2') .getValue();
 
return total1.toInt() + total2.toInt();
 
}

Now edit element1, select the javascript tab, and add a new event.

Select 'blur' for the event type and then enter this in the code box

form_1.formElements.get('tablename___total) .update(sum());

Getting Element's values with JavaScript

To consistently set the value of an element the following code can be used:

form_1.formElements.get('tablename___elementname').getValue();

replace the '1' in 'form_1' with your form's ID.
Remember that for elements such as checkboxes, radio buttons and dropdowns will return the selected sub element's values and not their labels.
Setting Element Values With JavaScript

To consistently set the value of an element the following code can be used:

form_1.formElements.get('tablename___elementname').update('newvalue') ;

replace the '1' in 'form_1' with your form's ID.
Remember that for elements such as checkboxes, radio buttons and dropdowns 'newvalue' refers to the sub element's values and not their labels.

For checkboxes and multiple select dropdown's you can assign multiple selections separated with '|-|', e.g.

form_1.formElements.get('tablename___elementname').update('newvalue|-|anothervalue') ;

Element Plug-ins (Element Types)

Parent - Child Elements

When creating a new Fabrik table whose database table has already been used to create a previous Fabrik table, or copying an existing table, Fabrik applies a concept called parent/child elements.

Fabrik will create the new table's elements with the same settings as those of the original Fabrik table's elements.

These new elements are called child elements and are 'linked' to the original parent element.

Upon editing and saving the parent element all of its child element's will be updated with the same settings.

When you edit the child element, you will notice that the usual edit element form does not appear. Instead you see a notification about the element being linked, a link to edit the parent element, and a check box to unlink the child element:

To disable the parent/child relationship click on the "unlink" check box. The usual edit element form will fade in and when you save the element, it will no longer be linked to the parent element. Once unlinked the child element can not be linked back to its parent element.

To edit the parent element, click on its name. In the example above that's "id"

In the table view parent and child elements are indicated with a unlinked chain icon (the first icon in the image below) or a linked chain icon (the second icon in the image below). Clicking on the linked icon will allow you to edit the parent element.

Element Access Control

This table shows the various access setting and how they effect the element rendering when in the form view and details view:

element access
view	access	read only	visible	editable
details	no	yes	yes	no
details	yes	yes	yes	no
details	no	no	no	no
details	yes	no	no	no
form	no	yes	yes	no
form	yes	yes	yes	yes
form	no	no	no	no
form	yes	no	yes	yes

Elements