TWiki Variables » Search » Category: Formatting & Rendering

BUBBLESIG -- show bubble box and user signature with profile picture icon

COLORPICKER{} -- color picker for use in HTML forms for TWiki applications

  • The %COLORPICKER{}% variable is handled by the ColorPickerPlugin.
  • Syntax: %COLORPICKER{ name="..." value="..." }%
  • Parameters:
    Parameter DescriptionSorted ascending Default Example
    Additional parameters can be supplied; they will be added to the HTML input field or the rectangular color block.
    class CSS class of input field or the rectangular color block (none) class="twikiInputField"
    value Initial color value, in hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). (none) value="#0000ff"
    name Name of input field (required) name="text_color"
    size Size of input field, in number of characters (browser default) size="8"
    style Style of input field or the rectangular color block (none) style="width: 190px; height: 32px"
    type Type of color widget:
    รข\x{fffd}ยข "below" - color picker is located below the input field;
    รข\x{fffd}ยข "popup" - pop-up a color picker window when clicking the button next to the input field
        (this uses very little vertical space);
    รข\x{fffd}ยข "view" - a read-only rectangular block colored in the color value (no color picker);
    รข\x{fffd}ยข "view-hex" - like view, in addition shows the color value as an RGB hexadecimal code (no color picker);
    type="below" type="view-hex"
  • Example:
    <form action="...">
    %COLORPICKER{ name="text_color" value="#123456" class="twikiInputField" type="popup" }%
    <form>
    Renders as:
  • Category: ApplicationsAndComponentsVariables, DatabaseAndFormsVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables, UIAndVisualizationVariables
  • Related: ColorPickerPlugin, TWikiForms (this topic)

COPY -- Copyright symbol

DASHBOARD -- build a dashboard with banner and boxes

DATEPICKER{} -- pop-up calendar to select a date for use in HTML forms

  • The %DATEPICKER{}% variable is handled by the DatePickerPlugin.
  • Syntax: %DATEPICKER{ name="..." value="..." }%
  • Parameters:
    Parameter Description Default Example
    name Name of input field.
    φ: No output is shown if the name parameter is missing, but the CSS and Javascript are loaded.
    (requiredφ) name="Start"
    value Initial date value. "" (today) value="2012-12-31"
    format Format of resulting date value.
    รข\x{fffd}ยข %a - abbreviated weekday name
    รข\x{fffd}ยข %A - full weekday name
    รข\x{fffd}ยข %b - abbreviated month name
    รข\x{fffd}ยข %B - full month name
    รข\x{fffd}ยข %C - century number
    รข\x{fffd}ยข %d - the day of the month (00 ... 31)
    รข\x{fffd}ยข %e - the day of the month (0 ... 31)
    รข\x{fffd}ยข %H - hour (00 ... 23)
    รข\x{fffd}ยข %I - hour (01 ... 12)
    รข\x{fffd}ยข %j - day of the year ( 000 ... 366)
    รข\x{fffd}ยข %k - hour (0 ... 23)
    รข\x{fffd}ยข %l - hour (1 ... 12)
    รข\x{fffd}ยข %m - month (01 ... 12)
    รข\x{fffd}ยข %M - minute (00 ... 59)
    รข\x{fffd}ยข %n - a newline character
    รข\x{fffd}ยข %p - "PM" or "AM"
    รข\x{fffd}ยข %P - "pm" or "am"
    รข\x{fffd}ยข %S - second (00 ... 59)
    รข\x{fffd}ยข %s - number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC)
    รข\x{fffd}ยข %t - a tab character
    รข\x{fffd}ยข %U, %W, %V - the week number. The week 01 is the week that has the Thursday in the current year, which is equivalent to the week that contains the fourth day of January. Weeks start on Monday.
    รข\x{fffd}ยข %u - the day of the week (1 ... 7, 1 = MON)
    รข\x{fffd}ยข %w - the day of the week (0 ... 6, 0 = SUN)
    รข\x{fffd}ยข %y - year without the century (00 ... 99)
    รข\x{fffd}ยข %Y - year including the century (ex. 2012)
    รข\x{fffd}ยข %% - a literal % character
    "%Y-%m-%d" format="%e %b %Y"
    id ID of input field, optional. "id_" + name id="idStart"
    size Size of input field, in number of characters. (calculated as needed) size="12"
    class CSS class of input field. "twikiInputField" class="dateField"
    Additional HTML input field attributes, such as alt, disabled, maxlength, onblur, onchange, onfocus, readonly, style, tabindex, title    
  • Example:
    <form action="...">
    %DATEPICKER{ name="Start_Date" }%
    <form>
  • Expands to:
  • Category: ApplicationsAndComponentsVariables, DatabaseAndFormsVariables, DateAndTimeVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables, UIAndVisualizationVariables
  • Related: DatePickerPlugin, TWikiForms (this topic)

