---+!! 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 *[ Edit table ]* 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 By default, variables in =<initial value>= (of text input field) and =<label text>= (of fixed label) get expanded when a new row is added. This can be used for example to add a timestamp to a label. You can escape characters with format tokens if you do not want that. Any TWiki variable inside a table cell will be preserved. For instance, =%<nop>TOPIC%= will not get expanded to the current topic name. The format tokens are the same as with %TWIKIWEB%.FormattedSearch: | *Escape:* | *Expands To:* | | =$n= or =$n()= | New line. Use =$n()= if followed by alphanumeric character, e.g. write =Foo$n()Bar= instead of =Foo$nBar= | | =$nop= or =$nop()= | Is a "no operation". | | =$quot= | Double quote (="=) | | =$percnt= | Percent sign (=%=) | | =$dollar= | Dollar sign (=$=) | #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 *[ Edit table ]* 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;etedit=on&amp;etrows=3&amp;x=27&amp;y=13&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;etedit=on&amp;etrows=3&amp;x=27&amp;y=13&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;etedit=on&amp;etrows=3&amp;x=27&amp;y=13&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;etedit=on&amp;etrows=3&amp;x=27&amp;y=13&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;etedit=on&amp;etrows=3&amp;x=27&amp;y=13&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> %TABLE{"headerrows="1"}% %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><plugin>_<setting>%==, 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. Can be overridden with parameter =javascriptinterface=. * 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 * 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 <nop>, as in %<nop>X% for %<nop>X%, say for instance: <br /> =select,1,%<nop>X%,%<nop>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 *[ Edit table ]* button below the table in above example * Click on *[ Edit table ]*, 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: | © 2002-2008, 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.8.4 (03 Aug 2008) | | Change History: | <!-- specify latest version first --> | | 03 Aug 2008: | 4.8.4 TWiki 4.2.1 release version | | 19 Jul 2008: | 4.8.3 Bugfix release | | 20 Mar 2008: | 4.8: Arthur Clemens: Code refactoring; disabled table sort when editing; removed usage of =$percnt= to prevent variable expansion (is now done automatically); made Javascript interface aware of headers and footers, and of =changerows="off"=; improved feedback on row move. | | 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
This topic: TWiki
>
EditTablePlugin
Topic revision: r15 - 2007-10-07 - TWikiContributor
Copyright © 1999-2024 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
.