Follow

Custom Data Editor (CDE)

The CDE has been replaced with Structured Data (SDE). Same basic principles with additional features. Documentation to come. Contact support if you have questions. 

 

The Custom Data Editor (CDE) is a very flexible tool for displaying arbitrary data. This data can be anything from a collection of recipes (see http://www.sunvalleymag.com/Sun-Valley-Magazine/Dining/Recipes/), a list of top doctors in town or vacation rentals. Because the tool is so flexible, it also requires a fair amount of technical understanding in order to configure.

In the example below, we will be creating a CDE for recipes. Each CDE must have the following files available on your web server:

  • An XML definition file. This file goes in your /data/ directory folder and must be named according to the convention *_def.xml. For our example we will name it “recipes_def.xml”. This file defines all of the fields available to each record in your CDE. Once this definition file is created, it may be selected in your CDE interface as the Table Template. See the image below:

  • A search results template. This template is used when showing the search results view of the module and is named”*-searchresults.tpl” (or “recipes-searchresults.tpl” in our example). This file should be placed in the /templates/includes/ directory.
  • A details template. This template is used when showing an individual record from the CDE and is named, “*-details.tpl” (“recipes-details.tpl” in our example). This file should be placed in the /html/templates/includes/ directory.
  •  

You can get a copy of the three file types discussed above from Godengo if you do not already have them in place on your server.

Creating the CDE

 
The XML Data File

The first step in creation or modification of a CDE is to edit the XML definition file. Editing this file means defining what fields are needed for the CDE. If you need these fields to sort or filter, be sure to use the standard fields as listed below:

name 
address
phone
email
url
price
directions
areaname
city
state
zipcode
province
country
starrating
hours
additionalinfo
location
reviewurl
description

If you do not need the fields to sort or filter, then you can create new field names (no spaces, lower case, no strange characters) that will make more sense to you as an editor. For example, if you have a field you want to label to outside users “Cuisine” and you don't want to re-purpose any of the above standard fields (eg use 'hours' as the field name but label it 'Cuisine'), then simply create a new field name.

Let us now look at some code from a typical recipe .xml file.

<?xml version="1.0" encoding="iso-8859-1"?>
<moduleparams>
<name>Module Parameters</name>
<params>
<param name="name" type="text" default="" label="Title - Dish" description="Title - Dish" required="true" filter="true">
</param>
<!-- extra fields. You can edit or remove these as you wish. These are stored in a single field with a delimiter -->
<param name="source" type="text" default="" label="Source" description="Source">
</param>
</params>
</moduleparams>

name = fieldname type = HTML input type. Usually text default = default value label = text to display to the left of the field. description = Help prompt for input form. User can mouse over the [i] icon and get this help text.

The first <param> 'name' is a standard field and can be set to sort in the search results template. The second <param> field is an extra field (non-standard) which does not require sorting and would not make sense as a filter field.

Some more field types you can use and examples:

<param name="show_location" type="radio" default="no" label="Show Location" description="Show the New Window Location bar">
<option value="no">No</option>
<option value="yes">Yes</option>
</param>

The above would cause the field to be rendered as a set of Yes / No radio buttons. Same would work for check boxes.

For a drop down list:

<param name="show_scrollbar" type="list" default="auto" label="Show Scrollbars" description="Choose whether or not to show scrollbars">
<option value="auto">Auto</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</param>

For a large text field:

<param name="coursedescription" type="textarea" rows="5" cols="50" default="" label="Course Description" description="Detailed course description">
</param>
The Search Results Template File

Ideally the editor of this file has a firm grasp on HTML. Here are the elements you will need to make sure conform with your data file you just created.

If you visit the link at the beginning of this article, you will see what the search results page looks like. Typically there are three or four columns that will display basic information. On the page linked to above, the template for the search results displays three columns.

In the code for the template, you will need to modify the header on the table to make sure the field names synch up to the data file. In the snippet of code below, the field name in the first column is in bold to show you the three place the field name must match exactly to the data file field name.

<tr>
<th><a href="{sortlink field="**name**"}">Title - Dish<img align="absmiddle" src="{$images}/order-{if $Page->params.sort=="**name**"}{if $Page->params.so=="asc"}desc{else}asc{/if}{else}desc{/if}.gif" alt="Sort {if $Page->params.sort=="**name**"}{if $Page->params.so=="asc"}Descending{else}Ascending{/if}{else}Descending{/if}"></a></th>
<th><a href="{sortlink field="additionalinfo"}">Category<img align="absmiddle" src="{$images}/order-{if $Page->params.sort=="additionalinfo"}{if $Page->params.so=="asc"}desc{else}asc{/if}{else}desc{/if}.gif" alt="Sort {if $Page->params.sort=="additionalinfo "}{if $Page->params.so=="asc"}Descending{else}Ascending{/if}{else}Descending{/if}"></a></th>
<th><a href="{sortlink field="address"}">Cuisine<img align="absmiddle" src="{$images}/order-{if $Page->params.sort=="address"}{if $Page->params.so=="asc"}desc{else}asc{/if}{else}desc{/if}.gif" alt="Sort {if $Page->params.sort=="address"}{if $Page->params.so=="asc"}Descending{else}Ascending{/if}{else}Descending{/if}"></a></th>
</tr>

The next snippet of code in the file you must modify looks like this:

{section name=x loop=$datalist max=$config.rowsperpage start=$Page->get('si')}
{strip}
<tr class="values= {cycle"rowA,rowB"}">
<td class="record-name">
<a href="{pageurl sefriendly=true view='details' itm=$datalist[x].id}">{$datalist[x].**name**}</a>
</td>
<td>
{$datalist[x].**additionalinfo**}
</td>
<td>
{$datalist[x].**address**}
</td>
</tr>
{/strip}
{/section}

All field names that must be modified are in bold.

The Details Template

The details template will make the individual listing fields appear in a certain order. This file is just a basic table. Be sure to include all the fields you want to show in the listing. Typically these are all the fields you have defined in the .xml data file. See the image below for an example of what a listing looks like as rendered by the details template:

Here is a snippet of the code. The name field precedes this code and is a special case in the display as you can see in the Almonds example above. Just be sure that the main title of your listing is associated with the field name 'name' (or some other standard field that makes sense) and is properly referenced at the start of this template file.

The rest of the work on this file is accomplished by making sure that every other field is listed as in the abbreviated example below. This listing is a simple table, with a row for each field.

<div class="listing-info">
<table id="details-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<th>Category:</th>
<td>{$data.additionalinfo}</td>
</tr>
{if $data.image<>''}
<tr>
<th></th>
<td><img src="{$images}/customdata/{$data.image}" alt="" /><br /><br />{$data.photo_credit}</td>
</tr>
{/if}
</table>
</div>

 

Structured Data - Updated URLs and Information

When using Structured Data instead of Custom Data, some URLs will need to be updated in the templates. Here are a few examples:

In a CDE, the link to the individual record listing on the search page

<a href="{pageurl sefriendly=true view='details' itm=$datalist[x].id}">{$datalist[x].**name**}</a>

becomes this in an SDE

<a href="{pageurl sefriendly=true reset=true name=$datalist[x].name|nametopath record=$datalist[x].id filter='seo_url_filter'}">{$datalist[x].name}</a>

 (this generally is in  <td class="record-name">)

 

If the images are not working on the individual listings page, change:

<img src="{$images}/customdata/{$data.image} alt="" />

to:

<img src=""/core/includes/phpThumb/phpThumb.php?src=/images/customdata/{$data.image}&w=300&q=90" border="0" class="main-image">

 

If the "Show All" button on the search results/main listings page isn't working, change:

<td><a href="./index.php">Show All</a></td>

to

<td><a href="{pageurl sefriendly=true reset=true filter='seo_url_filter'}">Show All</a></td>

 

If the "Back to the list" link does not work on individual listings, change:

<a href="{$Page->path}"><< Back to the list</a> 

to

<a href="{pageurl sefriendly=true reset=true filter='seo_url_filter'}"><< Back to the list</a> 

 

If the arrow images are not working on the search page, change {$images}/ in the img src to /images/ instead. 

Have more questions? Submit a request

Comments

Powered by Zendesk