EditTablePlugin < TWiki

---+!! Edit Table Plugin

Edit TWiki tables in place, using edit fields and drop down boxes, without having to edit the complete topic. 

Simply add an *[&nbsp;Edit&nbsp;table&nbsp;]* button to an existing table by writing =%<nop>EDITTABLE{}%= directly above the table. This can be added to tables that are formatted with TablePlugin: add the =EDITTABLE= variable just above or below the =TABLE= tag. It can also be used without any =TABLE= tag.

Customize entry fields by specifying the format: use a text field, a drop down box, a date field, radio buttons or checkboxes.

Multiple tables per topic are editable, but only one at a time can be edited.

%TOC%

---++ Per Table Settings

Add a =%<nop>EDITTABLE{...}%= variable just before an existing table to make it editable, or add the variable anywhere in a topic to start a new table.
%INCLUDE{"%TWIKIWEB%.VarEDITTABLE" section="edittable_attributes"}%

---+++ Using TWiki Variables in the Format Parameter

TWiki variables like =%<nop>Y%= in =&lt;initial value&gt;= (of text input field) and =&lt;label text&gt;= (of fixed label) will get expanded when a new row is added.

This is useful to write variables like dates into the table.
<blockquote>
For example:
<verbatim>
%EDITTABLE{ format="| label, 0, %SERVERTIME{"$day $mon $year $hour:$min"}% |" }%
</verbatim>
... will get expanded to =%SERVERTIME{"$day $mon $year $hour:$min"}%= when the new row is created.
</blockquote>

To prevent variable expansion: escape the format variable with [[%TWIKIWEB%.FormatTokens][formatting tokens]] (particularly =$percnt=).
<blockquote>
For example:
<verbatim>
%EDITTABLE{ format="| text, 20, $percntY$percnt |" }%
</verbatim>
... will create a new row with =$percntY$percnt=. In view mode this is temporarily translated to =%<nop>Y%= and subsequent rendered as %Y%.
</blockquote>



#DateField
---+++ Date Field Type

<img src="%ATTACHURLPATH%/EditTablePluginCalendarExample.gif" alt="Edit Table Calendar Example" width="638" height="250" />

The =date= field type allows one to choose a date with a popup calendar. Popup calendar works with all modern browsers. The date picker button is inactive if the browser cannot support the popup calendar or if javascript is disabled. 


---++ Per Cell Settings

An individual edit field type can be defined for each table cell. Place an =%<nop>EDITCELL{ "type, ..." }%= variable at the end of the cell content. This is useful to override the per column =%<nop>EDITTABLE{ format="..." }%= settings, or to create tables with key/value rows. All edit field types of the =format="..."= parameter are supported. For example, to define a text field, type: =| cell content %<nop>EDITCELL{ "text, 20" }% |=

It is also possible to place the edit button inside a cell instead of default location below the table. Type =| %<nop>EDITCELL{ "editbutton, 1, Edit this table" }% |= to show a button, or =| %<nop>EDITCELL{ "editbutton, 1, Edit table, Image-URL" }% |= to show a button image with alternate text.

__Note:__ The =%<nop>EDITCELL{ }%=variable cannot be used by itself; place an =%<nop>EDITTABLE{ }%=variable at the beginning of a table where you want to use =%<nop>EDITCELL{ }%= variables.

---++ Table Buttons

<form>
   * In page view mode:
      * <input type="submit" class="twikiSubmit" name="et"   value="Edit table" onclick="return(false);" /> - turn the table into edit mode
   * In edit mode:
      * <input type="submit" class="twikiButton" name="etsave"   value="Save table"  onclick="return(false);" /> - save your changes
      * <input type="submit" class="twikiButton" name="etqsave"   value="Quiet save"  onclick="return(false);" /> - save your changes without alerting subscribed WebNotify users
      * <input type="submit" class="twikiButton" name="etaddrow" value="Add row" onclick="return(false);" /> - add row to the table (if enabled)
      * <input type="submit" class="twikiButton" name="etdelrow" value="Delete last row" onclick="return(false);" /> - remove last row from the table (if enabled)
      * <input type="submit" class="twikiButtonCancel" name="etcancel" value="Cancel" onclick="return(false);" /> - cancel without saving and release edit lock
      * <img src="%ATTACHURLPATH%/btn_move.gif"> - Move a row by clicking this button next to the row to
         be moved, then at a destination.
      * <img src="%ATTACHURLPATH%/btn_delete.gif"> - Deletes the row next to this button.
