Fabrik2

From Fabrik

Jump to: navigation, search

Contents

Cookie Jar

"like to help but I do not know where to start?"

The item cookie jar we added a list of contents for the Guide, which have not yet been written or otherwise completed. Simply Click on the subject which you have some experience and start writing!

When you think you've finished the page, complete it or it simply made good, you have to move the link from the cookie jar this page. If you are not familiar with this system sent the team to Fabrik an email and we'll be happy to do it for you.

This page contains all the wiki pages and we would be translated into: P. Do not be shy, if you can give us 2 minutes to start and edit these pages, then you grow up!

[ORIGINAL Text in Italian] Mi piacerebbe aiutare ma non so da dove cominciare? Nella voce cookie jar abbiamo aggiunto un elenco di contenuti per la Guida, che non sono ancora stati scritti o comunque completati. Semplicemente fate un click sull'argomento del quale avete qualche esperienza e cominciate a scrivere!

Quando pensate di aver terminato la pagina, di averla completata o di averla semplicemente resa utile, dovete spostare il collegamento dal cookie jar a questa pagina. Se non avete confidenza con questo sistema inviate alla squadra di Fabrik una email, e noi saremo lieti di farlo per voi.

Questa pagina contiene tutte le pagine del wiki e ci piacerebbe fosse tradotta in :P. Non essere timido, se puoi donaci 2 minuti per iniziare, e modifica queste pagine, allora sarai grande! [END ORIGINAL]

Fabrik 2

Installation instructions

  1. Go to the download page here: [Download Page]
  2. Download the file at the bottom of the page under the Documents Section: Fabrik 2.0rc5 (File name:com_fabrik_2.0rc5.zip)
    Do not download or install the files under Fabrik Plug-ins (this is not the application) until after installing this file.
  3. In Joomla click on Extensions->Install/Uninstall
  4. Click on 'Browse' under Upload Package File and select the file you downloaded in step 2 (com_fabrik_2.0rc5.zip)
  5. Click on Upload File & Install.
  6. You should see 3 success messages.
  7. You can now access the Fabrik Application from the Components menu.

Important: Installation on some computers may take up to 1 minute. Don't browse away from the page untill you see 3 comments about installation of different parts of the package and a message about successful installation.


If you get an error message when trying to install via uploading the zip follow these instructions to install from the directory:


Unzip the com_fabrik zip on your computer.

  1. Upload all files it to a folder on your server e.g. /usr/home/public_html/tmp/com_fabrik
  2. Go to your site's administration page
  3. Select Extensions->install/uninstall
  4. In the 'Install from Directory' section, in the 'Install directory' field enter the path to which you uploaded your files e.g. /usr/home/public_html/tmp/com_fabrik
  5.  Press the 'install' button next to the 'Install directory' field.

Upgrading

To upgrade from a previous version of Fabrik 2.0.x:

  • Make a back up of your site's files and database tables
  • Look at the code announcements forum to see if anything has changed which might effect how your fabrik pages work
  • Do NOT unistall your previous version of Fabrik
  • Follow the same procedure as if you were installing Fabrik for the first time - (see above for instructions)


Getting started

Please add information to Getting started in the cookie jar

Forms

Forms allow you to collect data from your users. When your form is set to record to a database table, it will also allow you to edit and view previously entered sets of data.

Please add information about forms to the cookie jar


Elements

Elements are the building blocks of both forms and tables. In forms they allow your users to enter data, and in tables they display the data already collected. A simple example of an element is the text field element. Fabrik comes with several elements, some of them highly customizable. These allow you to receive and validate different types of information and attain different goals. Your users can input and validate lots of different data such as text, dates, email, choice of database elements, radio box selections, etc. You can also use elements to perform CAPTCHA validations, save user information, geographic data, and many other things. If you can't find an element that does what you want yu can always ask for one or build one yourself.

There are a series of outstanding sections that are waiting for you to write in the cookie jar

JavaScript

The javaScript tab allows you to trigger code when your user interacts with the element.

action: the event that will trigger the code

code: js code that will run when the action occurs. the variable 'this' refers to the instance of the element js class e.g. for a field element this is the class fbField which can be found in /components/com_fabrik/plugins/elements/fabrikfield/javascript.js. All element plugin classes extend the FbElement class which can be found in /components/com_fabrik/views/form/element.js

