- Category: EasyTable for J!
- Published on Wednesday, 04 November 2009 12:15
- Written by Craig Phillips
- Hits: 24835
Each table created in the EasyTable component can be configured to show/hide fields in either the list or detail views. The table editor lets you treat fields as either text, URL's, names of images or links to records detail views.
In our previous article introducing the EasyTable component we included an image of the table editing screen (shown to the left). This article will explain in more detail each of the annotated points in the EasyTable Editor.
After downloading the EasyTable component and installing it the first thing you will want to do is import a CSV/TAB file (you can get sample files here). TAB files are only supported in EasyTable Pro. After the install EasyTable will appear in the Components menu, depending on the version installed you will see either the free or Pro versions icon in the menu.
Selecting EasyTable or EasyTable Pro from the Component menu will take you straight to the EasyTable Manager screen.
The EasyTable Manager should be familiar to you as it's modelled after the standard content manager interfaces in Joomla, such as the Article, Section, Category, etc Managers. From this screen you can create a New table, Edit/Delete existing ones or change their Published state using the standard Joomla buttons found in right-hand side of the the EasyTable toolbar (as show below). You also set some global defaults for your tables using the Parameters button.
Let's create a new table, the first thing to do is click on the Add Table button ( or the New button if using Joomla! 1.5).
EasyTable Pro! 1.1.0 introduces a new table wizard, after clicking the "Add Table" button a lightbox will open up and help step you through the process (you can click on the image to the left to enlarge it). While the wizard is self explanatory and has extensive tooltips we've explained each step here.
Step 1 in the wizard is to give your table a user friendly name. The name is used for page titles and to create the alias for the table (which is used in URLs).
Step 2 is to select your CSV or TAB file. (These can be exported from Excel, Filemaker, accounting software etc)
Step 3 is simply to tell EasyTable Pro! whether or not the first line/row of your data file should be used as column headings or treated as actual data. We recommend you export you data file with column headings as it makes it much easier for you to structure your table later if the columns already have sensible names. (If you don't have column headings EasyTable has to create generic names like Column 1, Column 2, etc. )
Step 4 is simply to click the "Create Table" button, once you do this EasyTable Pro! will take the submitted data file and attempt create a new table, if it is successful you will receive a series of message detailing the results of the import.
At this point your table has been imported and column names have been created from those provided in the first line/row of the data file. If you want to continue working on the table (to publish it, customise it, etc) you must click on the " Open 'My Tablename' " button. In our example screenshot you can see the button has a label of Open 'US Presidents'
Step 5 is about selecting which fields you want to show in your List views and your Detail views, for that you need to do some field configuration.
If you're using the EasyTable Pro! 1.1.0+ line you can now jump to Field Configuration.
In EasyTable for J! and EasyTable Pro 1.0.0 versions the process is a little more manual but not difficult at all.
When creating a new table in EasyTable you are presented with a blank editor that only displays the "Details" and "Statistics" sections. At this point all you need to provide is a name for the table and a data file is a CSV/TAB format. You don't need an alias as EasyTable will create a suitable one from the tables name.
You can follow along or look at the screenshot above if you want to skip through the key points.
- Step 1 is to provide a user friendly name, something that the end user browsing the website can understand.
- A description of the data contained in the table, this is used in both a Tables list and under the Table heading in the table view.
- At this stage the Published state is "No" and can't be changed until you've uploaded the first set of data.
- Choose a suitable CSV/TAB file to import - if you don't have one try one of our sample files.
- If you CSV file contains column headings in the first row click the checkbox so that EasyTable does the right thing.
- If you don't have column headings then field labels and alias's will be given the default values of Column 1, Column 2, etc...
- Don't worry you can change the field labels after the first import (you can't change the alias's though, for that you need EasyTable Pro)
- Click the "Upload file" button and if everything works your Editor screen will now have a "Field Configuration" section as shown in the "Annotated" screen shot above.
During the initial import EasyTable process the CSV file and creates field labels for each column it finds in the file. The fields are label based on the column headings in the file as shown in EasyTable Pro! After Initial Import.
Of course it can only use the headings if the file has them and if you've told EasyTable to treat the first row as headings. If the file has no headings EasyTable will create generic labels (Column1, Column2, etc... ) and alias for each field/column. After importing the file you will want to set the Position of each field.
The Position value determines the order in which fields are presented in both the List and Detail Views.The first thing you may notice is that the fields are not in the same order they appear in your CSV file. This happens because EasyTables displays the fields ordered by their Position and then within that by Label.
You can determine the order they are in the file from their ID number which is created in the same order as the original position in the CSV file. ID numbers constantly increment for each field and are unique within your Joomla installation. Your first table will have fields with ID's from 1 to N, where N is the number of fields in the file. Subsequent tables will have field ID's starting at N+1 and continue to increment.
Once you set the Position value for each field and clicked the Apply button the fields will be redisplayed in the new order, as shown in this screenshot.
Once you have your fields in the right order, you will want to decide which columns you want to appear in the tables list view. As the columns may contain sensitive data that you don't want visible none of the columns are set to display in either the list nor detail views, this means that you have to expressly set each column you want to be visible in either the list or detail views. More often than not the number of columns in any given table is more than it is practical to display sensibly in a list view, however a detail view, which shows only a single row can easy accomodate many fields/columns of data. Clicking on the X's or ticks in the columns shown below you can toggle each of these field options.
Clicking on the standard Joomla red Cross will toggle it to a green Tick, so any column/field you want to appear in the list view simply click on its red Cross to toggle it to a green Tick in the "List View" column. The same applies for columns/fields you want to appear in the detail view.
How do users get from the list view to a records detail view? I hear you ask. Simple really, just choose a suitable field or two that appear in the list field and Tick its "Detail Link" column.
When choosing a field to use for the "Detail Link" there are a few things to take into consideration, the first is that if you make URL field a detail link, the URL will not direct users to address in the URL, it will instead take them to the records detail view.
The second consideration applies to users of EasyTable Pro - if you have enabled Joomla!'s SEF URLs the contents of the field you use to link to the detail view will form the last segment of the URL. In a ecommerce application this means using the product name will result in a URL that looks similar to this example: