Creating simple forms based applications using Exponential is relatively easy. In the admin site many user activities are based on these capabilities. This example shows you how to use the forms processing offered by Exponential 3.2 in a user site, i.e. outside the admin site. We create a "for sale" application, where users can post items for sale (along with contact information like telephone nummber etc). Many forms processing applications can be solved similarly.

 

Create 2 new classes using the admin site tools, called salesfolder and salesitem, respectively.

 

Salesfolder can be a straight copy of the folder class (change class name and identifier of the copy). Then create a new class salesitem, to hold the necessary information about the items for sale. (A minimal solution would have a textline for the item description, and an integer to hold the phone number of the seller).

 

Nodes of the class salesitem are to be published by the anonymous webusers in the salesfolder in the user site, i.e. without logging into the admin site. The salesfolder can be published somewhere in the user site, for instance under a node of type article. I assume that you have an existing site where you can add such an article containing a salesfolder.

 

Note: The solution described here is not optimal. Hopefully it illustrates Exponential capabilities. It also shows you how you can accomplish quite a lot by doing a small amount of customization of the out-of-box functionality provided by Exponential.

 

Before the users can publish new salesitems, you need to address the question of permissions. To get things working, you need to give your (anonymous) users permission to create salesitems. Do this by editing the role anonymous and adding create permission on salesitems in the salesfolder subtree. There are point and click tools for this in the admin site.

 

Note that you also have to give edit permission on salesitems, create permission alone is not enough!

You may also consider giving remove permission (to "self"). The excact permissions your application requires are up to you.

The next step is to customize the appearance and functionality of the application, and not use the standard (or admin) template code directly.

For example, you probably wish to to remove the buttons for preview, bookmark etc that you see in the salesfolder. What you want to do is to override the file /design/admin/override/templates/folder.tpl. The admin site gives you the tools you need to do this.

 

You can base your override template on /content/full.tpl. Select your user site and create a template file called say, salesfolder.tpl that overrides the class salesfolder only. Start with an empty file. Then copy the contents of /design/admin/override/templates/folder.tpl and paste it into the newly created template file salesfolder.tpl. At the moment this template file provides to much functionality for the casual web user, and not all of it makes sense in this simple application.You will now customize this file.

In the template file salesfolder.tpl, remove the following code:

<div class="buttonblock">

   {section show=and($is_editable,$content_object.can_edit)}

   <input type="hidden" name="ContentObjectID" 

 

   value="{$content_object.id}" />

   <input class="button" type="submit" name="EditButton" 

 

   value="{'Edit'|i18n( 'design/standard/node/view' )}" />

   {/section}

 

 <input class="button" type="submit" name="ActionPreview" 

 

    value="{'Preview'|i18n('design/standard/node/view')}" />

 

 

   <input class="button" type="submit" name="ActionRemove" 

 

    value="{'Remove'|i18n('design/standard/node/view')}" />

 

 

   <input class="button" type="submit" 

 

  name="ActionAddToBookmarks" 

 

  value="{'Bookmark'|i18n('design/standard/node/view')}" />

 

 

   <input class="button" type="submit" 

 

   name="ActionAddToNotification" 

 

   value=

 

  "{'Keep me updated'|i18n('design/standard/node/view')}" />

 </div>

This removes the button block with the preview/bookmark etc buttons. Creat a few salesitems and see how they are displayed in the salesfolder.

I suggest removing the class and section columns in the list of salesitems in the salesfolder, since these columns do not mean much for the average web user. Do this by removing the following code from salesfolder.tpl:

<th>

   {"Class"|i18n("design/standard/node/view")}

</th>

and a few lines further below:

<td>

 {$Child:item.object.class_name|wash}

</td>

Also remove:

<th>

   {"Section"|i18n("design/standard/node/view")}

</th>

and, a few lines further below:

<td>

 {$Child:item.object.section_id}

</td>

Finally, you may want to remove the "store draft" button. Do this by removing the line

<input class="button" type="submit" name="StoreButton"  

 

 value="{'Store draft'|i18n('design/standard/content/edit')}" />

You may want to do more customizing along the same lines, depending on your needs, but that is all you need to do, as far as this example is concerned.

When the user presses the create salesitem button in the salesfolder, again the standard template file for item editing provides more functionality than our application requires. You want to remove some of this functionality.

Do this by overriding /design/standard/templates/content/edit.tpl. Using the admin site template tools, select your user site and create a new template file salesitemedit.tpl for the class salesitems. Initially empty, Its content can be copied from /design/standard/templates/content/edit.tpl. Exponential puts this file in design/usersite/override/templates/salesedit.tpl.

 