Fabrik also provides some simple wysiwyg effects that you can apply to the element. To use these leave the 'code' field blank then fill in the following:

do: the effect to use that: what part of the form to apply the effect to is: when the element's value matches the condition (enter the value in the last field)

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());

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

Groups

Groups are the glue that bind elements to a form, they can be considered like the html <fieldset> element. Forms can contain multiple groups and an element must be assigned to a group to appear in the form.

Please add information about groups to the cookie jar

Tables

Tables present the form's collected data.

Please add information about tables to the cookie jar

Pre-filters

Search

This will outline the various ways in which you can search data in Fabrik

Please add information about search to the cookie jar

Connections

Connections allow you to connect to different mySQL databases other than the one that Joomla is installed under.

Please add information about connections to the cookie jar

Visualizations

Visualizations take the data collected in your tables and presents them in a different format, for example plotting the data on a map, or showing it in a calendar.


Please add information about visualizations to the cookie jar

Designers

Please add information for designers to the cookie jar

Table templates

CSS Styles

The table view includes the following CSS files in this order. File in italics are included only if there exit. TEMPLATENAME is the name of the template table template selected.

  • components/com_fabrik/views/table/tmpl/TEMPLATENAME/template.css
  • media/com_fabrik/css/table.css
  • media/com_fabrik/css/custom.css
  • components/com_fabrik/views/table/tmpl/TEMPLATENAME/custom.css

Javascript scripts

The table view includes the js scripts in the following order if there exist.

  • components/com_fabrik/views/table/table.js
  • components/com_fabrik/views/table/tmpl/TEMPLATENAME/javascript.js

If the advanced search is activated then the following script with be included as well

  • media/com_fabrik/js/advanced-search.js

Template overall structure

default.php 
<?php 
foreach ($this->rows as $groupedby => $group) {
	foreach ($group as $this->_row) {
		echo $this->loadTemplate( 'row' ); 
 	}
}
?>

default_row.php renders each row of the table view - the simplest way to render it is to iterate over the headings 

