How to create an editable table using DataForms

by TeRq on 16 Nov 2010 11:37


As DataForms seem to be problematic for Wikidot users we wish to present you a small tutorial — how to create an editable table using Forms. As an example we will create a catalog of weapons for an online game.

Let's start!

1. Things you need:

2. You may also need:

  • CSS Module to add custom look to your content
  • Redirect Module to come back to table automatically after editing
  • special URL parameter edit/true (automatically turns edit mode on) and noredirect/true (prevents redirection)
  • some admin:manage configuration

3. How to put it together:

First of all, you need to choose category for your data, e.g. weapon and create your DataForms definition like this:

Page content: weapon:_template

[!-- this module redirect you to your list after edit --]
[[module Redirect destination="/weapon-list"]]


[!-- this is DataForm definition - it define fields --]
    label: Image
    type: file
    category: weapon-images
    label: Name
    label: Description
    height: 3
    label: Weapon type
    type: select
      1: "Bow"
      2: "Dagger"
      3: "Sword"
      4: "Staff"
      5: "Axe"

Set weapon category as autonumbered in admin:manage » Autonumbering of pages.
Next you need to create a page with ListPages, i.e.:

Page content: weapon-list

[!-- here you can style in your table --]
[[module CSS]]
.weapon-list { 
    width: 100%;
    margin-top: -2px;
.weapon-list td { 
    border: 1px solid #AAA;

[[table class="weapon-list"]]
  [[cell style="width:160px"]] Image [[/cell]]
  [[cell]] Name/Description [[/cell]]
  [[cell style="width:100px"]] Type [[/cell]]
  [[cell style="width:40px"]] Edit [[/cell]]

[[module ListPages category="weapon" separate="no" order="name" perPage="9999"]]
[[table class="weapon-list"]]
  [[cell style="width:160px"]] [[image %%form_raw{image}%% width="160px"]] [[/cell]]
  [[cell style="width:100px"]] %%form_data{type}%% [[/cell]]
  [[cell style="width:40px"]] [[[%%link%%/edit/true/noredirect/true | edit]]] [[/cell]]

[[[/weapon:new/edit/true/noredirect/true | + Create New]]]

Now you can create and edit items, add/delete a column in table, create different tables from one data set and you can manage even the most complex tables. Once you dig into documentation you can learn how to add sorting, pagination and harness more advanced use cases to manage your dataset.

Check out the live example:

Comments: 15

Add a New Comment