Christmas to New Years Holidays - Office Closed

Have a very Merry Holiday Season!Have a Happy New Year, We'll see you all in 2012! Enjoy the fireworks!We'll be closed from the afternoon of Friday, 19th December 2014 to Sunday, 4th January 2015.

Software subscriptions will enable automatic access to the product download area, however, forum access and support requests won't be processed until we return to the office on Monday, 5th January 2015.

Show Detail view in a lightbox effect.

Share

With EasyTable Pro's field options you can combine several fields to produce a custom URL for each record. There are lots of things you can do with URL's you may want a custom text for each click link or you may want to set a subject in an Email link, or you may want to have a large version of an image appear in a lightbox.

As we've already looked at how to acheive those, in this FAQ we'll take that a little bit further by displaying the Detail view of a row/record in a lightbox.

This example uses the JCE MediaBox from the popular JCE (Joomla Content Editor) to provide the lightbox pop-ups for the detail view.

First up make sure you have a current version of JCE and JCE MediaBox installed (don't forget to check the MediaBox plug-in is enabled).

This FAQ assumes you know about EasyTable Pro's field tokens, you may want to read this article about the basics of using field tokens for substitution functions.

To start with every table has a unique ID or number, you can find this in the EasyTable Editor (see the Table Info panel in the top right of the Editor screen, shown below).

EasyTable Pro - Editor Table Info PanelEasyTable Pro - Editor Table Info Panel

or the table list in the EasyTable Pro Manager (see the left most column):

EasyTable Pro - Manager - Table ID highlightedEasyTable Pro Manager - Table ID highlighted.

As you can see our US Presidents table has an ID of 123, remember this number - we'll need it soon.

For the purposes of this FAQ we're going to add our custom Detail link to the Presidency field (ie. which number President) additionally our table has fields with the following names and alias. ( I'm using the Presidency field as we already have a standard "Detail" link on the President field. )

Name Alias
President president
Presidency presidency

The other field that every table has is an automatic one created by EasyTable Pro called ID this is the unique index for each record in a table (Note: there is no settings row for the ID field in the EasyTable Editor, it used internally by EasyTable Pro and the database).

Some typical records might be:

ID Presidency President
3489 1 George Washington
3490 2 John Adams

Just the Details Mam!

There are a few more things we have to do here, first we have to get EasyTable Pro to return just the record/row. We can do this thanks to a feature of Joomla!'s MVC system, any component that implements the MVC properly can be called with an extra parameter on the URL.

Joomla! URL's are usually changed by Search Engine Friendly features to give you nice human readable results, however, underneath that they look more like this:

/index.php?option=com_easytablepro&view=easytablerecord&id=123&rid=3489

Thanks to Joomla!'s MVC mechanism (and EasyTable Pro implementing it properly) we can add this little snippet to our URL to get back the records detail view without all of the rest of surrounding template elements.

&tmpl=component

Using EasyTable Pro's tokens we will replace the record ID in the URL above with the #id# (this will automatically insert the right id for each record in the list view). The table ID (123 remember) is already in this URL but you will need to change it to the ID of your table on your website.

A View in A Box, Lightbox That Is!

So, we have to create a link to the detail view using all these elements. Using the example table and records to achieve this with EasyTable Pro you need to take several steps first:

  1. set the field "Presidency" to a type of "TEXT" (this prevents EasyTable Pro apply type specific formatting to the field).
  2. set the field options to the following:
    <a rel="presidents;width[640];height[960]" target="_blank" title="#president#" href="/index.php?option=com_easytablepro&view=easytablerecord&id=123&rid=#id#&tmpl=component" class="jcepopup">#presidency#</a>
  3. Notice the rel tag, like most lightbox systems it is used to convey addition parameters to the Javascript function. In our tag the first element sets the group name to "presidents", then, as should be obvious we set the width and height of the lightbox. You will want to adjust these to the needs of your table and website.
  4. The URL includes the reference to the table in the segment &id=123, the other values row/record ID, President and Presidency are all inserted by token replacement.

Now when EasyTable Pro renders the table any field tokens will be replaced by the values in those fields. With our example table this will produce the following HTML:

EasyTable Pro generated HTML In Browser Display
<a rel="presidents;width[640];height[960]" target="_blank" title="George Washington" href="http://j15ref.craigphillips.biz/index.php?option=com_easytablepro&amp;view=easytablerecord&amp;id=123&amp;rid=1&amp;tmpl=component" class="jcepopup">1<span class="jcemediabox-zoom-link"></span></a> 1*
<a rel="presidents;width[640];height[960]" target="_blank" title="John Adams" href="http://j15ref.craigphillips.biz/index.php?option=com_easytablepro&amp;view=easytablerecord&amp;id=123&amp;rid=2&amp;tmpl=component" class="jcepopup">2<span class="jcemediabox-zoom-link"></span></a> 2*

*Please note the examples in the table above are using the CSS from the template on the demo server.

Issues to consider!

  • As you're displaying the Detail view you may want to turn off the field you use to create the custom Detail link in the Detail view - you can see in the demo website we haven't done this and you can click on the Presidency link inside the lightbox view of the record.
  • You may want to turn of the Next/Previous Record links (we haven't and you can see the result).

Thats it. If you have any questions about EasyTable Pro and this FAQ just jump into the Subscribers Forum and ask away.

Share

You need to login to access the forums.

Member Login

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