<?php 
foreach ($this->headings as $heading=>$label) {
	$this->_row->data->$heading;
?>

To access a specific element you can do: 

$this->_row->data->tablename___elementname ;//replace 'tablename___elementname' with your element's full name
Some useful tags you may want to access include: 
$this->_row->data->fabrik_delete;// shows the row's selection checkbox
 
$this->_row->data->fabrik_view;// shows the row's view link

Related data links are in this format: 

$this->_row->data->releatedtablename___elementname_table_heading; // shows the link to view the related records
$this->_row->data->releatedtablename___elementname_form_heading; // shows the link to the form to add a record to the related data.
replace 'releatedtablename___elementname' with the full element name of the releated data's table key.

To move the checkbox to the start of each row

use this as your default_row.php file 

<tr id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">
	<td><?php echo $this->_row->data->fabrik_delete?></td>
	<?php foreach ($this->headings as $heading=>$label) {	?>
	<?php if ($heading !== 'fabrik_delete'){?>
		<td <?php echo $this->cellClass[$heading]?>><?php echo @$this->_row->data->$heading;?></td>
	<?php }
	}?>
</tr>

Edit the default_headings.php file to: 

<?php if (count( $this->groupheadings ) > 1) { ?>
	<tr class="fabrik___heading">
	<?php
	$t = 0;
	foreach ($this->groupheadings as $label=>$colspan) {
	$t += $colspan;?>
		<th colspan="<?php echo $colspan;?>">
			<?php echo $label; ?>
		</th>
	<?php }
		$t ++;
		if($t < count( $this->headings )) {?>
			<th colspan="<?php echo count($this->headings) - count($this->groupheadings)?>"></th>
		<?php
		}?>
	</tr>
<?php } ?>
<tr class="fabrik___heading x">
<th><?php echo $this->headings['fabrik_delete'];?></th>
<?php foreach ($this->headings as $key=>$heading) {
if ($key !== 'fabrik_delete'){?>
	<th <?php echo $this->headingClass[$key]?>>
		<?php echo $heading; ?>
	</th>
	<?php }
}?>
</tr>

Accessing the table information

Below is a list of variables that can be accessed in a table template. Technically these variables are set by the table view (see com_fabrik/views/table/view.html.php). 
* $this->table->id // id of the table (integer)            
* $this->table->label  // label of the table
* $this->table->intro  // introduction text
* $this->table->db_table_name // name of the corresponding database table if any
  • $this->params // joomla parameters
    • $this->params->get('show_page_title')
    • $this->params->get('page_title')
    • ...
  • $this->fabrik_userid
  • $this->group_by
  • Global actions (buttons such as Add, Subscribe to RSS, etc.)
    • Adding record
      • $this->showAdd
      • $this->addRecordLink
      • $this->addRecordId
    • Delete Record
      • $this->canDelete
      • $this->deleteButton
    • Emptying table
      • $this->emptyButton
    • CSV features
      • $this->showCSV // can export CSV ?
      • $this->showCSVImport // can import CSV ?
      • $this->csvImportLink
    • PDF display
      • $this->showPDF
      • $this->pdfLink
    • RSS Subscription
      • $this->showRSS
      • $this->rssLink
  • Navigation
    • $this->nav // the html code corresponding to the navigation (this html is produced by the file helpers/pagination.html)
    • $this->getModel()->nav // same name but this is a Pagination object
    • $this->getModel()->nav-> ...TBC....


  • Filtering
    • $this->filter_action
    • $this->filters
    • $this->assign( 'showFilters', (count($this->filters) ) > 0 ? 1 : 0 );
  • Calculations
    • $this->assignRef( 'calculations', $this->_getCalculations( $this->headings ) );
  • ...TBC...
  • $this->assign( 'emptyDataMessage', $msg );
  • $this->assignRef( 'groupheadings', $groupHeadings );
  • $this->assign( 'isGrouped', $table->group_by );
  • $this->assign( 'colCount', count($this->headings) );
  • $this->assignRef( 'grouptemplates', $model->grouptemplates );
  • $this->assignRef( 'params', $params );
  • $this->tablePicker
  • $this->pluginButtons = $model->getPluginButtons();

=== Accessing to the model

  • $this->getModel()

How To

Form templates

Customizing a form template

Two templates are associated for each given form (see the "templates" tab in the "form" section):

  • one for the "detailed view" (read only mode)
  • the other for the regular form view.

Some templates are provided by default but one can add new ones. Form templates are stored in the following directory

         /component/com_fabrik/views/form/tmpl

To create a new custom template, the easier way to proceed is to copy an existing one to a new directory and then to modify it. There is an example below. 

<?php 
$form = $this->form;
reset($this->groups);
$group =& current($this->groups);
$row = $group->elements;
 
//if your form has more than one group, get the next group with this code
$nextgroup = next($this->groups);
$nextrow = $nextgroup->elements;
 
echo $form->startTag;  //output the <form> tag
echo $form->intro; // output form's intro text
echo $this->plugintop; //output any content added via a form plugin
 
$active = ($form->error != '') ? '' : ' fabrikHide';
echo "<div class='fabrikMainError fabrikError$active'>" . $form->error . "</div>";?>
 
<div><?php echo $this->message ?></div>
 
<?php
// Here we are going to render an element whose name is 'image'. 
// Note we are using the short name and not the long name (e.g. 'tablename___elementname') 
// as we have already drilled down to the group's elements at the start of the template.
 
//Each element needs to be wrapped inside a container element with the class set as below	
?>
<div class="<?php echo $row['image']->containerClass;?>">
<?php echo $row['image']->element; ?>
</div>
 
<?php
// NOTE When using a form to edit table data, 
// you should ALWAYS have you form's primary key element included in your template
?>
 
<?php
	echo $this->hiddenFields;
	?>
	<?php echo $this->pluginbottom; ?>
	<div class="fabrikActions">
	<?php echo $form->resetButton;?> 
	<?php echo $form->submitButton;?>
	<?php echo $form->copyButton  . " " . $form->gobackButton?>
	</div>
 
<?php echo $form->endTag; ?>

In the above example the object $row['image'] has the following properties:

  • error : An error message that needs to be presented if the element has failed a validation
  • plugin : the name of the element plug-in
  • hidden : if the element is hidden or not
  • id : the full element name e.g. tablename___image
  • className : depreciated and not used
  • containerClass : the classname for the DOM object that surrounds the element (e.g. in the default template this is the <li> element)
  • element : the default 'widget' to show in the form, the output of this depends on whether you are in a form or detailed view and the access level associated with the element
  • label : the html containing the element's label
  • column : the css required to render the element in a column, this css should be applied to the container DOM object
  • element_ro : this contains the read only representation of the element, regardless of whether you are in a form or detailed view. Sometimes it may be the same as the 'element' property.
  • element_raw: Only appears when editing a record, contains the element's value that is stored in the database
  • value : Appears when both editing or adding a record. When adding it contains the element's default value, when editing this is synonymous with element_raw


Moving labels inside fields

To mimic the effect show at this page (http://www.blacksburg-law.com/) note not a fabrik form, you can do the following:

Create a new file in /media/com_fabrik/js/labels.js

Clone your form template and at the bottom add the following php code: 

<?php JHTML::script('labels.js', '/media/com_fabrik/js/');?>

this will load up the label.js file into your template.

Now create a new file in /media/com_fabrik/js/labels.js and add the following code: 

var Labels = new Class({
	initialize:function(){
		$$('.fabrikElementContainer').each(function(c){
		  var label = c.getElement('label');
		  if($type(label) !== false){
		    var input = c.getElement('input');
		    if($type(input) == false){
	        input = c.getElement('textarea');
		    }
		    if($type(input) !== false){
		    	 input.value = label.innerHTML;
		    	input.addEvent('click', this.toogleLabel.bindAsEventListener(this, [input, label.innerHTML]));
		    	input.addEvent('blur', this.toogleLabel.bindAsEventListener(this, [input, label.innerHTML]));
		    	label.innerHTML = '';
		    	c.getElement('.fabrikLabel').remove();
		    }
 
		  }
		}.bind(this))
	},
 
	toogleLabel: function(e, input, label)
	{
		new Event(e).stop();
		if(e.type == 'click'){
			if(input.getValue() == label){
				input.value = '';
			}
		}else{
			if(input.getValue() == ''){
				input.value = label;
			}
		}
	}
 
});
 
Labels.implement(new Events);
 
window.addEvent('domready', function(){
	new Labels();
});

This will work only on textarea and input elements



Email templates

Translation

Fabrik default language is English (en-GB). At the moment there are translations of the following languages: English, German, French, Italian, Spanish and Russian.

Install language:
Since Fabrik don't use automatic language installation you have to use FTP to upload the language files. In the installation zip-file there are two folders called language. One is in the root of the folder and the other one is in the administrator folder. If you can't find your language here you should look for it in Fabrik SVN.

Fabrik uses Joomla's JText class so all you have to do is to upload the language files into the corresponding folder in you Joomla directory.
For example: If your Joomla site is in German you un-zip the Fabrik installation folder and open up language/de-DE. Use an FTP application to upload these files to root/language/de-DE. Then go back to Fabrik's installation folder and open administrator/language/de-DE. Upload these files to root/administrator/language/de-DE.

How to translate:
Copy the Fabrik language files and rename them into your language.
For example: If your Joomla site is in Norwegian you copy the en-GB files that comes with Fabrik. Then change the language/country code from en-GB (Brittish English) to nb-NO (Norwegian).
Translate the files and upload them into Joomla's corresponding language folders.


Joomfish

Developers

Please add information for developers to the cookie jar

Mootools 1.111 documentation

Mootools 1.2 documentation

Neat tips

Stuff that doesn't go anywhere else but is still cool!

Creating an amazon affiliate link

Comparing two dates in javascript

Deciding in PHP if a date within an age range


How To

Here is a list of "How To" items, that refers to the fabrik forum, fabrik tutorials but organized in a logical way. Only the forum posts that provide substantial information are listed here.

  • Plugins
  • Frequenty Asked Questions
  • Completed
  • Hints, Tips and Tricks
  • Form templates
  • Table templates


Table

Detailed View

Form

Groups

Elements

Visualizations

Templates

Placeholders

Misc

Development

Integration with other components

JomSocial

Related Links:

fraser island tours from noosa

12 apostles tour

blue mountains sydney tours

cellulite

Related Link:


Author: Steven Jones

Executive Editor : Link Wheel Services

Retrieved from "http://fabrikar.com/wiki/index.php/Fabrik2"
Personal tools