</form>

---++ Examples

Line before table: =%<nop>EDITTABLE{ format="| row, -1 | text, 20, init | select, 1, one, two, three, four | radio, 3,:-),:-I,:-( | label, 0, %<nop>SERVERTIME{"$day $mon $year $hour:$min"}% |" changerows="on" }%=
%EDITTABLE{ format="| row, -1 | text, 20, init | select, 1, one, two, three, four | radio, 3,:-),:-I,:-( | label, 0, %SERVERTIME{"$day $mon $year $hour:$min"}% |" changerows="on" }%
|*Nr*|*Text field*|*Drop down*|*Mood*|*Timestamp*|
| 1 | hello table | one | :-) | 26 Jun 2002 12:30 |
| 2 |  | two | :-( | 27 Jun 2002 12:40 |

%RED% __Note:__ Please do not save this example table! Use TWiki:Sandbox.EditTablePluginTesting if you want to try out this Plugin %ENDCOLOR%

If this plugin is installed you will see an *[&nbsp;Edit&nbsp;table&nbsp;]* button above; if you were to click on it (please don't, use TWiki:Sandbox.EditTablePluginTesting for testing) you get this form:

<a name="edittable1"></a>
<div class="editTable editTableEdit">
<input type="hidden" name="ettablenr" value="1" />
<table cellspacing="0" id="default" cellpadding="0" class="twikiTable" rules="rows" border="1">
	<thead>
	<tr class="twikiTableEven twikiTableRowdataBgSorted0 twikiTableRowdataBg0">
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol0 twikiFirstCol"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=0;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Nr<input type="hidden" name="etcell1x1" value="*Nr*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol1"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=1;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Text field<input type="hidden" name="etcell1x2" value="*Text field*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol2"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=2;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Drop down<input type="hidden" name="etcell1x3" value="*Drop down*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol3"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=3;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Mood<input type="hidden" name="etcell1x4" value="*Mood*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol4 twikiLastCol"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=4;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Timestamp<input type="hidden" name="etcell1x5" value="*Timestamp*" /></font></a> </th>
	</tr>
	</thead>
	<tr class="twikiTableOdd twikiTableRowdataBgSorted0 twikiTableRowdataBg0">
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol0 twikiFirstCol"> <span class="et_rowlabel">1<input type="hidden" name="etcell2x1" value="1" /></span> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol1"> <input class="twikiInputField editTableInput" type="text" name="etcell2x2" size="20" value="hello table" /> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol2"> <select class="twikiSelect" name="etcell2x3" size="1"> <option selected="selected">one</option> <option>two</option> <option>three</option> <option>four</option></select> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol3"> <input type="radio" name="etcell2x4" value=":-)" checked="checked" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/smile.gif" alt="smile" title="smile" border="0" />  <input type="radio" name="etcell2x4" value=":-I" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/indifferent.gif" alt="indifferent" title="indifferent" border="0" />  <input type="radio" name="etcell2x4" value=":-(" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/frown.gif" alt="frown" title="frown" border="0" /> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol4 twikiLastCol"> 26 Jun 2002 12:30<input type="hidden" name="etcell2x5" value="26 Jun 2002 12:30" /> </td>
	</tr>
	<tr class="twikiTableEven twikiTableRowdataBgSorted1 twikiTableRowdataBg1">
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol0 twikiFirstCol twikiLast"> <span class="et_rowlabel">2<input type="hidden" name="etcell3x1" value="2" /></span> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol1 twikiLast"> <input class="twikiInputField editTableInput" type="text" name="etcell3x2" size="20" value="" /> </td>

		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol2 twikiLast"> <select class="twikiSelect" name="etcell3x3" size="1"> <option>one</option> <option selected="selected">two</option> <option>three</option> <option>four</option></select> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol3 twikiLast"> <input type="radio" name="etcell3x4" value=":-)" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/smile.gif" alt="smile" title="smile" border="0" />  <input type="radio" name="etcell3x4" value=":-I" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/indifferent.gif" alt="indifferent" title="indifferent" border="0" />  <input type="radio" name="etcell3x4" value=":-(" checked="checked" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/frown.gif" alt="frown" title="frown" border="0" /> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol4 twikiLastCol twikiLast"> 27 Jun 2002 12:40<input type="hidden" name="etcell3x5" value="27 Jun 2002 12:40" /> </td>
	</tr></table>
<input type="hidden" name="etrows" value="3" />
<input type="submit" name="etsave" id="etsave" value="Save table" class="twikiSubmit" />
<input type="submit" name="etqsave" id="etqsave" value="Quiet save" class="twikiButton" />
<input type="submit" name="etaddrow" id="etaddrow" value="Add row" class="twikiButton" />
<input type="submit" name="etdelrow" id="etdelrow" value="Delete last row" class="twikiButton" />
<input type="submit" name="etcancel" id="etcancel" value="Cancel" class="twikiButton twikiButtonCancel" />
</div><!-- /editTable -->

The following example shows a simple table with key/value rows. The default edit field type for the value column is a text field. This is overloaded by a selector for the Gender, and a date picker for the DOB. This is typically used by TWiki applications where new topics with tables are created based on a template topic.

<table style="background:#f2f2f2;" cellpadding="6">
<tr>
<th>
You type:
</th>
<th>
You get:
</th>
<th>
Table in edit mode:
</th>
</tr>
<tr>
<td valign="top">
<verbatim>
%EDITTABLE{ format="| label | text, 40 |" changerows="off" }%
|*Key*|*Value*|
| Name: | John Smith |
| Gender: | M %EDITCELL{select, 1, , F, M}% |
| DOB: | 1999/12/31 %EDITCELL{date, 10}% |
| City: | New York |
</verbatim>
</td>
<td valign="top">
<img src="%ATTACHURLPATH%/ScreenshotEditCell1.gif" alt="EDITCELL Example in view mode" width="150" height="172" />
</td>
<td valign="top">
<img src="%ATTACHURLPATH%/ScreenshotEditCell2.gif" alt="EDITCELL Example in edit mode" width="436" height="198" />
</td>
</tr></table>

---++ Plugin Settings

Plugin settings are stored as preferences variables. To reference
a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, for example, ==%<nop>EDITTABLEPLUGIN_SHORTDESCRIPTION%==

   * One line description, shown in the %TWIKIWEB%.TextFormattingRules topic:
      * Set SHORTDESCRIPTION = Edit TWiki tables using edit fields, date pickers and drop down boxes

   * Set DEBUG to 1 to get debug messages in =data/debug.txt=.  Default: =0=
      * Set DEBUG = 0

   * Set JAVASCRIPTINTERFACE to 1 to be able to directly move and delete row without page refresh.
      * Set JAVASCRIPTINTERFACE = 1
   
   * Default for change rows flag: =on=, =off=, =add=
      * Set CHANGEROWS = on

   * Default flag for quiet save option: =on= to show the Quiet Save button, =off= to hide
      * Set QUIETSAVE = on

   * Default edit button: Specify =button text=, or specify =alternate text, image URL=. Note: Texts inside =%<nop>MAKETEXT{}%= are translated into other languages.
      * #Set EDIT_BUTTON = %MAKETEXT{"Edit table"}%
      * Set EDIT_BUTTON = %MAKETEXT{"Edit this table"}%, %ATTACHURL%/edittable.gif
      * Set SAVE_BUTTON = %MAKETEXT{"Save table"}%
      * Set QUIET_SAVE_BUTTON = %MAKETEXT{"Quiet save"}%
      * Set ADD_ROW_BUTTON = %MAKETEXT{"Add row"}%
      * Set DELETE_LAST_ROW_BUTTON = %MAKETEXT{"Delete last row"}%
      * Set CANCEL_BUTTON = %MAKETEXT{"Cancel"}%

   * Default help texts
      * Set INCLUDED_TOPIC_DOES_NOT_EXIST = <span class="twikiAlert">%MAKETEXT{"Warning: 'include' topic does not exist!"}%</span>
   
__Note:__ The Plugin uses base settings like date format, language and style from the JSCalendarContrib.

---++ Limitations and Known Issues

   * This Plugin does not support TWiki table formatting like Multi-span cells (e.g. =| ... ||=) and cell justification (e.g. =|  centered  |   right |=)
   * There is a performance issue when editing a large table, say, with more then 50 rows
   * Variables like =%<nop>ATTACHURL%= get expanded unless they are in a label
   * You cannot put two =%<nop>EDITTABLE{}%= statements on the same line in the source
   * You can include %-vars now in select values, by quoting them with &lt;nop&gt;, as in %&lt;nop&gt;X% for %<nop>X%, say for instance:
     <br /> =select,1,%&lt;nop&gt;X%,%&lt;nop&gt;Y%=



---++ Installation Instructions

   * Download the ZIP file from the Plugin web (see below)
   * Unzip ==%TOPIC%.zip== in your ($TWIKI_ROOT) directory.
   * Alternatively,
      * Manually resolve the dependencies listed below.
      None
   * The Plugin depends on the =viewauth= script to authenticate the user. As described in %TWIKIWEB%.TWikiAccessControl, copy the =view= script to =viewauth= (or better, create a symbolic link) and add =viewauth= to the list of authenticated scripts in the =.htaccess= file.
   * (Dakar) Visit =configure= in your TWiki installation, and enable the plugin in the {Plugins} section.
   * Test if the Plugin is correctly installed:
      * Check above example if there is an *[&nbsp;Edit&nbsp;table&nbsp;]* button below the table in above example
      * Click on *[&nbsp;Edit&nbsp;table&nbsp;]*, make changes and save the table

---++ License

   * The Edit Table Plugin is released under the [[http://www.gnu.org/licenses/gpl.html][GPL]]


---++ Plugin Info

|  Plugin Author: | TWiki:Main/PeterThoeny |
|  Copyright: | &copy; 2002-2007, TWiki:Main.PeterThoeny ([[http://www.twiki.net/][TWIKI.NET]]) and TWiki Contributors |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Plugin Version: | 4.7.10 (08 Jan 2008) |
|  Change History: | <!-- specify latest version first -->&nbsp; |
|  25 Dec 2007: | 4.7.1: Arthur Clemens: Added warning if =include= parameter topic does not exist. |
|  22 Dec 2007: | 4.7: Arthur Clemens: Changed handling of escaped variables. To escape TWiki variable, use formatting tokens such as =$percnt=. |
|  16 Dec 2007: | 4.6:  Kenneth Lavrsen: The plugin prevents TablePlugin from initsorting the table being edited. This is done by temporarily appending the attribute disableallsort="on" to the TABLE tag of a table being edited. Additionally all header sorting is disabled while editing a table by setting a hidden formfield =sort= to "off". Disabling sorting while editing is needed now that the EditTablePlugin supports moving rows up and down. |
|  01 Dec 2007: | 4.3:  Arthur Clemens: added support for TablePlugin =headerrows= and =footerrows=; updated edit button |
|  16 Oct 2007: | 4.2:  Arthur Clemens: refactoring, bug fixes. |
|  07 Oct 2007: | 15182: PTh: Added %TWIKIWEB%.VarEDITTABLE to have it listed in %TWIKIWEB%.TWikiVariables |
|  15 Mar 2007: | Arthur Clemens: Fixed eating of double newlines; icons for javascript buttons and interface improvements. By default the javascript interface is turned off, set =JAVASCRIPTINTERFACE= to use it in edit mode. |
|  05 Mar 2007: | Byron Darrah: Added ability to dynamically move and delete rows. |
|  12 Oct 2006: | <a rel="nofollow" href="http://develop.twiki.org/~develop/cgi-bin/view/Bugs/Item2982">Item2982</a> Use default date format from JSCalendarContrib |
|  02 Oct 2006: | <a rel="nofollow" href="http://develop.twiki.org/~develop/cgi-bin/view/Bugs/Item2884">Item2884</a> Check also for access permission in meta data; proper fix to not warn if oneself has a lock on topic |
|  30 Aug 2006: | <a rel="nofollow" href="http://develop.twiki.org/~develop/cgi-bin/view/Bugs/Item2829">Item2829</a> Remove whitespace from select, radio and checkbox items; restored topic lock if $TWiki::Plugins::VERSION < 1.1 |
|  29 Jul 2006: | <a rel='nofollow' href='http://develop.twiki.org/~develop/cgi-bin/view/Bugs/Item2684'>Item2684</a> - Quietly ignore topic edit locks on table edit |
|  21 Jan 2006: | TWiki:Main.CrawfordCurrie ported to TWiki-4.0.0, changed to use JSCalendarContrib |
|  16 Sep 2004: | Added radio buttons and checkbox controls; escaped "%VBAR%" pipe symbol found in input fields to preserve tables |
|  01 Aug 2004: | Fixed bug where edittable did not work if at the end of a topic |
|  07 Apr 2004: | Fixed bug where two tables got updated when you edit and save a table included into a topic containing other edit tables |
|  02 Mar 2004: | Default for =%<nop>EDITCELL{editbutton}%= is EDITBUTTON preference |
|  27 Feb 2004: | Added QUIETSAVE setting and =quietsave= parameter; image for Edit button |
|  18 Feb 2004: | Doc fixes; allow edit button anywhere in a cell not just at the end of a cell |
|  17 Feb 2004: | Added per cell definition of edit field types with =%<nop>EDITCELL{}%= variable; added =headerislabel= and =editbutton= parameters |
|  20 Dec 2003: | Fixed bug where calendar did not work after adding a row (TWiki:Main/PaulineCheung); added all language files of Mishoo DHTML calendar 0.9.5 |
|  13 Dec 2003: | Added CHANGEROWS, JSCALENDARDATEFORMAT, JSCALENDARLANGUAGE, JSCALENDAROPTIONS settings |
|  16 Oct 2003: | small typo fixed (garbled if ---<nop>+ header on top) |
|  15 Oct 2003: | new date field type with javascript calendar - CN |
|  14 Oct 2003: | docfix: the documentation page was an old one - CN |
|  13 Oct 2003: | bugfix: %-vars in select were resetted to first on add/del row - CN |
|  18 Sep 2003: | incompatibility: changed default of =changerows= to =on=; support for %-vars, Quiet save for saving without notification; all other fixes in Dev topic integrated - CN |
|  08 Nov 2002: | Prevent variable expansion in label text; added escape characters |
|  27 Jun 2002: | New =helptopic= parameter |
|  26 Jun 2002: | Support for variables in included EDITTABLE parameters; fixed problem with HTML in cells |
|  21 May 2002: | Added fixed label format; new =changerows="add"= parameter |
|  27 Apr 2002: | Fixed bug where text after a double quote in a cell disappeared |
|  18 Apr 2002: | Fixed bug where table was breaking when pasting multiple lines into an edit field using Netscape on Unix |
|  08 Apr 2002: | Check for change permission and edit lock of topic |
|  05 Apr 2002: | Initial version |
|  Dependencies: | None |
|  Perl Version: | 5.0 |
|  TWiki:Plugins/Benchmark: | %TWIKIWEB%.GoodStyle 98%, %TWIKIWEB%.FormattedSearch 98%, %TOPIC% 95% |
|  Plugin Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__  %TWIKIWEB%.VarEDITTABLE, %TWIKIWEB%.TWikiPreferences, %TWIKIWEB%.TWikiPlugins

-- TWiki:Main/PeterThoeny - 07 Oct 2007
This topic: TWiki > EditTablePlugin
Topic revision: r14 - 07 Oct 2007 - 05:04:39 - TWikiContributor
Copyright � by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.EditTablePlugin