Browser Tutorial Search and Filter (en)¶

Colored search words¶

Tree view and select boxes¶

The Browser enables you, to move every category table to a filter.

In the illustration above are four category tables used, the first one is tree view, the other three are usual checkboxes.

The Browser filter modul enables you to use hierarchical checkboxes.

The illustration above displays filter in a so called depending mode: Items without any hit won't displayed.

You can configure, if hits should displayed or not.

See the tutorial 'Green Cars - Dynamic Filter' on page 41 below.

Check boxes¶

Category menu and areas¶

The illustration above displays a category menu: a filter in form of a list.

And this list is an area. Area means values from one value to a value like from the first day of this week to the last day of this week.

Search¶

• Searching in displayed and in non displayed columns.

• Searching for words and phrases. Example:

  • Sword: "My Phrase" Word another word
  • Will search for "My Phrase" or "Word" or "another" or "word".

• Illustration 8: Tutorial in PDF format

  The search is case insensitive.

• The search is configurable:

  • You can search in every column of every table. It doesn't matter, if table or field are displayed in the current view.
  • You can configure the search form and the colours of the result items among others.

Filter¶

Filter your data by category menus, checkboxes, radiobuttons, selectboxes and treeviews

• Filter are configurable. Examples for possibilities:
  • Items are cObjects
  • You can add a first item like "All Cars"
• Filter are dynamically. If there isn't any hit, filter items won't be displayed. It's configurable.
• Filter count hits. It's configurable.
• Filter can handle data areas. Example for a data area: from January to December, from 10.000 EUR to 20.000EUR

This tutorial in PDF format¶

You find this manual as PDF file at

• doc/manual.pdf
• http://typo3-browser.de/typo3conf/ext/browser_tut_search_en/doc/ma nual.pdf

Browser Manual and Browser Tutorial Basics¶

Manual: The Browser has it's own manual (with the reference of course).

• HTML: http://typo3.org/extension-manuals/browser_manual_en/current/
• PDF: http://typo3-browser.de/typo3conf/ext/browser_manual_en/doc/ma nual.pdf

Requirements¶

You need

• the extension Browser of course
• the extension tt_news :sup:`0 <#sdfootnote1sym>`_
• a page with
  • the plugin browser
    • set in the tab [General] the type of the header to hidden
    • set in the tab [Plugin] the startingpoint to your sysfolder with the news records
  • an extension template
    • with the include static template of the browser
    • and in the setup field the TypoScript from below.

TypoScript¶

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news.title, tt_news_cat.title

}

}

single {

1 {

select = tt_news.title, tt_news.short, tt_news.bodytext, tt_news_cat.title

}

}

}

}

This is the TypoScript for

• a list view with the fields tt_news.title and tt_news_cat.title and
• a single view with the fields tt_news.title, tt_news.short, tt_news.bodytext, tt_news_cat.title.

Result in the Frontend¶

The Result in the frontend should look like the screen shot below, if you are using the German language:

Example with two words¶

Search for the words: Browser Erweiterung

Example with seven words¶

Search for seven words: Browser Erweiterung Bequem durch die Daten browsen

With words and phrases¶

Search for words and phrases: Browser Erweiterung "Bequem durch die Daten browsen"

Configuring with the Plugin¶

Plugin Tab [Lists]

Set the Search mode to [Configured]

List without any Search Form¶

Search Form without any Result Phrase¶

Configuring the Result Phrase¶

If you want change the phrase of the result phrase, please configure

plugin.tx_browser_pi1.displayList.display.searchform.resultPhrase {

searchFor.value = Search for

searchFor.lang.de = Suche nach

...

}

Search results with other Colors¶

If you like to want less, more or other colors for the search result, please configure the array wrapSwordInResult.

Be aware that displayList and displaySingle have there own search form array.

// List View

plugin.tx_browser_pi1.displayList.display.searchform {

searchform {

wrapSwordInResults {

0 {

wrap = <span style="background:#ffff7f">|</span>

}

1 {

wrap = <span style="background:#b3ffb2">|</span>

}

...

}

}

}