Now customize this new file. For instance, we want to remove the options in the right menu. Do this by removing the lines:

<!-- Right part start-->

   {include uri="design:content/edit_right_menu.tpl"}

<!-- Right part end -->

We also want to remove the possibility to move, trash, change sort order etc. If you try to remove the lines:

{include uri="design:content/edit_placement.tpl"}

 

you will find that this does not work; eZ complains and gives you an error message when you try to store the object after editing.

Put the line back, and rather override the file design/standard/templates/content/edit_placement.tpl. Using the admin siteto create this template, anf copy the contents of the original edit_placement.tpl file into the new file that will be stored at /design/usersite/override/templates/salesitemedit_placement.tpl. You can then customize this new file.

How do you know which template files to override? Add the line

debug=enabled

to the [TemplateSettings] section of /settings/override/site.ini.append.

Now when you reload the eZ page, Exponential will include the names of the template files used. (Put a # before the line debug=enabled to turn the display of template information of when you don’t need it anymore.)

First remove the button for adding new locations, i.e remove the line:

<input class="button" type="submit" name="BrowseNodeButton" 

 

 value="{'Add locations'|i18n('design/standard/content/edit')}" />

Then remove the column heading by removing the lines:

<th width="60%">

 

   {"Location"|i18n("design/standard/content/edit")}</th>

<th colspan="1">

 

  {"Sort by"|i18n("design/standard/content/edit")}</th>

<th colspan="2">

 

   {"Ordering"|i18n("design/standard/content/edit")}</th>

<th colspan="1">

 

   {"Main"|i18n("design/standard/content/edit")}</th>

<th colspan="1">

 

  {"Move"|i18n("design/standard/content/edit")}</th>

<th colspan="1">

 

  {"Remove"|i18n("design/standard/content/edit")}</th>

Remove the option to alter the sort order by removing the lines:

<td class="{$Node:sequence}">

  <select name="SortFieldMap[{$Node:item.id}]">

  {section name=Sort loop=$Node:sort_fields}

  <option value="{$Node:Sort:key}" 

 

 

  {section show=eq($Node:Sort:key,$Node:item.sort_field)}

 

  selected="selected"{/section}>  {$Node:Sort:item}</option>

 

 

  {/section}

  </select>

</td>

Remove the corresponding ascending/descending sort order radio buttons by removing the lines:

<td class="{$Node:sequence}" width="25">

  <nobr><img src={"asc-transp.gif"|ezimage} alt="Ascending" />

  <input type="radio" name="SortOrderMap[{$Node:item.id}]" 

 

   value="1" 

  {section show=eq($Node:item.sort_order,1)}

 

   checked="checked"{/section} /></nobr>

</td>

<td class="{$Node:sequence}" width="25">

  <nobr><img src={"desc-transp.gif"|ezimage} alt="Descending" />

  <input type="radio" name="SortOrderMap[{$Node:item.id}]" 

 

  value="0" 

  {section show=eq($Node:item.sort_order,0)}

 

   checked="checked"{/section} /></nobr>

</td>

Remove the "move file" icon by removing the lines:

<input type="image"

 

 name="{concat('MoveNodeID_',$Node:item.parent_node)}" 

 

src={"move.gif"|ezimage} value="{$Node:item.parent_node}" />

Remove the trash icon by removing the lines:

<input type="image" 

 

name="{concat('RemoveNodeID_',$Node:item.parent_node)}" 

 

src={"trash.png"|ezimage} value="{$Node:item.parent_node}"/>

Then you will probably want to remove the lingering radio button that still shows up. But removing the code

<input type="radio" name="MainNodeID" 

 

{section show=eq($main_node_id,$Node:item.parent_node)}

 

checked="checked"{/section} value="{$Node:item.parent_node}" />

does not seem to work.. Exponential again complains with an error message when you try to store the new item. A workaround is to make this input field hidden by replacing the above lines with the following:

<input type="hidden" name="MainNodeID" 

 

{section show=eq($main_node_id,$Node:item.parent_node)}

 

checked="checked"{/section} 

 

 value="{$Node:item.parent_node}" />

A more experienced user would probably do this differently. I suggest you spend some time on this template file to see how you can improve on the solution.

This concludes the example. To summarize, you have created a simple forms based application by copying standard Exponential functionality and adding and removing a few features as required.