Wiki Tutorial

Step-by-step: How To Build a Wiki Application

An Important Note About Forms

The word form in Wiki-land can be confusing. See WikiTutForms for an overview of "forms".

A wiki application makes use of different types of "forms". These not difficult to put together, but they have to match exactly in specific places or your application won't work!

This page describes how to create a wiki application, forms and all.

A wiki applicatio" acts like a small, simple database. Each "row" in the database is represented by a single wiki page (with a form attached). The data fields are in the form.

Schema: A Wiki Form

First define a Wiki form. This is the analog of a database table.

Sample: WikiTutAppE1Form

  1. Create a new page
  2. Build a form definition table
    • use of EDITTABLE is allowed
  3. Save the page

Create the Form

Choose a name for your form. This will also be the nae of the page that defines the form. Choose a memorable, mnemonic name related to your application. The name must end in the word 'Form'.

For example, WikiTutAppE1Form is the page that defines the form (of the same name) used by the Wiki Application tutorial.

Build a Table

Wiki Forms are defined as tables with a specifc format. Each row in the table represents a field in the resulting form.

The table is expected to contain the following columns.

Name: Type: Size: Values: Tooltip message:

  • Name (required)
  • Type (required)
  • Size (required)
  • Values (depends on type)
  • Tooltip Message (optional)

See WikiTutAppE1Form for additional details and examples.


Template: Create a Standard Page

Create a page that you'll use as a template for all project pages in your "application". You'll add the Wiki form to this template; all new pages will inherit a copy of the form. Additional details and explanations can be found at WikiTutAppHowToTemplate.

Sample: %IF{"$'FORMFIELD{TutProjectName}'", then="%FORMFIELD{"TutProjectName"}%", else="%TOPIC%"}%

  1. Create a new page that will become your template.
  2. click Add Form (lower right corner).
  3. From the button list presented, choose the form to be added to this template
  4. Customize your template. You probably want more on the page than just the Wiki form. Add whatever text you want to have in every page of your "application". All future pages will begin from a copy of this template.
  5. Save the page

Step 2: Add Form


Step 3: Choose



Data Entry: Initialization Page

The purpose of the initialization page is to
  • provide basic instructions to the user regarding what data should be entered
  • allow the user to enter data which wil be copied into the new project page
  • initialize a new project page, based on a specified template with a Wiki form (and including the data the user just entered)
  • provide the user with a "preview" look at the new page, with the form data entered, in case any errors must be fixed.

Sample: WikiTutAppE1Create

  1. Get the Form Code
  2. Create a new Initialization page; open in the Edit window.
  3. Insert and Edit the form code

Form Code: Copy

We'll get the form code by copying the rendered HTML of the Wiki form we just attached to the template.
  1. Open the template page (with form added) in the Wiki Editor
  2. Do a "View Source" in your Browser
  3. Locate the form code. It should begin like this:
    <div class="twikiForm twikiEditForm"><table class="twikiFormTable">...
  4. Select, and copy the form code. Be sure to get it all, from the first <div... to the closing </table>  </div>. Note: there should be several blank lines following the form code.
  5. Cancel the Edit

Form Code: Paste and Edit

  1. Create and open a new page that will be your Initialization (data entry) page. Paste in the form code that you just copied.

  2. REMOVE the first table row; it looks like this:
    <tr><th class="twikiFormTableHRow" bgcolor="#99CCCC" colspan="2"> ...
     ... </th></tr> 

  3. Edit to taste.
    • Add line breaks
    • Add white space and indentation.
    • Add instructional text (hint: use the "title" text)

    For example:
          <th bgcolor="#99CCCC" align="right">
             <span title="Name of this Project">ProjectName</span>
       <td align="left">
          <input type="text" name="ProjectName"  size="60" class="twikiEditFormTextField" />
          <br />Enter the name of the Project

  4. Turn the resulting table into an HTML Form by wrapping in <form...> tags. Be sure to set the values for name="topic" and *name="templatetopic" appropriately for your application.
       <form action="%SCRIPTURLPATH%/edit%SCRIPTSUFFIX%/%WEB%/"> 
          <input type="hidden" value="WikiTutApp_%YEARMO%_XXXXXXXXXX" name="topic" />
          <input type="hidden" value="form" name="action">
          <input type="hidden" value="New" name="ProjectClassification" />
          <input type="hidden" value="WikiTutAppTemplateStrict" name="templatetopic" />
          <input type="hidden" value="WikiTutApp" name="topicparent" />
          <div class="twikiForm twikiEditForm">

  5. Add any additional useful content to the page.

  6. Save

Is There a Date Picker in Your Form?

If there is a date picker (calendar field) in your form, add the following code at the end of the page:

<style type='text/css' media='all'>
  @import url('/pub/TWiki/JSCalendarContrib/calendar-blue.css');
  .calendar {z-index:2000;}
<script type='text/javascript' src='/pub/TWiki/JSCalendarContrib/calendar.js'></script>
<script type='text/javascript' src='/pub/TWiki/JSCalendarContrib/lang/calendar-en.js'></script>
<script type='text/javascript' src='/pub/TWiki/JSCalendarContrib/twiki.js'></script>


Index Page

Sample: WikiTutAppE1Index


  1. Decide what information you want to show
  2. Create a new page for your Index
    • Open the page in the Wiki editor.
  3. Create a SEARCH. Results can be the default "Search" format, or in a table or bullet list.

Example: Default results format

  topic="WikiTutApp_*" nosearch="on" nototal="on" regex="on" noheader="on" 

Example: Tabular results format

 topic="WikiTutApp_*" nosearch="on" nototal="on" regex="on" noheader="on" 
 format="| [[$topic][$formfield(TutProjectName)]] | $formfield(TutProjectOrganization) | $formfield(TutExecSummary) |"

Query: Search Page

Continued on next page...

Topic revision: r18 - 14 Oct 2010, vlb
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email