// Single View

plugin.tx_browser_pi1.displaySingle.display.searchform {

searchform {

wrapSwordInResults {

0 {

wrap = <span style="background:#ffff7f">|</span>

}

1 {

wrap = <span style="background:#b3ffb2">|</span>

}

...

}

}

}

Example¶

You want to display in the list view only the fields: tt_news.title, tt_news_cat.title.

But the visitor should search in the fields: tt_news.title, tt_news.short, tt_news.bodytext.

TypoScript¶

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news.title, tt_news_cat.title

search = tt_news.title, tt_news.short, tt_news.bodytext

}

}

}

}

The Minimum Length of a Sword Word¶

The default for the minimum length of a sword word is three chars. If a word is shorter, it will be removed from the sword.

If you want to increase or decrease the minimum length, please configure minLenWord:

plugin.tx_browser_pi1.advanced {

security {

sword {

minLenWord = 3

}

}

}

MySQL Security: add Slashes¶

The Browser secures swords with the PHP method mysql_real_escape_string().

mysql_real_escape_string() adds slashes to x00, n, r, , ', " and x1a, but not to %.

The Browser adds a slash to % too. If you don't like it, please configure csvChars:

plugin.tx_browser_pi1.advanced {

security {

sword {

addSlashes {

csvChars = %

}

}

}

}

If you need slashes for more than the %, please add the chars to csvChars comma separated like in the code below:

