ANZAC Day - Office Closed

Click to find out more.Click to find out even more.We will be closed from the afternoon of Thursday 24th April to Monday 28th April 2014. Clients with Priority Support contracts will not be affected. Ad-hoc Support clients can still lodge tickets but they won't be processed until we return to the office on Monday 28th April 2014.

EasyTable Editor Explained (Part 1) AKA Getting Started

Share

EasyTable [ Create New Table ]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 {rokbox title=|EasyTable Editor Annotated| album=|EasyTable-text| text=|annotate screenshot|}images/stories/EasyTable/EasyTable_Editor_Annotated.png{/rokbox} 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.

EasyTable in the Component Menu EasyTable Pro in the Component Menu

EasyTable Manager

Selecting EasyTable or EasyTable Pro from the Component menu will take you straight to the EasyTable Manager screen. 

EasyTable-Manager

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.

EasyTable Manager - Toolbar for Joomla! 1.5EasyTable for J! Manager - Toolbar for Joomla! 1.5

EasyTable Pro 1.1.0 ToolbarEasyTable Pro! 1.0.0 Toolbar for Joomla! 1.5

EasyTable Pro 1.1.0 ToolbarEasyTable Pro! 1.1.0 Toolbar for Joomla! 2.5

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).

Creating A New Table in EasyTable Pro!

EasyTable Pro 1.0.0 New Table Wizard (Step 1)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.

 EasyTable Pro 1.0.0 New Table Wizard Step 2

 

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 can click on the " Open 'My Tablename' " button. In our example screenshot you can see the button has a label of Open 'US Presidents'

If you're using the EasyTable Pro! 1.1.0 line you can now jump to Field Configuration.

Creating A New Table in Joomla! 1.5

In EasyTable for J! and EasyTable Pro 1.0.0 versions the process is a little more manual but not difficult at all.

EasyTable [ Create New Table ]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 {rokbox title=|EasyTable [ Create New Table ]| album=|EasyTable-text| text=|look at the screenshot above|}images/stories/EasyTable/EasyTable_Create_New_Table.png{/rokbox} if you want to skip through the key points.

  1. Step 1 is to provide a user friendly name, something that the end user browsing the website can understand.
  2. 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.
  3. At this stage the Published state is "No" and can't be changed until you've uploaded the first set of data.
  4. Choose a suitable CSV/TAB file to import - if you don't have one try one of our sample files.
    1. If you CSV file contains column headings in the first row click the checkbox so that EasyTable does the right thing.
    2. 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...
    3. 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)
  5. 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.

Field Configuration

EasyTable [ After Initial Import ]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 {rokbox title=|EasyTable [ After Initial Import ]| album=|EasyTable-text| text=|this screenshot.|}images/stories/EasyTable/EasyTable_After_Initial_Import.png{/rokbox}

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.

 

PositionsEasyTable [ Editor ID Position Close-up ]

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 {rokbox title=|EasyTable [ Setting Field Position Values ]| album=|EasyTable-text| text=|value for each field|}images/stories/EasyTable/EasyTable_Editor_Changing_Column_Positions.png{/rokbox} and clicked the Apply button the fields will be redisplayed in the new order, as {rokbox title=|EasyTable [ Field Position Set ]| album=|EasyTable-text| text=|shown in this screenshot|}images/stories/EasyTable/EasyTable_Editor_with_all_Columns_set.png{/rokbox}.

Ticks & Crosses ( or List & Detail View and Detail Links )

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. 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.

EasyTable Pro 1.1 Editor Toggle Columns

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:
/our-widgets/bigwidget

  • In the List View column a green Tick means that the table column will appear in the main or List View of the table. a red Cross means it will not be displayed.
  • In the Detail View column a green Tick means that the table column will appear in the Detail View of a row, a red Cross means it will not be displayed in the Detail View.
  • In the List View column a green Tick means that the table column will appear in the main view of the table.

 

Current EasyTable articles:
Share

You need to login to access the forums.

Member Login

You need to Login to access your Subscription details or the Forums.