ENDBG -- end background color section

ENDCOLUMNS -- end a responsive multi-column page layout

ENTITY{string} -- encode a string to HTML entities

  • Encode "special" characters to HTML entities. Useful to encode text properly for HTML input fields.
  • Encoded characters:
    • all non-printable ASCII characters below space, including newline ("\n") and linefeed ("\r")
    • Space
    • HTML special characters "<", ">", "&", single quote (') and double quote (")
    • TWiki special characters "%", "[", "]", "@", "_", "*", "=" and "|"
  • Syntax: %ENTITY{string}%
  • Example: %ENTITY{text with "quotes" and
    newline}%
    expands to text&#32;with&#32;&#34;quotes&#34;&#32;and&#10;newline
  • Notes:
    • To protect against cross-site scripting (XSS), always entity encode text intended for HTML input fields. This is especially true if text is received dynamically via URLPARAM or the like.
      Example: <input type="text" name="address" value="%ENTITY{any text}%" />
    • %ENTITY{string}% is roughly equivalent to %ENCODE{ "string" type="html" }%, but the latter cannot handle strings that have double quotes embedded in it.
  • Category: DevelopmentVariables, FormattingAndRenderingVariables, ExportAndPublishingVariables
  • Related: ENCODE, FORMFIELD, QUERYPARAMS, URLPARAM (this topic)

FORM{} -- render a TWiki form for view

  • Show a table containing data of a TWiki form attached to a topic
  • Syntax: %FORM{topic="..." formfields="..." ...}%
  • Supported parameters:                    
    Parameter: Description: Default:
    "..." or
    topic="..."
    Name of topic containing the TWiki form, such as "Bug1234". Specify topic name or Web.TopicName Current topic
    rev="..." Get the form from the specified topic revision, range "1" to top revision of topic. "0" is equivalent to the top revision The rev URL parameter value if present, else the top revision
    formfields="..., ..." Specify names of TWiki form fields to show, in sequence. The all token shows all remaining fields. "all"
    header="..." Form header, typically containing the form name. If "on", the default format " *[[$formweb.$formtopic][$formtopic]]* " is used. If "none", the header is suppressed. Supported variables:
    รข\x{fffd}ยข $formweb - name of web containing the form definition.
    รข\x{fffd}ยข $formtopic - name of topic containing the form definition.
    "on"
    format="..." Format of one form field. Supported variables:
    รข\x{fffd}ยข $title - raw field name (includes space and other special characters).
    รข\x{fffd}ยข $name - field name (sanitized title).
    รข\x{fffd}ยข $type - form field type.
    รข\x{fffd}ยข $size - size of field or selector.
    รข\x{fffd}ยข $value - form field value.
    รข\x{fffd}ยข $value(20, -<br />) - value hyphenated every 20 characters using separator -<br />.
    รข\x{fffd}ยข $value(30, ...) - value shortened to 30 characters.
    รข\x{fffd}ยข $length - length of form field value.
    รข\x{fffd}ยข $tooltip - tooltip message.
    รข\x{fffd}ยข $attributes - type attributes, such as H for hidden, M for mandatory.
    รข\x{fffd}ยข $formweb - name of web containing the form definition.
    รข\x{fffd}ยข $formtopic - name of topic containing the form definition.
    See details in TWikiForms#FormFieldTypes.
    " $title: $value "
    separator="..." Line separator. Variable $br expands to <br /> tag, and $n to a newline. "$n"
    default="..." Text shown when no form or form fields are found ""
    newline="$br" Convert newlines in textarea to other delimiters. Variable $br expands to <br /> tag, and $n to a newline. Other text is encoded based on encode parameter. "$br" if format is a TWiki table, else "\n"
    encode="html" Encode special characters in form field value into HTML entities. Additional encodings available: encode="quote", encode="moderate", encode="safe", encode="entity" and encode="url". See ENCODE for details. "" (no encoding)
    showhidden="..." Set to "on" to show also hidden form fields. ""
  • Examples:
    • %FORM{topic="%INCLUDINGTOPIC%"}% - show form data of the including topic (typically used in an included header)
    • %FORM{topic="Projects.SushiProject" formfields="Title, Status, Deadline" header="none"}% - show a subset of form fields
    • %FORM{format="$name" header="none" separator=", "}% - get all visible form field names as a list
  • Category: DatabaseAndFormsVariables, DevelopmentVariables, FormattingAndRenderingVariables
  • Related: EDITFORM, EDITFORMFIELD, ENCODE, ENTITY, FORMFIELD, META, METASEARCH, SEARCH, TWikiForms, FormattedSearch, QuerySearch, SearchHelp (this topic)

FOURCOLUMNS -- responsive four-column page layout

  • Write %FOURCOLUMNS% ...text... %ENDCOLUMNS% to get a page layout with four columns. The layout is responsive, e.g. it automatically adjusts to a lower number of columns (4 => 3 => 2 => 1) depending on the window width or screen width of the device used. The 300 pixels minimum width of a column determines the number of columns shown. Embedded images scale down automatically to the width of the screen if needed.
  • Syntax: %FOURCOLUMNS% ... %ENDCOLUMNS%
  • Example:
    %FOURCOLUMNS% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante ac augue sagittis semper. Vestibulum sed urna quam. Phasellus eleifend dolor id dui dictum lobortis. Etiam enim erat, fermentum eget libero non, pretium vestibulum nisi. Nam eget nisi diam. Cras egestas, nibh a malesuada hendrerit, tellus turpis gravida dolor, at fermentum ipsum libero id eros. Mauris a nunc turpis. Fusce turpis dui, blandit nec maximus at, sagittis et arcu. Duis eros sapien, accumsan sed varius eget, elementum eu sapien. Nulla congue, nulla efficitur gravida porta, leo ex feugiat purus, sit amet sagittis leo arcu at magna. Pellentesque eleifend, libero quis consectetur tincidunt, orci ipsum scelerisque turpis, vulputate feugiat risus orci non odio. Integer id enim turpis. Cras et nisl quis massa ornare maximus id sit amet justo. Mauris at mi eget nisi imperdiet ullamcorper. %ENDCOLUMNS%
  • Type: Preference variable - TWikiRenderingShortcut.
  • Category: FormattingAndRenderingVariables
  • Related: TWOCOLUMNS, THREECOLUMNS, ENDCOLUMNS, TWikiPreferences rendering shortcuts (this topic)

HIDE{text} -- hide content in topic view

  • Text inside the HIDE is removed when viewing the topic. This can be used to remove large amounts of text from being sent to the browser, such as the user list in Main.TWikiUsers if there are many thousands of users.
  • Syntax: %HIDE{ any text }%
  • Expands to: (empty string)
  • Notes:
    • Using HIDE is not a replacement for access control, because edit and raw view still show the content.
    • Variables inside HIDE still get expanded because variables execute inside out, e.g. you can't use it to speed up slow variables.
    • <!-- HTML comments --> also hide content from the user, but unlike HIDE, HTML comments are sent to the browser.
  • Category: FormattingAndRenderingVariables
  • Related: HIDEINPRINT, NOP, STARTSECTION (this topic)

HIDEINPRINT{text} -- hide content when printing

JQENDTAB -- end a JQuery tab within a tab pane

JQENDTABPANE -- end a JQuery tab pane

JQTAB -- start a JQuery tab within a tab pane

  • This variable is handled by the JQueryPlugin. For description see JQTABPANE
  • Syntax: %JQTABPANE% %JQTAB{"Tab 1"}% ... %JQENDTAB% %JQTAB{"Tab 2"}% ... %JQENDTAB% ... %JQENDTABPANE%
  • Supported parameters:
    Parameter: Description: Default:
    "..." Name of tab, shown as tab label (required)
    before When switching tabs, this is the Javascript fragment to be executed just before the tab is displayed ""
    after This Javascript handler is to be executed after the tab has been made visible ""
    afterload This Javascript handler will be called when content loaded asynchronously has finished loading (using the url parameter described below). Depending on the network latency and server response time, this can be significantly later than execution of the after handler above ""
    url Link from where to load the content of the tab asynchronously when selecting this tab; the result of the addressed handler will replace the content area; if no url is set the content of the TAB ... ENDTAB area will be shown when the tab is selected ""
    container Container element (".someClass" or "#someID") where content will be loaded asynchronously using Ajax; this is only used together with url ".jqTabContents"
    class Add additional class to existing tab class "jqTab" ""
  • Example: See complete example at JQTABPANE
  • Example: Asynchronously load the content of TimBernersLee topic into a tab content:
    %JQTABPANE%
    %JQTAB{ "Tim Berners-Lee" url="%SCRIPTURL{view}%/TWiki/TimBernersLee?skin=text" }%
    %ICON{processing}%
    %JQENDTAB%
    %JQENDTABPANE%
  • Category: ApplicationsAndComponentsVariables, FormattingAndRenderingVariables
  • Related: JQENDTAB, JQENDTABPANE, JQTABPANE, JQueryPlugin (this topic)

JQTABPANE -- start a JQuery tab pane

  • Create nice looking horizontal tab panes in TWiki topics. Write a sequence of %JQTAB{"..."}% and %JQENDTAB% pairs, and enclose them in %JQTABPANE% and %JQENDTABPANE%. Tab panes can be nested, e.g. within one tab you can add another tab pane. These variable are handled by the JQueryPlugin.
  • Syntax: %JQTABPANE{ select="1" }% %JQTAB{"Tab 1"}% ... %JQENDTAB% %JQTAB{"Tab 2"}% ... %JQENDTAB% ... %JQENDTABPANE%
  • Supported parameter:
    Parameter: Description: Default:
    select="" Select a tab pane, default is the first tab. "1"
  • Note: A tab can be selected with a tab URL parameter using %JQTABPANE{ select="%URLPARAM{tab}%" }%
  • Example:
    %JQTABPANE%
    %JQTAB{"Tab 1"}%
    Tab 1 content...
    %JQENDTAB%
    %JQTAB{"Tab 2"}%
    Tab 2 content...
    %JQENDTAB%
    %JQENDTABPANE%
  • Renders as:

    Tab 1

    Tab 1 content...

    Tab 2

    Tab 2 content...
  • Category: ApplicationsAndComponentsVariables, FormattingAndRenderingVariables
  • Related: JQENDTAB, JQENDTABPANE, JQTAB, JQueryPlugin (this topic)

LAQUO -- left double angle quote

NBSP -- non-breaking space

PARENTBC -- parent breadcrumbs for headings

RAQUO -- right double angle quote

REDBG -- start red colored background section

REG -- Registered Trademark symbol

THREECOLUMNS -- responsive three-column page layout

  • Write %THREECOLUMNS% ...text... %ENDCOLUMNS% to get a page layout with three columns. The layout is responsive, e.g. it automatically adjusts to a lower number of columns (3 => 2 => 1) depending on the window width or screen width of the device used. The 300 pixels minimum width of a column determines the number of columns shown. Embedded images scale down automatically to the width of the screen if needed.
  • Syntax: %THREECOLUMNS% ... %ENDCOLUMNS%
  • Example:
    %THREECOLUMNS% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante ac augue sagittis semper. Vestibulum sed urna quam. Phasellus eleifend dolor id dui dictum lobortis. Etiam enim erat, fermentum eget libero non, pretium vestibulum nisi. Nam eget nisi diam. Cras egestas, nibh a malesuada hendrerit, tellus turpis gravida dolor, at fermentum ipsum libero id eros. Mauris a nunc turpis. Fusce turpis dui, blandit nec maximus at, sagittis et arcu. Duis eros sapien, accumsan sed varius eget, elementum eu sapien. Nulla congue, nulla efficitur gravida porta, leo ex feugiat purus, sit amet sagittis leo arcu at magna. Pellentesque eleifend, libero quis consectetur tincidunt, orci ipsum scelerisque turpis, vulputate feugiat risus orci non odio. Integer id enim turpis. Cras et nisl quis massa ornare maximus id sit amet justo. Mauris at mi eget nisi imperdiet ullamcorper. %ENDCOLUMNS%
  • Type: Preference variable - TWikiRenderingShortcut.
  • Category: FormattingAndRenderingVariables
  • Related: TWOCOLUMNS, FOURCOLUMNS, ENDCOLUMNS, TWikiPreferences rendering shortcuts (this topic)

TM -- Trademark symbol

TWIKISHEET{} -- enable TWiki Sheet (spreadsheet) and set options

  • The %TWIKISHEET{}% variable is handled by the TWikiSheetPlugin
  • Syntax: %TWIKISHEET{ parameters }%
  • Supported parameters:
    Parameter Description Example Default
    mode Mode of operation:
    รข\x{fffd}ยข mode="classic" - regular TWiki table and an edit button; once pressed, the table switches into spreadsheet edit mode.
    รข\x{fffd}ยข mode="toggle" - spreadsheet in read-only mode and an edit button; once pressed, the table switches into spreadsheet edit mode.
    รข\x{fffd}ยข mode="toggle-edit" - like "toggle" but initial state is spreadsheet edit mode.
    รข\x{fffd}ยข mode="edit" - the table is always in spreadsheet edit mode.
    mode="edit" {Plugins}
    {TWikiSheetPlugin}
    {Mode}

    configure
    setting ("toggle")
    concurrent Concurrent editing. If enabled, multiple people can edit TWiki Sheet and see each other's changes. This includes editing cells, pasting a range of cells, drag-filling cells, adding/removing rows, adding/removing columns, and undo.
    รข\x{fffd}ยข concurrent="0" - disable concurrent editing; changes by others will be shown after a page reload.
    รข\x{fffd}ยข concurrent="1" - enable concurrent editing; changes by others will show up while editing TWiki Sheet.
    concurrent="1" {Plugins}
    {TWikiSheetPlugin}
    {ConcurrentEdit}

    configure
    setting ("0")
    save Optionally disable save; useful to demo the plugin save="0" save="1"
    width Table width in pixels; a horizontal scrollbar is added if needed width="500" (full window width)
    height Table height in pixels; a vertical scrollbar is added if needed height="300" (full table height)
    colHeaders Set to "false" to disable the default column headers (A, B, C); set to a function for custom headers, such as:
    colHeaders="function(index) { return String.fromCharCode(65+index) + ' (' + (index + 1) + ')'; }",
    which will show headers A (1), B (2), C (3), ...
    colHeaders="false" colHeaders="true"
    rowHeaders Set to "false" to disable the default row headers (1, 2, 3) rowHeaders="false" rowHeaders="true"
    contextMenu Defines the right-click context menu; set to "false" to disable; set to array of available strings, such as:
    contextMenu="['row_above', 'row_below', 'col_left', 'col_right', 'remove_row', 'remove_col', '---------', 'undo', 'redo']"
    contextMenu="false" contextMenu="true"
    fixedRowsTop Fixed number of rows shown on top; takes effect if height parameter is used fixedRowsTop="1" (none)
    fixedColumnsLeft Fixed number of columns shown on the left; takes effect if width parameter is used fixedColumnsLeft="2" (none)
    formulas Formula support; set to "false" to disable spreadsheet calculations in table cells, such as: =SUM(A1:A8) formulas="false" formulas="true"
    maxCols Maximum number of columns maxCols="10" (unlimited)
    maxRows Maximum number of rows maxRows="1000" (unlimited)
    minSpareCols When set to 1 (or more), automatically add a new column at the right if there are no more empty columns minSpareCols="1" minSpareCols="0"
    minSpareRows When set to 1 (or more), automatically add a new row at the bottom if there are no more empty rows minSpareRows="1" minSpareRows="0"
    wordWrap Word wrap; set to "false" to disable cell content wrapping if it does not fit in the fixed column width wordWrap="false" wordWrap="true"
    more... Additional Handsontable options can be used. Notes on types of values:
    รข\x{fffd}ยข Number value: Specify the number, such as width="500"
    รข\x{fffd}ยข String value: Enclose the string in single quotes, such as preventOverflow="'horizontal'"
    รข\x{fffd}ยข Boolean value: Specify "true" or "false", such as manualRowResize="true"
    รข\x{fffd}ยข Array value: Specify the array, such as manualRowResize="[40, 50]"
    รข\x{fffd}ยข Object value: Specify the object, such as columnSorting="{ column: 2, sortOrder: true }"
    รข\x{fffd}ยข Function: Specify the JavaScript function, such as:
       cells="function( row, col, prop ) { var cp = {}; if( row===0 ) { cp.readOnly = true; } return cp; }"
         
  • Example:
    %TWIKISHEET{ mode="edit" save="0" }%
    |  | 16Q1 | 16Q2 | 16Q3 | 16Q4 |
    | East: | 163 | 182 | 208 | 193 |
    | Center: | 82 | 97 | 126 | 91 |
    | West: | 217 | 231 | 294 | 249 |
    | Total: | =SUM(B2:B4) | =SUM(C2:C4) | =SUM(D2:D4) | =SUM(E2:E4) |
    | Min: | =MIN(B2:B4) | =MIN(C2:C4) | =MIN(D2:D4) | =MIN(E2:E4) |
    | Max: | =MAX(B2:B4) | =MAX(C2:C4) | =MAX(D2:D4) | =MAX(E2:E4) |
      screenshot.png
  • Category: DatabaseAndFormsVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables, TablesAndSpreadsheetsVariables
  • Related: See TWikiSheetPlugin for more details (this topic)

TWISTY{ attributes } -- dynamically open and close sections of content

TWOCOLUMNS -- responsive two-column page layout

  • Write %TWOCOLUMNS% ...text... %ENDCOLUMNS% to get a page layout with two columns. The layout is responsive, e.g. it automatically adjusts to a single column (2 => 1) depending on the window width or screen width of the device used. The 300 pixels minimum width of a column determines the number of columns shown. Embedded images scale down automatically to the width of the screen if needed.
  • Syntax: %TWOCOLUMNS% ... %ENDCOLUMNS%
  • Example:
    %TWOCOLUMNS% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante ac augue sagittis semper. Vestibulum sed urna quam. Phasellus eleifend dolor id dui dictum lobortis. Etiam enim erat, fermentum eget libero non, pretium vestibulum nisi. Nam eget nisi diam. Cras egestas, nibh a malesuada hendrerit, tellus turpis gravida dolor, at fermentum ipsum libero id eros. Mauris a nunc turpis. Fusce turpis dui, blandit nec maximus at, sagittis et arcu. Duis eros sapien, accumsan sed varius eget, elementum eu sapien. Nulla congue, nulla efficitur gravida porta, leo ex feugiat purus, sit amet sagittis leo arcu at magna. Pellentesque eleifend, libero quis consectetur tincidunt, orci ipsum scelerisque turpis, vulputate feugiat risus orci non odio. Integer id enim turpis. Cras et nisl quis massa ornare maximus id sit amet justo. Mauris at mi eget nisi imperdiet ullamcorper. %ENDCOLUMNS%
  • Type: Preference variable - TWikiRenderingShortcut.
  • Category: FormattingAndRenderingVariables
  • Related: THREECOLUMNS, FOURCOLUMNS, ENDCOLUMNS, TWikiPreferences rendering shortcuts (this topic)

USERSIG -- show user signature with profile picture icon

WIP -- work in progress icon

Total: 29 variables

Related Topics: TWikiVariables, TWikiVariablesSearch, TWikiVariablesQuickStart

 
This site is powered by the TWiki collaboration platformCopyright © 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.FormattingAndRenderingVariables