plugin.tx_browser_pi1.advanced {

security {

sword {

addSlashes {

csvChars = %, `, ´

}

}

}

}

Both have the same Effect¶

There is no difference between filters and a category menu in principle. Both enables the visitor of your website to search structured. Structured means:

Visitors can limit the amount of records – they can search for data – by given categories like:

• Display all news with the category “society”.
• Display all events, which will happen “next week”.

The difference between filters and a category menu isn't the effect but the rendered HTML code.

Filters are a Part of an HTML Form¶

Filters have to be rendered as a COA object CHECKBOX, RADIOBUTTON or SELECTBOX. All of them are a part of an HTML form. Non item of them will be rendered as a link directly. All of them have to be placed within the Marker ###SEARCHBOX###.

A Category Menu is a List of Links¶

Every item of a CATEGORY_MENU will be rendered as a link like the items of your main menu. A CATEGORY_MENU isn't a part of a form. A link doesn't contain any filter criteria of any other filter.

Extension Radial Search (Umkreissuche)¶

• Install the extension Radial Search (Umkreissuche) and enable it.

• Add a folder "Radialsearch" to your page tree. It will needed for storing the postal code data.

• Add a folder "Radialsearch" to your file list. It will needed for the postal code *.txt-file.

• Maintain the property [Database] of the extension manager.

  • You have to upload a file with the needed postal codes.
  • The workflow should be self-explained.

• Include the Static Template and take care of the ordering :sup:`0 <#sdfootnote3sym>`_ :

  • Radial Search (radialsearch)
  • Browser (browser)

• Maintain the properties of the Constant Editor of the page, where you like to use Radial Search (Umkreissuche)

  You have to disable the jQuery UI CSS only, because your are controlling the CSS by the Browser plugin.See category [RADIAL SEARCH – CSS] > field: CSS jQuery UI file

TypoScript¶

Example with worldwide postal codes¶

Postal codes near by 1.2 million :sup:`0 <#sdfootnote5sym>`_ records and a database with 540 address records

• Query with filter and without a radial search needs round about 0.03 seconds
• Query with filter and a radial search needs round about 1.3 seconds

Example with Postal Codes of Germany¶

Postal codes near by 16 000 :sup:`0 <#sdfootnote6sym>`_ records, database with 540 address records

• Query with filter and without a radial search needs round about 0.03 seconds
• Query with filter and a radial search needs round about 0.05 seconds

Installing¶

• Install the extension "Record tree for TCA" (extkey: cps_tcatree).
• Enable the extension.

Define the dependency in ext_emconf.php¶

Define the dependency to cps_tcatree in the configuration of your extension. The definition of the dependency isn't obligatory but is best practise. See lines 'dependencies' and 'constraints' in the snippet below. The file is ext_emconf.php.

wwwrun@s15315906 : .../typo3conf/ext/green_cars> nano ext_emconf.php

<?php

...

$EM_CONF[$_EXTKEY] = array(

...

'dependencies' => 'browser, cps_tcatree ',

...

'constraints' => array(

'depends' => array(

'browser' => '3.9.6-0.0.0',

'cps_tcatree' => '0.3.0-0.0.0',

),

...

),

?>

Make the parent uid known to other tables¶

Tables which are connected with the manufacturer table, has to know about the parent uid of the manufacturer table. We configure ext_tables.php like in the TCA snippet below. See the line with 'treeParentField':

wwwrun@s15315906 : .../typo3conf/ext/green_cars> nano ext_tables.php

...

$TCA['tx_greencars_manufacturer'] = array (

'ctrl' => array (

'title' => 'LLL:EXT:green_cars/locallang_db.xml:tx_greencars_manufacturer',

'label' => 'title',

'tstamp' => 'tstamp',

'crdate' => 'crdate',

'cruser_id' => 'cruser_id',

'treeParentField' => 'uid_parent',

...

),

);

...

For your background: The configuration of 'treeParentField' is a demand of the extension cps_tcatree. And it is a demand of the extension TYPO3 Browser, which is using the TCA based on cps_tcatree.

Extend the TCA form¶

You have to edit two items and to add the field configuration.

Please add the field name 'uid_parent' to

• showRecordFieldList
• types. X

wwwrun@s15315906 : .../typo3conf/ext/green_cars> nano tca.php

...

$TCA['tx_greencars_manufacturer'] = array (

...

'interface' => array (

'showRecordFieldList' => 'hidden,title, uid_parent '

),

...

'columns' => array (

...

'uid_parent' => array (

'exclude' => 0,

'label' => 'LLL:EXT:green_cars/locallang_db.xml:tx_greencars_manuf acturer.uid_parent',

'config' => array (

'type' => 'select',

'form_type' => 'user',

'userFunc' => 'tx_cpstcatree->getTree',

'foreign_table' => 'tx_greencars_manufacturer',

'treeView' => 1,

'expandable' => 1,

'expandFirst' => 0,

'expandAll' => 0,

'size' => 1,

'minitems' => 0,

'maxitems' => 2,

'trueMaxItems' => 1,

),

),

...

),

'types' => array (

'0' => array('showitem' => 'hidden;;1;;1-1-1, title;;;;2-2-2, uid_parent ')

),

...

);

...

If you take for the label of the field uid_parent a LLL-value like in the snippet above, please add the value to your locallang file.

If you want to know more about the configuration and possibilities of the uid_parent field, please refer to the manual of the cps_tcatree.

Update your extension¶

You have to update your extension like in the illustration below. The field "uid_parent" will added to the manufacturer SQL table.

Ready for tree ordering!¶

Clear the Cache of your TYPO3 backend.

Open the manufacturer form. You will get a result similar to the illustration below.

You job is now, to add models and to allocate manufacturers.

After finishing you should have a result like in the illustration below.

Local table with tree view¶

tx_greencars_main.manufacturer is connected with the manufacturer table in our example green_cars.

We have to update the configuration of the field manufacturer of the table tx_greencars_main in the TCA. See the snippet below.

wwwrun@s15315906: .../typo3conf/ext/green_cars> nano tca.php

...

$TCA['tx_greencars_main'] = array (

...

'columns' => array (

...

'manufacturer' => array (

'exclude' => 0,

'label' => 'LLL:EXT:green_cars/locallang_db.xml:tx_greencars_main. manufacturer',

'config' => array (

'type' => 'select',

'minitems' => 0,

'size' => 3,

'maxitems' => 5,

'form_type' => 'user',

'userFunc' => 'tx_cpstcatree->getTree',

'treeView' => 1,

'expandable' => 1,

'expandFirst' => 1,

'expandAll' => 0,

'foreign_table' => 'tx_greencars_manufacturer',

'foreign_table_where' => 'AND 1 ORDER BY tx_greencars_manufacturer.uid',

'suppress_icons' => 1,

'wizards' => array(

...

),

)

),

...

If you want to know more about the configuration and possibilities of the uid_parent field, please refer to the manual of the cps_tcatree.

The form should look like in the illustration below now.

HTML template¶

You have to add a table field marker to the HTML template within the search form section. See the line with the marker ###TX_GREENCARS_MANUFACTURER.TITLE### in the HTML snippet below.

wwwrun@s15315906: .../typo3conf/ext/green_cars> nano res/default.tmpl

...

<!-- ###SEARCHFORM### begin -->

<div class="searchbox searchbox-###VIEW###-###MODE###">

<form action="###ACTION###" method="post" >

<fieldset>

<legend>###MY_SEARCH_LEGEND###</legend>

<input type="hidden" name="no_cache" value="1" />

<input class="sword" type="text" name="tx_browser_pi1[sword]"onfocus="if(this.value =='###SWORD_DEFAULT###') this.value=''"value="###SWORD###" />

<input class="button" type="submit" value="###BUTTON###" />

<input class="reset" type="button"

onclick="location='###MY_URL###'" value="###MY_RESET###" />

<!-- Add filter with the ###TABLE.FIELD### syntax and configure your filter

with TypoScript -->

<br />

###TX_GREENCARS_MANUFACTURER.TITLE###

###TX_GREENCARS_TYPE.TITLE###

###TX_GREENCARS_ENGINE.TITLE###

###TX_GREENCARS_PRICEBRACKET.TITLE###

</fieldset>

...

TypoScript¶

Result¶

The illustrations below displays an example with the tree view in the initial mode (collapsed) and after opening the folders "root" and the manufacturer "Volkswagen".

The design depends on your CSS.

jsTree homepage¶

If you want to know more about jsTree, please refer to

http://www.jstree.com/

Provided themes¶

jsTree provides four themes by default:

• apple
• classic
• default
• default-rtf (rtf means right to left. Some languages will be written from right to left).

Select a provided theme¶

Please choose a provided theme by the TypoScript Constant Editor. See "TypoScript Object Browser" on page 17 above.

If you have an individual theme, please configure the property in the setup directly. See

plugin.tx_browser_pi1.javascript.jquery.plugins.jstree.library.marke r.theme.value = apple

Own theme¶

You may design your own theme. You have to place the theme or themes in a folder of your choice. Than configure the path to this folder by the TypoScript Constant Editor.

See "TypoScript Object Browser" on page 17 above.

Controlling by the HTML id¶

A tree view is controlled by the HTML id. The Browser filter module has prepared five ids.

They are configurable by the TypoScript Constant Editor, because the ids are used in the TypoScript at several properties.

TypoScript Object Browser¶

If you use a second filter as a tree view menu, please move the html_id from ...01 to ...02. See the snippet below.

plugin.tx_browser_pi1 {

views.list.1.filter {

your_table {

your_field {

treeview {

html_id {

value = {$plugin.tx_browser_pi1.jQuery.plugin.jstree.selector_ 02 }

}

}

}

}

}

}

Same procedure for any other tree view. Please use

• ...03
• ...04
• ...05

If you aren't familiar with TypoScript constants, please refer to the paragraph below.

TypoScript Constant Editor¶

Usually there isn't any need to change an id for a tree view. If you have special needs for CSS, it is recommended to change the id supported by the TypoScript Constant Editor, but not by the TypoScript Object Browser.

Five tree view per page are applicabled¶

The TYPO3 Browser is applicabeld for five tree views per page.

Applicabeld means:

• TypoScript is prepared
• jQuery is prepared

If you like to use more than five tree views per page, you have to extend TypoScript and jQuery. But sorry: this isn't part of this tutorial.

More than one tree view per page¶

You have to take care for the id of the div wrap of the tree view by your own. You have to update or extend the CSS for the jstree id.

No path is calculated¶

You have to allocate an item to the category, each node and the root.

Example:

You have a database with cars and a category tree like

manufacturer [root]

model [node]

car parts [category]

You like to categories a rear brake for a Volkswagen Golf V.

You have to allocate the item to the root, each node and the category:

Volkswagen [id 37]

Golf V [id 1423]

breaks [id 23412]

The parent uid field of the item must contain the ids 37, 1423, 23412 (the order is unimportant and it hasn't any effect for the frontend).

AJAX¶

Don't use AJAX. You will get unexpected results.

Please disable AJAX in the plugin/flexform of the Browser tab [jQuery & AJAX].

Cookies¶

SELECTBOX¶

See the TypoScript on the next page.

CHECKBOX¶

RADIOBUTTONS¶

Exercise¶

We will change some TypoScript of the page http://gruene-autos.org/ for demonstration only.

See the examples below.

SELECTBOX (Default)¶

This is the start page of http://gruene-autos.org/

It has three filters designed as selectboxes. Each displays one item only (HTML property size is 1).

The TypoScript for the three selectboxes should be clear (see the snippet below).

SELECTBOXES size = 5¶

For a better understanding of dynamic filters we change the properties of each selectbox. We like to display five items per box and we remove the title (the first item). See the illustration below.

Change the Behaviour¶

Preconditions¶

We have configured a list view (and a single view of course) for the table tx_org_cal.

HTML Template¶

We have added the marker ###TX_ORG_CAL.DATETIME### to our HTML template into the filter section.

See section HTML Template on page 15 above.

TypoScript Snippet SELECTBOX¶

plugin.tx_browser_pi1 {

views {

list {

201 {

name = Calendar

select (

tx_org_cal.title,

tx_org_cal.datetime

)

csvLinkToSingleView = tx_org_cal.title

filter {

tx_org_cal {

datetime < plugin.tx_browser_pi1.displayList.master_templates.selectbox

}

}

}

}

...

}

}

TypoScript Snippet with Area¶

plugin.tx_browser_pi1 {

views {

list {

201 {

name = Calendar

select (

tx_org_cal.title,

tx_org_cal.datetime

)

csvLinkToSingleView = tx_org_cal.title

filter {

tx_org_cal {

datetime < plugin.tx_browser_pi1.displayList.master_templates.selectbox

datetime {

// Every item should be displayed even though it hasn't any hit

wrap.item.display_without_any_hit = 1

// Order the items by uid (and not by value)

order.field = uid

// Allocates the master template sample_period

area < plugin.tx_browser_pi1.displayList.master_templates.areas.sam ple_period

}

}

}

}

}

...

}

}

Properties and Possibilities¶

Please refer to the Reference AREAS on page 58 below.

TypoScript Default Code¶

// If condition is met, filter will display. If not, filter will hide.

condition = TEXT

condition {

// True (default)

value = 1

}

Example¶

The extension Organiser (extKey: org) provide documents for downloading. There are two steps for selecting an document:

The visitor has to select a category before viewing a list

The list has a category filter, but it shouldn't displayed if a category was selected before

We configure the condition like in the TypoScript snippet below:

• Line 11-12: We remove the default condition property and define a new condition property as a COA
• Line 14-31: The COA has two elements. Both elements have an if property.The if property checks if there is the global parametertx_browser_pi1[tx_org_downloadscat.title][0].. This parameter will sent, if a category is selected.If a category is selected (if.isTrue), the COA will return 0, any filter won't display.If any category is selected (if.isFalse), the COA will return 1, the filter will display.

All filter items will displayed by default¶

If counting is disabled, all filter items will displayed by default. Each filter has the property

wrap.item.displayInCaseOfNoCounting

If this property is enabled, each filter row get a flag. You can disable this behaviour. Set displayInCaseOfNoCounting to 0.

plugin.tx_browser_pi1 {

views.list.1.filter. table.field {

count_hits = 0

...

wrap {

item {

displayInCaseOfNoCounting = 0

}

}

}

}

master_templates¶

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      selectbox = SELECTBOX
      selectbox {
        ...
      }
    }
  }
}

plugin.tx_browser_pi1 {
  views {
    list {
      1 {
        select (
          fe_users.last_name,
          fe_users.first_name,
          fe_users.image,
          fe_groups.title,
          tx_org_management.title
        )
        filter {
          fe_groups {
            title < plugin.tx_browser_pi1.\
                    displayList.\
                    master_templates.selectbox
            title {
              first_item {
                stdWrap {
                  data >
                  value   = All Groups
                  lang.de = Alle Gruppen
                }
              }
              wrap = \
                <span class="selectbox">|</span>
              wrap {
                item {
                  stdWrap {
                    crop = 30 | ... | 1
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

CATEGORY_MENU¶

See Code of SELECTBOX below

CHECKBOX¶

See Code of SELECTBOX below

RADIOBUTONS¶

See Code of SELECTBOX below

SELECTBOX¶

See Code below

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      selectbox = SELECTBOX

SELECTBOX¶

See Code below

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      selectbox = SELECTBOX
      selectbox {
          // If condition is met, filter will display. If not, filter will hide.
        condition = TEXT
        condition {
            // True (default)
          value = 1
        }
        // [String/optional] Name for the piVar. Name must be unique.
        nice_piVar =
        // [String] OR || AND: OR (default)
        modeAndOr = OR
        // [Boolean] Should be added a default item?
        first_item = 1
        first_item {
          // [Boolean] 0: Item without any hit will not be displayed. 1: Any item will be displayed.
          display_without_any_hit = 1
          // [Boolean] 1: Items display the number of hits. 0: Items doesn't display any number of hits.
          display_hits = 0
          display_hits {
            // [Boolean] 1: Hits are displayed behind the item. \
                         0: Hits are displayed in front of the item.
            behindItem = 1
            stdWrap {
              noTrimWrap = | (|)|
            }
          }
          stdWrap {
            data = LLL:EXT:browser/pi1/locallang.xml:label_filter_firstitem_default
          }
          // [STRING, unique] Value attribute in the option tag (#11401)
          option_value = 0
        }
        // [Boolean] Should it be possible to select more than one item?
        multiple  = 0
        multiple {
          // [String] HTML code for multiple
          selected = multiple="multiple"
        }
        // [Integer] How many items should the select box display in the visible area?
        size = 1
        // [String] Wrap the object
        wrap = <div class="selectbox">###TITLE###|</div>
        wrap {
          // [Integer] Space characters from left margin in the HTML code
          nice_html_spaceLeft = 12
          title_stdWrap {
            // [String] Title of the object. If it shouldn't display, please delete the title array
            value = ###TABLE.FIELD###
            wrap  = <div class="selectbox_title">|</div>
          }
          // [String] Wrap the items
          object = \
            <select name="###TABLE.FIELD###" id="###ID###" size="###SIZE###"###MULTIPLE###>|</select>
          object {
            // [Integer] Space characters from left margin in the HTML code
            nice_html_spaceLeft = 14
          }
          // [String] Wrap one item
          item    = <option###CLASS######STYLE### value="###UID###"###ITEM_SELECTED###>|</option>
          item {
            // [Boolean] 0: Item without any hit will not be displayed. 1: Any item will be displayed.
            display_without_any_hit = 0
            // [Boolean] 1: Items display the number of hits.\
                         0: Items doesn't display any number of hits.
            display_hits = 1
            display_hits {
              // [Boolean] 1: Hits are displayed behind the item. \
                           0: Hits are displayed in front of the item.
              behindItem = 1
              stdWrap {
                noTrimWrap = | (|)|
              }
            }
            // [Integer] Space characters from left margin in the HTML code
            nice_html_spaceLeft = 16
            // [String] HTML code for a selected item
            selected = selected="selected"
            // [String] Default HTML class
            class =
            // [String] Default HTML style
            style =
            stdWrap {
              htmlSpecialChars = 1
              crop             = 60 | ... | 1
            }
          }
        }
        order {
          // [String] value || uid
          field = value
          // [String] ASC || DESC
          orderFlag = ASC
        }
        sql {
          // [String, SQL] And where statement. Example: \
               tt_news_cat.author.field LIKE 'A%' AND tt_news.uid < 99
          andWhere =
        }
        // [BOOLEAN] You have to allocate one of the areas of the master template.
        area = 0
      }
    }
  }
}

RADIOBUTONS¶

See Code of SELECTBOX above

filter. table.field. condition¶

plugin.tx_browser_pi1 {

views {

list {

1 {

filter {

your_table {

your_field < plugin.tx_browser_pi1.displayList.master_templates.selectbox

your_field {

// Remove the default condition

condition >

// Define your own condition

condition = COA

condition {

// See "Condition for a Filter" on page 47 above

areas¶

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      areas {
        sample_currency = 1
        sample_currency {
          strings = 1
          strings {
            // Configuration for a hard coded
            // currency area
          }
        }
        sample_period = 1
        sample_period {
          strings = 0
          strings {
            // Configuration for a hard coded
            // period
          }
          interval = 1
          interval {
            // Configuration for a relative period
          }
        }
      }
    }
  }
}

Example¶

Please refer to the section Organiser - Filter for a period (data area) on page above.

TypoScript Object Browser¶

Please use the TypoScript Object Browser, if you like to inspecting all properties.

Possibilities¶

See examples below.

areas¶

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      areas {
        sample_period = 1
        sample_period {
          interval = 1
          interval {
            // [BOOLEAN]: 1: dates are converted to\
                          timestamp. 0: undefined
            compare_wiTimeStamp = 1
            // [STRING] day, week, month, year
            case = year
            day {
              // Configuration for days
            }
            week {
              // Configuration for weeks
            }
            month {
              // Configuration for months
            }
            year {
              // Configuration for years
            }
          }
        }
      }
    }
  }
}

Day¶

See year below.

Week¶

See year below.

Month¶

See year below.

Year¶

Every period has the properties:

• start_period
• times_stdWrap
• value_stdWrap

Please inspect the TypoScript snippet below too become familiar with the properties and possibilities.

year {

start_period {

// [BOOLEAN] 1: Value is handled after stdWrap with php strtotime. 0: stdWrap only.

use_php_strtotime = 1

stdWrap {

// Examples with strtotime: -1 year, 2010, now, next year

value = -1 year

}

}

times_stdWrap {

// [INTEGER] Display the period n times

value = 3

}

value_stdWrap {

// [STRING] Leave it empty! It will be handled while runtime.

value =

// [STRING] See php method strftime

strftime = %Y

}

get_param {

// PHP date format: Please use numbers only! Y example: 2011

date_format = Y

}

}

Example¶

Please refer to the section Organiser - Filter for a period (data area) on page above.

Example for a requirement¶

You have the work flow:

• The visitor has to select a category before viewing a list
• The list shouldn't contain the category filter, if a category was selected before

See "Condition for a Filter" on page 47 above.

Category Menu¶

[3.9.6]

You can display a category menu as tree view.

You need the extension cps_tcatree. This extension enables to order items in a tree view in the TYPO3 backend.

See "Tutorial tree view" on page 21 above.

Checkbox¶

[4.1.21]

You can display a checkbox as tree view.

You need the extension cps_tcatree. This extension enables to order items in a tree view in the TYPO3 backend.

See "Tutorial tree view" on page 21 above.