.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======================================= Browser Tutorial Search and Filter (en) ======================================= :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2014-05-01T03:42:23 :Classification: browser_tut_search_en :Description: Provide a search form and filters for your data on your website. The Browser - the TYPO3-Frontend-Engine - enables searching and filtering in every database. The Browser enables to search in areas like from last month to next month or from 10.000 EUR to 20.000 EUR. It enables a radial serach (Umkreissuche) in every database. Category menus can displayed in form of a tree view. :Keywords: forAdmins, forDevelopers, browser, typo3 without php, tutorial, search, filter, radial search, umkreissuche, treeview, areas :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| extKey: browser\_tut\_search\_en |img-3| .. _Browser-Tutorial-Search-and-Filter-en: Browser Tutorial Search and Filter (en) ======================================= Provide a search form and filters for your data on your website. The Browser - the TYPO3-Frontend-Engine - enables searching and filtering in every database. The Browser enables to search in areas like from last month to next month or from 10.000 EUR to 20.000 EUR. It enables a radial serach (Umkreissuche) in every database. Category menus can displayed in form of a tree view. |img-4| Version: 4.9.0, 2014-05-02 - Version is corresponding with the version of the Browser. Extension Key: browser\_tut\_search\_en - Tutorial for the extension Browser (extkey: browser) Language: en Keywords: forAdmins, forDevelopers, browser, typo3 without php, tutorial, search, filter, radial search, umkreissuche, treeview, areas Copyright 2009-2014, Dirk Wildt, Die Netzmacher, This document is published under the Open Content License available from `http://www.opencontent.org/opl.shtml `_ The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from `www.typo3.org `_ .. _Table-of-Contents: Table of Contents ----------------- `Browser Tutorial Search and Filter (en) 1 <#__RefHeading__12229_1904948122>`_ `Screen Shots 3 <#__RefHeading__12231_1904948122>`_ `Frontend 3 <#__RefHeading__13092_922500463>`_ `Backend 5 <#__RefHeading__13094_922500463>`_ `Introduction 6 <#__RefHeading__12239_1904948122>`_ `What does the Tutorial do? 6 <#__RefHeading__12241_1904948122>`_ `What does the Browser Search and Filter do? 6 <#__RefHeading__12243_1904948122>`_ `Further Information 6 <#__RefHeading__12245_1904948122>`_ `Tutorial search 7 <#__RefHeading__12251_1904948122>`_ `Example with tt\_news 7 <#__RefHeading__12253_1904948122>`_ `Test it! 8 <#__RefHeading__12261_1904948122>`_ `Configuring the search form 10 <#__RefHeading__12269_1904948122>`_ `Extending the search 12 <#__RefHeading__12281_1904948122>`_ `Search and filter 13 <#__RefHeading__19710_976858060>`_ `Security 13 <#__RefHeading__12287_1904948122>`_ `Tutorial filters and a category menu 14 <#__RefHeading__12293_1904948122>`_ `The Common Ground 14 <#__RefHeading__13564_976858060>`_ `The Difference 14 <#__RefHeading__13568_976858060>`_ `Workflow 14 <#__RefHeading__13574_976858060>`_ `HTML Template 15 <#__RefHeading__12301_1904948122>`_ `TypoScript 16 <#__RefHeading__12303_1904948122>`_ `TypoScript Object Browser 17 <#__RefHeading__3651_353271708>`_ `Tutorial Radial Search (Umkreissuche) 18 <#__RefHeading__3475_353271708>`_ `What does it do? 18 <#__RefHeading__9981_1850859471>`_ `Configuring 18 <#__RefHeading__9983_1850859471>`_ `Performance 20 <#__RefHeading__9985_1850859471>`_ `Tutorial tree view 21 <#__RefHeading__9987_1850859471>`_ `Hierarchical list, hierarchical checkbox 21 <#__RefHeading__19502_833091110>`_ `Restrictions 21 <#__RefHeading__18815_631209951>`_ `What does this tutorial do? 21 <#__RefHeading__7547_2105258750>`_ `Step overview 21 <#__RefHeading__7549_2105258750>`_ `cps\_tcatree 22 <#__RefHeading__7551_2105258750>`_ `Extending the SQL table manufacturer 22 <#__RefHeading__7557_2105258750>`_ `Extending the TCA configuration 23 <#__RefHeading__7559_2105258750>`_ `Frontend works 26 <#__RefHeading__7571_2105258750>`_ `Tree view in depth 30 <#__RefHeading__7579_2105258750>`_ `Based on the jQuery plugin jsTree 30 <#__RefHeading__7581_2105258750>`_ `Cookies 30 <#__RefHeading__10509_2105258750>`_ `Themes 31 <#__RefHeading__7583_2105258750>`_ `More than one tree view 32 <#__RefHeading__10517_2105258750>`_ `Disable the tree view / top level only 34 <#__RefHeading__6908_1478459716>`_ `How to add an own script? 35 <#__RefHeading__10519_2105258750>`_ `Use marker in your script 35 <#__RefHeading__10521_2105258750>`_ `Restrictions 35 <#__RefHeading__4415_865869582>`_ `Known bugs, unproper usability 36 <#__RefHeading__18720_833091110>`_ `More examples 37 <#__RefHeading__7585_2105258750>`_ `Quick Shop - 1 Filter 37 <#__RefHeading__8078_353271708>`_ `Green Cars - Dynamic Filter 41 <#__RefHeading__8080_353271708>`_ `Organiser - Filter for a period (data area) 45 <#__RefHeading__22584_354458180>`_ `Condition for a Filter 47 <#__RefHeading__5816_62016291>`_ `Configuring hits 49 <#__RefHeading__12305_1904948122>`_ `The difference between counting and displaying 49 <#__RefHeading__13096_922500463>`_ `Performance 49 <#__RefHeading__11806_922500463>`_ `Disable counting 49 <#__RefHeading__19504_833091110>`_ `cObject 50 <#__RefHeading__13100_922500463>`_ `Display conditions for a filter item 50 <#__RefHeading__13102_922500463>`_ `The "no value" label 50 <#__RefHeading__13104_922500463>`_ `Replace values 51 <#__RefHeading__13106_922500463>`_ `Configure or disable hits 51 <#__RefHeading__13108_922500463>`_ `Reference 52 <#__RefHeading__13110_922500463>`_ `master\_templates 53 <#__RefHeading__11019_182679940>`_ `CATEGORY\_MENU 54 <#__RefHeading__19871_976858060>`_ `CHECKBOX 54 <#__RefHeading__19873_976858060>`_ `RADIOBUTTONS 54 <#__RefHeading__11296_144712033>`_ `RADIAL SEARCH 55 <#__RefHeading__9989_1850859471>`_ `SELECTBOX 55 <#__RefHeading__11298_144712033>`_ `TREEVIEW 56 <#__RefHeading__19506_833091110>`_ `filter condition 57 <#__RefHeading__11644_62016291>`_ `AREAS 58 <#__RefHeading__15228_354458180>`_ `AREA - Period interval 59 <#__RefHeading__22596_354458180>`_ `AREA - Period hard coded 60 <#__RefHeading__22606_354458180>`_ `AREA - Currency hard coded 60 <#__RefHeading__22608_354458180>`_ `What's new in Version 4? 61 <#__RefHeading__7147_1026684304>`_ `Filter: AND 61 <#__RefHeading__8011_1026684304>`_ `Filter: Checkboxes for Selectbox 61 <#__RefHeading__42547_1751203740>`_ `Filter: cObject 61 <#__RefHeading__42549_1751203740>`_ `Filter: conditions 61 <#__RefHeading__13112_922500463>`_ `Filter: radial search (de: Umkreissuche) 61 <#__RefHeading__8015_1026684304>`_ `Filter: tree view 61 <#__RefHeading__8017_1026684304>`_ `What's new in Version 3.6? 63 <#__RefHeading__15236_354458180>`_ `Area and interval: get parameters with date 63 <#__RefHeading__11652_62016291>`_ `Category Menu 63 <#__RefHeading__14501_976858060>`_ `Configurable: Search respects Filters 63 <#__RefHeading__18247_976858060>`_ `Filter for areas 63 <#__RefHeading__11654_62016291>`_ `Filter for local table 63 <#__RefHeading__15240_354458180>`_ `Helpful suggestions 64 <#__RefHeading__12313_1904948122>`_ `Forum 64 <#__RefHeading__11300_144712033>`_ `Credits 65 <#__RefHeading__8088_353271708>`_ `dorn & malag 65 <#__RefHeading__8090_353271708>`_ `LEG Thüringen 65 <#__RefHeading__13076_1159297345>`_ `To-Do List 66 <#__RefHeading__12315_1904948122>`_ `Known bugs 67 <#__RefHeading__12317_1904948122>`_ `Change Log 68 <#__RefHeading__19508_833091110>`_ `Illustration Index 70 <#__RefHeading__12319_1904948122>`_ .. _Screen-Shots: Screen Shots ------------ .. _Frontend: Frontend ^^^^^^^^ .. _Colored-search-words: Colored search words """""""""""""""""""" |img-5| .. _Tree-view-and-select-boxes: Tree view and select boxes """""""""""""""""""""""""" |img-5| 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. |img-5| The Browser filter modul enables you to use hierarchical checkboxes. |img-5| 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: Check boxes """"""""""" |img-5| .. _Category-menu-and-areas: Category menu and areas """"""""""""""""""""""" |img-5| 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. .. _Backend: Backend ^^^^^^^ |img-5| .. _Introduction: Introduction ------------ .. _What-does-the-Tutorial-do: What does the Tutorial do? ^^^^^^^^^^^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser (extkey: browser). It is only a step-by-step introduction for the configuration of the search functionality and filters. If you are interested in other issues, please note the section "Further Informations" below. .. _What-does-the-Browser-Search-and-Filter-do: What does the Browser Search and Filter do? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Search: 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". - |img-6| 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 """""" 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 .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: 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: 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 `_ .. _Tutorial-search: Tutorial search --------------- .. _Example-with-tt-news: Example with tt\_news ^^^^^^^^^^^^^^^^^^^^^ .. _Requirements: 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: 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: Result in the Frontend """""""""""""""""""""" The Result in the frontend should look like the screen shot below, if you are using the German language: |img-5| .. _Test-it: Test it! ^^^^^^^^ Familiarize you with the search. .. _Example-with-two-words: Example with two words """""""""""""""""""""" Search for the words: Browser Erweiterung |img-5| |img-5| .. _Example-with-seven-words: Example with seven words """""""""""""""""""""""" Search for seven words: Browser Erweiterung Bequem durch die Daten browsen |img-5| |img-5| .. _With-words-and-phrases: With words and phrases """""""""""""""""""""" Search for words and phrases: Browser Erweiterung "Bequem durch die Daten browsen" |img-5| |img-5| .. _Configuring-the-search-form: Configuring the search form ^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Configuring-with-the-Plugin: Configuring with the Plugin """"""""""""""""""""""""""" |img-5| Plugin Tab [Lists] Set the Search mode to [Configured] .. _Comment: Comment ~~~~~~~ - Search: TutorialsDummy check box for information only. link to the online tutorial - Search: Form - [X] Display the form - [X] with result phraseResult phrase will appear below the form. - [X] with colored swords (list view)Search words will be colored in the list view. But there is an exclusion: Search words linked values won't be colored. - [ ] with colored swords (single view)Search words will be colored in the single view. But there are some exclusions: Search words in children records and linked values won't be colored. - Search: Checkpoint for colored search words in the single viewDummy check box for information only.If you have the search word in the URL, you can get different links to the same content. Search engines doesn't like it! - Search: wild-cards - Self-acting (recommended)Search words will wrapped with wild-cards by default - User have to add wild-cards - Search: char for a wild-cardYou can use another wild-card. Be aware that are conflicts with the SQL queries: '%' isn't possible for example. .. _List-without-any-Search-Form: List without any Search Form """""""""""""""""""""""""""" |img-5| |img-5| .. _Search-Form-without-any-Result-Phrase: Search Form without any Result Phrase """"""""""""""""""""""""""""""""""""" |img-5| |img-5| .. _Configuring-the-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: 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 = \| } 1 { wrap = \| } ... } } } // Single View plugin.tx\_browser\_pi1.displaySingle.display.searchform { searchform { wrapSwordInResults { 0 { wrap = \| } 1 { wrap = \| } ... } } } .. _Extending-the-search: Extending the search ^^^^^^^^^^^^^^^^^^^^ Usually visitors of a website can search in the displayed columns only. The Browser enables to search in every table and field you like - independing of the display mode. .. _Example: 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: 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 } } } } .. _Search-and-filter: Search and filter ^^^^^^^^^^^^^^^^^ By default the search doesn't respect any filter. This has an effect only, if you are using filters or a category menu. The effect is, that .. _Security: Security ^^^^^^^^ .. _The-Minimum-Length-of-a-Sword-Word: 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: 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 = %, \`, ´ } } } } .. _Tutorial-filters-and-a-category-menu: Tutorial filters and a category menu ------------------------------------ You can extend the search form with filters in form of - checkboxes, - radiobuttons and - selectboxes. And you can add a category menu to your HTML template within or without the search form. .. _The-Common-Ground: The Common Ground ^^^^^^^^^^^^^^^^^ .. _Both-have-the-same-Effect: 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. .. _The-Difference: The Difference ^^^^^^^^^^^^^^ .. _Filters-are-a-Part-of-an-HTML-Form: 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###. .. _AJAX: AJAX ~~~~ Because of AJAX filters have to stand outside the
. .. _A-Category-Menu-is-a-List-of-Links: 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. .. _Workflow: Workflow ^^^^^^^^ Add to your template the table.field, which should used as a filter or category menu You have to place it within the ###SEARCHBOX### marker, if you like to use a filter as a checkbox, radiobutton or selectbox. You have to place it within the ###SEARCHBOX### marker too, if you like to use a filter as a category menu. Add to your TypoScript the table.field Copy one of the Content Objects CATEGORY\_MENU, CHECKBOX, RADIOBUTTON, SELECTBOX or TREEVIEW from the master\_templates array to the table.field. Configure the category menu , checkbox, radiobuttons, selectbox or treeview. A good example for filters is the extension Green Cars. Green Cars provides the German case story "Fallstudie grüne-autos.org - Datenbank in drei Stunden". It explains very well, what you have to know, if you want to use filters. See - Extension Green Cars in the TYPO3 repository `http://typo3.org /extension-manuals/green\_cars/current/ `_ - Fall Studie "Grüne Autos" `http://gruene- autos.org/typo3conf/ext/green\_cars/doc/fall\_studie.pdf `_ |img-5| .. _HTML-Template: HTML Template ^^^^^^^^^^^^^ Add to your template the table.fields you want to use as filters like in the snippet below. See line 10 to 12. ###MY\_TITLE###
###TX\_BZDSTAFFDIRECTORY\_LOCATIONS.TITLE### ###TX\_BZDSTAFFDIRECTORY\_FUNCTIONS.TITLE### ###TX\_BZDSTAFFDIRECTORY\_GROUPS.GROUP\_NAME### ###RESULTPHRASE###
... ... .. _TypoScript: TypoScript ^^^^^^^^^^ Add the table.fields like in the snippet below. Line 6: Add the array filter.Line 7, 10, 13: Add the tables.Line 8, 11, 14: Add the fields.qLine 8, 11, 14: Copy to the fields the selectbox from the array master\_templates plugin.tx\_browser\_pi1 { views { list { 1 { ... filter { tx\_bzdstaffdirectory\_locations { title < plugin.tx\_browser\_pi1.displayList.master\_templates.checkbox } tx\_bzdstaffdirectory\_groups { group\_name < plugin.tx\_browser\_pi1.displayList.master\_templates.radiobuttons } tx\_bzdstaffdirectory\_functions { title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox } } ... } } } } .. _TypoScript-Object-Browser: TypoScript Object Browser ^^^^^^^^^^^^^^^^^^^^^^^^^ |img-5| If you want to configure a filter / select box, please open the field array in your TypoScript Object Browser. You will see a lot of commented properties like in the illustration below: |img-5| That's it! .. _Tutorial-Radial-Search-Umkreissuche: Tutorial Radial Search (Umkreissuche) ------------------------------------- .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ Radial Search (Umkreissuche) enables you, to search for records by distance. Your records must be geo-coded: they must have a latitude and a longitude. `:sup:`0` <#sdfootnote2sym>`_ Radial Search (Umkreissuche) extends your search form with - an input field for a postal code and / or a city, which will auto- completed by AJAX - a select box with options for a radius. Radial Search (Umkreissuche) takes care, that given distance and radius will respected by the search. Each record will extended with a field, which contains the distance. You can display records too, which aren't within the radius. .. _Configuring: Configuring ^^^^^^^^^^^ .. _Extension-Radial-Search-Umkreissuche: 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: TypoScript """""""""" .. _Extend-the-search-form-with-the-Radial-Search-fields-input-and-select-box: Extend the search form with the Radial Search fields input and select box. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Extend your filter array with a RADIALSEARCH filter like in the snippet below (here: list view 501 `:sup:`0` <#sdfootnote4sym>`_ ). See line 6. plugin.tx\_browser\_pi1 { views { list { 501 { filter { radialsearch < plugin.tx\_browser\_pi1.displayList.master\_templates.radialsearch } } } } } Extend your HTML with a RADIALSEARCH hashmarker. See from line 7 to 16. plugin.tx\_browser\_pi1 { views { list { 501 { htmlSnippets { marker { filter > filter = TEXT filter { value (
###TX\_ORG\_HEADQUARTERSCAT.TITLE### ###RADIALSEARCH###
) } } } } } } } } .. _Extend-the-list-view-with-Radial-Search-informations: Extend the list view with Radial Search informations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You can control HTML and CSS depending on distance and radius: - without any radial search - with a radial search for records, - which are within or - which are outside of the given radius. Sample for a string like "234 Km linear distance from 10115 Berlin and" plugin.tx\_browser\_pi1 { views { list { 501 { ... tx\_org\_headquarters { // placeholder: radialsearch linear distance deleted < plugin.tx\_radialsearch.masterTemplates.linearDistanceString ... This will replace the marker ###TX\_ORG\_HEADQUARTERS.DELETED### with - 237 Km linear distance from 10999 Berlin Kreuzberg - 237 Km Luftlinie entfernt von 10999 Berlin Kreuzberg depending of the current language (default (en), de). See `Organiser > heaquarters > setup.txt `_ `» `_ Sample for a CSS color plugin.tx\_browser\_pi1 { views { list { 501 { ... tx\_org\_headquarters { // placeholder: radialsearch HTML class depending on radius crdate < plugin.tx\_radialsearch.masterTemplates.htmlClass ... This will replace the marker ###TX\_ORG\_HEADQUARTERS.CRDATE### with - radialsearch radialsearch-within-radius - radialsearch radialsearch-outside-radius depending of the distance. HTML snippet:
...
See `Organiser > heaquarters > setup.txt `_ `» `_ .. _Performance: Performance ^^^^^^^^^^^ .. _Example-with-worldwide-postal-codes: 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: 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 .. _Tutorial-tree-view: Tutorial tree view ------------------ .. _Hierarchical-list-hierarchical-checkbox: Hierarchical list, hierarchical checkbox ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A tree view is a hierarchical list or a hierarchical checkbox. .. _Restrictions: Restrictions ^^^^^^^^^^^^ If you want to know, if a tree view is the solution for your demands, please refer to "Restrictions" on page 35 below. |img-5| .. _What-does-this-tutorial-do: What does this tutorial do? ^^^^^^^^^^^^^^^^^^^^^^^^^^^ We like to display categories in a tree view. This tutorial demonstrates, how to extend your own extension. We take the extension green\_cars and extend it with a tree view like - manufacturer 1 - model a - model b - model c - manufacturer 2 ... .. _Step-overview: Step overview ^^^^^^^^^^^^^ - Installing of the extension cps\_tcatree - Define the dependency of cps\_tcatree - Extending the SQL table manufacturer with a parent field for uids - Extending the TCA configuration for the table manufacturer - Extending the HTML template with a marker for the tree view - Extending the TypoScript with a configuration for the tree view .. _cps-tcatree: cps\_tcatree ^^^^^^^^^^^^ .. _Installing: Installing """""""""" |img-5| - Install the extension "Record tree for TCA" (extkey: cps\_tcatree). - Enable the extension. .. _Define-the-dependency-in-ext-emconf-php: 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 'browser, **cps\_tcatree** ', ... 'constraints' => array( 'depends' => array( 'browser' => '3.9.6-0.0.0', 'cps\_tcatree' => '0.3.0-0.0.0', ), ... ), .... ?> .. _Extending-the-SQL-table-manufacturer: Extending the SQL table manufacturer ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We need a field for the parent uid of each category, which should a child of another category. We extend the SQL table with the field uid\_parent. See the snippet below. `wwwrun@s15315906 `_ : .../typo3conf/ext/green\_cars> nano ext\_tables.sql ... # \# Table structure for table 'tx\_greencars\_manufacturer' # CREATE TABLE tx\_greencars\_manufacturer ( uid int(11) NOT NULL auto\_increment, pid int(11) DEFAULT '0' NOT NULL, uid\_parent int(11) DEFAULT '0' NOT NULL, ... ); ... The table tx\_greencars\_manufacturer is now able to administer subcategories. .. _Extending-the-TCA-configuration: Extending the TCA configuration ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Make-the-parent-uid-known-to-other-tables: 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: 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: 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. |img-5| .. _Ready-for-tree-ordering: 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. |img-5| You job is now, to add models and to allocate manufacturers. After finishing you should have a result like in the illustration below. |img-5| .. _Local-table-with-tree-view: 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. |img-5| .. _Frontend-works: Frontend works ^^^^^^^^^^^^^^ .. _HTML-template: 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 ...
###MY\_SEARCH\_LEGEND###
###TX\_GREENCARS\_MANUFACTURER.TITLE### ###TX\_GREENCARS\_TYPE.TITLE### ###TX\_GREENCARS\_ENGINE.TITLE### ###TX\_GREENCARS\_PRICEBRACKET.TITLE###
... .. _TypoScript: TypoScript """""""""" .. _Constants: Constants ~~~~~~~~~ Please configure some properties with the TypoScript Constant Editor. |img-5| Modul > Web: Template Page tree: Page with the tree view Edit area: [Constant Editor] Category [BROWSER – JQUERY JSTREE] Theme Name of the theme of tree views. Options are - [apple] - [classic] - [default] - [default-rtl] Default is classic. If you need different themes for different tree views, you can configure the theme of each tree view with the TypoScript setup. See examples in section "Themes" on page 31 below. Path to themes Path to the folder, which contains the themes (with ending slash). Default is typo3conf/ext/browser/res/js/jquery/plugins/jquery.jstree/themes/ If you like to have an individual theme, please link to the folder with your themes. Plugins The jQuery plugin jstree enables the tree view. JavaScript plugins are included while runtime. Depending on a category\_menu or a checkbox different plugins are needed. You can choose between - [category menu] - [checkbox] The default is checkbox. If your tree view is a CATEGORY\_MENU object, you must select [category menu], if it is a TREEVIEW, you have to select [checkbox]. You will receive a qualified error prompt in the frontend in case of a misconfiguration. Selector 1 HTML id of the
tag of tree view. DON'T USE DOTS! Default is tx-browser-pi1-jstree-01. Recommended is something like yourtable\_yourfield\_01. I.e: tx\_greencars\_manufacturer\_title table.field of Selector 1 The table and field of your filter in the table.field syntax: Example: tx\_greencars\_manufacturer.title BE AWARE: This value must (!) correspond with the used table.field in your TypoScript setup (see below). Selector from 2 to 5 See Selector 1 above. table.field of Selector from 2 to 5 See table.field of Selector 1 above. Dots Use dots. Default is 1. Icons Use icons. Default is 0. .. _Setup: Setup ~~~~~ You have to add a TypoScript configuration for the filter. filter.tx\_greencars\_manufacturer is added in the TypoScript snippet below. wwwrun@s15315906: .../typo3conf/ext/green\_cars> nano static/browser/setup.txt ... plugin.tx\_browser\_pi1 { ... views { list { 1 { ... filter { tx\_greencars\_manufacturer { title < plugin.tx\_browser\_pi1.displayList.master\_templates.treeview title { first\_item { cObject { 20 { data = LLL:EXT:green\_cars/locallang\_db.xml:filter\_phrase.manufacturer } } } wrap =
\|
} } ... .. _Result: 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. |img-5| |img-5| .. _Tree-view-in-depth: Tree view in depth ------------------ .. _Based-on-the-jQuery-plugin-jsTree: Based on the jQuery plugin jsTree ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The frontend functionality is based on the jQuery plugin jsTree. If you are using a filter with the type CATEGORY\_MENU or TREEVIEW in context with a table, which has a tree view, the TYPO3 Browser generates the tree view in the frontend automatically. Automatically means: the Browser includes - the JSS script jsTree - an own script for controlling jsTree jsTree has a lot of features. .. _jsTree-homepage: jsTree homepage """"""""""""""" If you want to know more about jsTree, please refer to `http://www.jstree.com/ `_ .. _Cookies: Cookies ^^^^^^^ The Browser provides jsTree supported by cookies. If a user has left a website with jsTree and visits it again, the tree view will have the same status like the last visit. This is important in another context. If a user has selected an item of the jsTree and the page is loaded again, the jsTree isn't collapsed but has the previous status. .. _Themes: Themes ^^^^^^ .. _Provided-themes: 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). .. _CATEGORY-MENU: CATEGORY\_MENU ~~~~~~~~~~~~~~ |img-5| |img-5| |img-5| |img-5| The illustration on the right hand displays the classic theme but without icons and without hits. .. _TREEVIEW: TREEVIEW ~~~~~~~~ |img-5| The illustration above displays the classic theme but without icons and without hits. Of course the themes apple and default are supported too, but they aren't displayed here. .. _Select-a-provided-theme: 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: 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. .. _More-than-one-tree-view: More than one tree view ^^^^^^^^^^^^^^^^^^^^^^^ You can use the tree view unlimited. But only five tree views are prepared by the TypoScript Constant Editor. .. _Controlling-by-the-HTML-id: 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: TypoScript Object Browser """"""""""""""""""""""""" |img-5| 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: TypoScript Constant Editor """""""""""""""""""""""""" |img-5| 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. .. _Disable-the-tree-view-top-level-only: Disable the tree view / top level only ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you don't want to use the tree view in the frontend, you can disable it. The snippet is an example for a list with the number one and a filter with the table field tx\_greencars\_manufacturer.title. It is recommended to display only the top level of the category table. You configure it with a SQL andWhere. plugin.tx\_browser\_pi1 { views { list { 1 { filter { tx\_greencars\_manufacturer { // Disable the tree view title.treeview.enabled.value = **0** // Enable top level only sql.andWhere = **tx\_greencars\_manufacturer.uid\_parent = 0** } } } } } } |img-5| |img-5| .. _How-to-add-an-own-script: How to add an own script? ^^^^^^^^^^^^^^^^^^^^^^^^^ The Browser adds a short JSS script for controlling the jsTree plugin. If there is any need to use an own script, please configure the array: plugin.tx\_browser\_pi1 { javascript { plugins { jstree { ... } } } } } .. _Use-marker-in-your-script: Use marker in your script ^^^^^^^^^^^^^^^^^^^^^^^^^ If you are using an own script, there will be the need to replace marker while runtime too. You can replace any marker in your JSS script. See the marker section in .. _plugin-tx-browser-pi1-javascript-jquery-plugins-jstree-library-marke: plugin.tx\_browser\_pi1.javascript.jquery.plugins.jstree.library.marke r Every marker is a COA. For example: the TypoScript marker "your\_marker" will replace the string ###YOUR\_MARKER### in your JSS file. .. _Restrictions: Restrictions ^^^^^^^^^^^^ .. _Five-tree-view-per-page-are-applicabled: 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: 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: 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). .. _Performance: Performance ~~~~~~~~~~~ This restriction is caused because of performance. The Browser is able to filter all records of the database with one SQL query only. Without all ids of the category path, it would be a need, to calculate the category path for each record while runtime. You will need a SQL query for each record in a worst case: If you have 16.000 records, you will have 16.000 SQL queries. .. _Known-bugs-unproper-usability: Known bugs, unproper usability ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _AJAX: AJAX """" Don't use AJAX. You will get unexpected results. Please disable AJAX in the plugin/flexform of the Browser tab [jQuery & AJAX]. .. _Cookies: Cookies """"""" .. _Without-static-url-or-without-real-url: Without static url or without real url ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ jsTree is using cookies. If you use tree views on different pages without static url or real url, all pages will have the same adress like index.php. Different jsTrees can get the same cookie, jsTree can't differ between this jsTrees (tree views). Solution is to adapt the used JavaScript code – here: the configuration of the cookies plugin. .. _Reload-of-the-page: Reload of the page ~~~~~~~~~~~~~~~~~~ If the user reloads the current page, page is loaded without former filter criteria. But tree views will display former filter criteria because of the cookies memory. This effect can confuse the visitor of your website. .. _More-examples: More examples ------------- .. _Quick-Shop-1-Filter: Quick Shop - 1 Filter ^^^^^^^^^^^^^^^^^^^^^ It is very simple to configure the content objects - SELECTBOX - CHECKBOX and - RADIOBUTONS All have a master template. You copy the master template to your view and you configure the properties only, which aren't configured for your needs. If you are interested in the power of a master template, please look at Reference 'SELECTBOX' on page 55 below After copying you will see the powerful TypoScript code supported by the TypoScript Object Browser in your view array. It should be comprehensible, how to change any feature and property of your filter to your needs. See section - 'TypoScript Object Browser' on page 17 above and - Reference 'master\_templates' on page 53 below See the examples below. .. _SELECTBOX: SELECTBOX """"""""" |img-5| See the TypoScript on the next page. .. _TypoScript: TypoScript ~~~~~~~~~~ See the line // The filter becomes the property SELECTBOX below in the snippet plugin.tx\_browser\_pi1 { ... views { list { 1 { select = ... filter { tx\_quickshop\_categories { // The filter becomes the property SELECTBOX title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { // Configuration SELECTBOX begin first\_item { stdWrap { data > value = Select a Category lang { de = Kategorie wählen } } } wrap = \| wrap { item { stdWrap { crop = 60 \| ... \| 1 } } } // Configuration SELECTBOX end } } } } } single { ... } } } Easy way of configuring: See section 'TypoScript Object Browser' on page 17 above. .. _CHECKBOX: CHECKBOX """""""" |img-5| .. _TypoScript: TypoScript ~~~~~~~~~~ See the line // The filter becomes the property CHECKBOX below in the snippet plugin.tx\_browser\_pi1 { ... views { list { 1 { ... filter { tx\_quickshop\_categories { // The filter becomes the property CHECKBOX title < plugin.tx\_browser\_pi1.displayList.master\_templates.checkbox } } } } } } .. _RADIOBUTTONS: RADIOBUTTONS """""""""""" |img-5| .. _TypoScript: TypoScript ~~~~~~~~~~ See the line // The filter becomes the property RADIOBUTONS below in the snippet plugin.tx\_browser\_pi1 { ... views { list { 1 { ... filter { tx\_quickshop\_categories { // The filter becomes the property RADIOBUTONS title < plugin.tx\_browser\_pi1.displayList.master\_templates.radiobutons } } } } } } .. _Green-Cars-Dynamic-Filter: Green Cars - Dynamic Filter ^^^^^^^^^^^^^^^^^^^^^^^^^^^ The Browser filters are dynamically by default. This means: - If a filter item hasn't any hit, it won't be displayed. - Each filter controls all others.. .. _Exercise: Exercise """""""" We will change some TypoScript of the page `http://gruene-autos.org/ `_ for demonstration only. See the examples below. .. _SELECTBOX-Default: SELECTBOX (Default) """"""""""""""""""" |img-5| 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). .. _TypoScript: TypoScript ~~~~~~~~~~ See the lines // This filter becomes the property SELECTBOX below in the snippet plugin.tx\_browser\_pi1 { ... views { list { 1 { select = ... filter { tx\_greencars\_engine { // This filter becomes the property SELECTBOX title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { first\_item { stdWrap { data = LLL:EXT:green\_cars/locallang\_db.xml:tx\_greencars\_main.engine } } wrap = \| } } tx\_greencars\_pricebracket { // This filter becomes the property SELECTBOX title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { first\_item { stdWrap { data = LLL:EXT:green\_cars/locallang\_db.xml:tx\_greencars\_main.pricebracket } } wrap = \| order { field = uid } } } tx\_greencars\_type { // This filter becomes the property SELECTBOX title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { first\_item { stdWrap { data = LLL:EXT:green\_cars/locallang\_db.xml:tx\_greencars\_main.type } } wrap = \| } } } } } } } .. _SELECTBOXES-size-5: 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. |img-5| .. _TypoScript: TypoScript ~~~~~~~~~~ // Set the size of all boxes to 5 plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_engine.titl e.size = 5 plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_pricebracke t.title.size = 5 plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_type.title. size = 5 // Don't display the first\_iem plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_engine.titl e.first\_item = 0 plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_pricebracke t.title.first\_item = 0 plugin.tx\_browser\_pi1.views.list.1.filter.tx\_greencars\_type.title. first\_item = 0 .. _Selection-Case: Selection Case ~~~~~~~~~~~~~~ We are interested in cars - with a diesel or domestic gas engine - with a price-bracket from 20.000 EUR to 25.000 EUR |img-5| If you like, that the values in the boxes will changed after sending the form, please setting up in the flexform in the tab [List view] the field "Total hits" to [Controlled by selected filters]. You will have this behaviour: - every item has a new number of hits - there are some items without any hit and they won't be displayed like - Coupe - all engines without a selection (of course) - all price-brackets without a selection (of course) |img-5| .. _Change-the-Behaviour: Change the Behaviour """""""""""""""""""" .. _Display-price-brackets-even-if-they-haven-t-any-hit: Display price-brackets even if they haven't any hit ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| .. _TypoScript: TypoScript ~~~~~~~~~~ // Display price-brackets even if they haven't any hit plugin.tx\_browser\_pi1 { views.list.1.filter.tx\_greencars\_pricebracket.title.wrap.item.displa y\_without\_any\_hit = 1 } .. _Display-price-brackets-without-the-number-of-hits: Display price-brackets without the number of hits ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| .. _TypoScript: TypoScript ~~~~~~~~~~ // Display price-brackets without the number of hits plugin.tx\_browser\_pi1 { views.list.1.filter.tx\_greencars\_pricebracket.title.wrap.item.displa y\_hits = 0 } .. _Organiser-Filter-for-a-period-data-area: Organiser - Filter for a period (data area) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ This is a typical example for a calendar. This is the case: - dates of events are stored in a field "datetime" - the format of a date is a timestamp - the table tx\_org\_cal contains the field datetime. The table.field- syntax is: tx\_org\_cal.datetime .. _Preconditions: Preconditions """"""""""""" We have configured a list view (and a single view of course) for the table tx\_org\_cal. .. _HTML-Template: 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: 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 } } } } ... } } .. _Result-in-the-Frontend: Result in the Frontend ~~~~~~~~~~~~~~~~~~~~~~ |img-5| .. _Comment: Comment ~~~~~~~ Line 11 to 13 (see page above): we allocates a filter for tx\_org\_cal.datetime in form of a SELECTBOX. The items of the SELECTBOX are in our case: This means: .. _We-have-two-dates-at-1283968800-one-date-at-and-three-dates-at: We have two dates at 1283968800, one date at ... and three dates at ... But we don't want for every date an item in the selectbox. We want something like "Display the events of the last year, this year and the next year". We want something like this: We add an area out of the master template section and configure some properties. .. _TypoScript-Snippet-with-Area: 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 } } } } } ... } } .. _Comment: Comment ~~~~~~~ Line 16: Every item should be displayed even though it hasn't any hit Line 18: Order the items by uid (and not by value) Line 20: This is the most important line. We allocate the master template sample\_period.This template provides by default:- a period of years- a period from last year to next year (be aware of the relative period!)- and the items are formatted as year only. Every property is configurable. We get, what we want: .. _Properties-and-Possibilities: Properties and Possibilities """""""""""""""""""""""""""" Please refer to the Reference AREAS on page 58 below. .. _Condition-for-a-Filter: Condition for a Filter ^^^^^^^^^^^^^^^^^^^^^^ Each filter has the property condition. condition is a cObject. By default the condition is met. .. _TypoScript-Default-Code: TypoScript Default Code """"""""""""""""""""""" // If condition is met, filter will display. If not, filter will hide. condition = TEXT condition { // True (default) value = 1 } .. _Example: 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. .. _TypoScript-Snippet: TypoScript Snippet ~~~~~~~~~~~~~~~~~~ plugin.tx\_browser\_pi1 { views { list { 301 = +Org: Downloads 301 { ... filter { tx\_org\_downloadscat { title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { condition > condition = COA condition { 10 = TEXT 10 { value = 0 if { isTrue { data = GPvar:tx\_browser\_pi1\|tx\_org\_downloadscat.title\|0 } } } 20 = TEXT 20 { value = 0 if { isFalse { data = GPvar:tx\_browser\_pi1\|tx\_org\_downloadscat.title\|0 } } } } ... .. _Configuring-hits: Configuring hits ---------------- .. _The-difference-between-counting-and-displaying: The difference between counting and displaying ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The Browser is counting hits and display it. The display is depending on counting of course. If you have configured, that items without any hit will displayed and you disable the counting of hits, no filter won't displayed! .. _Performance: Performance ^^^^^^^^^^^ Counting of hits costs performance. If you have a lot of filter and a lot of records, please disable the counting of hits (see below). .. _Disable-counting: Disable counting ^^^^^^^^^^^^^^^^ If you have a lot of data and a lot of category tables with a lot of items, the counting of hits can cost performance. `:sup:`0` <#sdfootnote7sym>`_ You can disable and enable the counting of hits per each filter in the TypoScript. See the example below. plugin.tx\_browser\_pi1 { views.list.1.filter. *table.field {* count\_hits = **0** } } *table.field:* table is the category table like tt\_news\_cat. field is the label of the field like title. .. _All-filter-items-will-displayed-by-default: 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** } } } } .. _cObject: cObject ------- From Browser version 4 filter have the cObject property: // cObject for the first filter item filter.tx\_greencars\_engine.title.first\_item.cObject // cObject for filter items filter.tx\_greencars\_engine.title.wrap.item.cObject TYPO3 integrators are more flexible now. .. _Display-conditions-for-a-filter-item: Display conditions for a filter item ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The cObject has an if property with three OR conditions by default. A filter item will displayed: if it has one hit at least or if counting is disabled (see "Performance" on page 49 above) or if the current filter is a treeview plugin.tx\_browser\_pi1 { views.list.1.filter. *table.field {* ... wrap { item { cObject = COA cObject { ... if { isTrue { // Display with hits only or in case of a tree view cObject = COA cObject { 10 = TEXT 10 { field = hits } 20 = TEXT 20 { field = tx\_browser\_pi1.flag\_displayInCaseOfNoCounting } 30 = TEXT 30 { field = tx\_browser\_pi1.flag\_treeview } } } } wrap = \| } } } } } You can disable it: remove if.isTrue.cObject.10 or 20 or 30 or all. .. _The-no-value-label: The "no value" label ^^^^^^^^^^^^^^^^^^^^ The cObject has the two elements 20 and 21 by default. cObject.20 will displayed, if there is an value. cObject.21 will displayed, if there isn't any value. plugin.tx\_browser\_pi1 { views.list.1.filter. *table.field {* ... wrap { item { cObject = COA cObject { // Value in case of a value 20 = TEXT 20 { if { isTrue { field = value } } field = value htmlSpecialChars = 1 crop = 60 \| ... \| 1 } // Value in case of no value 21 = TEXT 21 { if { isTrue { field = value } negate = 1 } data = LLL:EXT:browser/pi1/locallang.xml:label\_categorymenu\_noValue } } } } } } .. _Replace-values: Replace values ^^^^^^^^^^^^^^ TYPO3 integrators are able, to replace special values. This could be an example: replace Audi, Seat and Skoda with "VW Group". You have to configure a TEXT object with the proper if. But this isn't part of this tutorial. .. _Configure-or-disable-hits: Configure or disable hits ^^^^^^^^^^^^^^^^^^^^^^^^^ If an item has one hit at least, it will extended with something like "(4)" in case of four hits. If you want to disable or change it, please edit cObject.30. plugin.tx\_browser\_pi1 { views.list.1.filter. *table.field {* ... wrap { item { cObject = COA cObject { ... // Hits 30 = TEXT 30 { if { // Display hits only in case of one hit at least isTrue { field = hits } } field = hits noTrimWrap = \| (\|)\| } } } } } } If you like to prepend the hit result for example, please move cObject.30 to cObject.10. .. _Reference: Reference --------- This tutorial provides only the reference for the master\_template array (see below) You find all other stuff in the manual of the Browser: - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser/current/info /?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _master-templates: master\_templates ^^^^^^^^^^^^^^^^^ All master\_templates are local. You have to copy the template to your view and configure it there. See the example below. .. ### BEGIN~OF~TABLE ### .. _master-templates: master\_templates """"""""""""""""" .. container:: table-row Property master\_templates Data type array Description Configuration of master templates for the filter. Content Objects are - CATEGORY\_MENU - CHECKBOX - RADIOBUTTON - SELECTBOX - TREEVIEW **Code:** :: plugin.tx_browser_pi1 { displayList { master_templates { selectbox = SELECTBOX selectbox { ... } } } } **Example:** :: 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 = \ | wrap { item { stdWrap { crop = 30 | ... | 1 } } } } } } } } } } Default .. ###### END~OF~TABLE ###### .. _CATEGORY-MENU: CATEGORY\_MENU ^^^^^^^^^^^^^^ Display your filter as a HTML category menu. The subpart ###CATEGORY\_MENU### is disabled by TypoScript by default. The subpart will removed from the HTML template – you won't have any waste in your code. If you are using the category menu please enable in your global or local configuration: displayList.display.category\_menu = 1 .. ### BEGIN~OF~TABLE ### .. _CATEGORY-MENU: CATEGORY\_MENU """""""""""""" .. container:: table-row Property CATEGORY\_MENU Data type array Description Content Object CHECKBOX **Example:** :: See Code of SELECTBOX below Default .. ###### END~OF~TABLE ###### .. _CHECKBOX: CHECKBOX ^^^^^^^^ Display your filter as a HTML check box. .. ### BEGIN~OF~TABLE ### .. _CHECKBOX: CHECKBOX """""""" .. container:: table-row Property CHECKBOX Data type array Description Content Object CHECKBOX **Example:** :: See Code of SELECTBOX below Default .. ###### END~OF~TABLE ###### .. _RADIOBUTTONS: RADIOBUTTONS ^^^^^^^^^^^^ Display your filter as HTML radio buttons. .. ### BEGIN~OF~TABLE ### .. _RADIOBUTONS: RADIOBUTONS """"""""""" .. container:: table-row Property RADIOBUTONS Data type array Description Content Object RADIOBUTONS **Example:** :: See Code of SELECTBOX below Default .. ###### END~OF~TABLE ###### .. _RADIAL-SEARCH: RADIAL SEARCH ^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _SELECTBOX: SELECTBOX """"""""" .. container:: table-row Property SELECTBOX Data type array Description Content Object SELECTBOX Example: :: See Code below Default .. ###### END~OF~TABLE ###### :: plugin.tx_browser_pi1 { displayList { master_templates { selectbox = SELECTBOX .. _SELECTBOX: SELECTBOX ^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _SELECTBOX: SELECTBOX """"""""" .. container:: table-row Property SELECTBOX Data type array Description Content Object SELECTBOX **Example:** :: See Code below Default .. ###### END~OF~TABLE ###### :: 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 =
###TITLE###|
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 =
|
} // [String] Wrap the items object = \ object { // [Integer] Space characters from left margin in the HTML code nice_html_spaceLeft = 14 } // [String] Wrap one item item = | 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 } } } } .. _TREEVIEW: TREEVIEW ^^^^^^^^ Display your filter as HTML radio buttons. .. ### BEGIN~OF~TABLE ### .. _RADIOBUTONS: RADIOBUTONS """"""""""" .. container:: table-row Property RADIOBUTONS Data type array Description Content Object TREEVIEW **Example:** :: See Code of SELECTBOX above Default .. ###### END~OF~TABLE ###### .. _filter-condition: filter condition ^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _filter-table-field-condition: filter. *table.field.* condition """""""""""""""""""""""""""""""" .. container:: table-row Property filter. *table.field.* condition Data type cObject Description Define a condition for displaying or hiding your Browser plugin. **Examples:** - See "Condition for a Filter" on page 47 above - See Code below Default .. ###### END~OF~TABLE ###### 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: AREAS ^^^^^ Areas contains master templates for area samples. Samples are - currency hard coded - period - hard coded - relative **Areas are limited to integers and numbers.** We intend to extend it for chars and strings too `:sup:`0` <#sdfootnote8sym>`_ . You need a content object SELECTBOX, CHECKBOX or RADIOBUTTONS from above, if you like to use an area filter. .. ### BEGIN~OF~TABLE ### .. _areas: areas """"" .. container:: table-row Property areas Data type array Description Configuration array for an area. You need it, if you like to filter data areas **Default code:** :: 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 } } } } } } Default .. ###### END~OF~TABLE ###### .. _Example: Example """"""" Please refer to the section Organiser - Filter for a period (data area) on page above. .. _TypoScript-Object-Browser: TypoScript Object Browser """"""""""""""""""""""""" Please use the TypoScript Object Browser, if you like to inspecting all properties. .. _Possibilities: Possibilities """"""""""""" See examples below. .. _AREA-Period-interval: AREA - Period interval ^^^^^^^^^^^^^^^^^^^^^^ Period interval is a smart tool: Period interval enables you to define relative periods like - display all seven days of the current week - display four weeks from one week ago - display alls months of the current year - display all years from last year to next year If you want to play with the examples, please change the case property like this: plugin.tx\_browser\_pi1.displayList.master\_templates.areas { sample\_period.interval.case = **week** } .. ### BEGIN~OF~TABLE ### .. _areas: areas """"" .. container:: table-row Property areas Data type array Description Configuration array for an area. You need it, if you like to filter data areas **Default code:** :: 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 } } } } } } } Default .. ###### END~OF~TABLE ###### .. _Day: Day """ See year below. .. _Week: Week """" See year below. .. _Month: Month """"" See year below. .. _Year: 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: Example """"""" Please refer to the section Organiser - Filter for a period (data area) on page above. .. _AREA-Period-hard-coded: AREA - Period hard coded ^^^^^^^^^^^^^^^^^^^^^^^^ It is possible to "hard code" a period too. See the example in plugin.tx\_browser\_pi1.displayList.master\_templates.areas { sample\_period.string { ... } } .. _AREA-Currency-hard-coded: AREA - Currency hard coded ^^^^^^^^^^^^^^^^^^^^^^^^^^ It is possible to "hard code" an area of numbers too. See the example in plugin.tx\_browser\_pi1.displayList.master\_templates.areas { sample\_curreny.string { ... } } .. _What-s-new-in-Version-4: What's new in Version 4? ------------------------ .. _Filter-AND: Filter: AND ^^^^^^^^^^^ [4.8.8] Filter items can queried by OR and AND. See new TypoScript property filter.table.field.modeAndOr at "SELECTBOX" on page 55 above. Option isn't tested in localised context .. _Filter-Checkboxes-for-Selectbox: Filter: Checkboxes for Selectbox ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4.8.8] If you are using a selectbox in the backend, you can render the items both ways in the frontend: - as selectbox or - as checkboxes. .. _Filter-cObject: Filter: cObject ^^^^^^^^^^^^^^^ [3.9.16] Filter are a cObject. See "cObject" on page 50 above. .. _Filter-conditions: Filter: conditions ^^^^^^^^^^^^^^^^^^ [3.9.3] You can define a display condition for a filter. .. _Example-for-a-requirement: 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. .. _Filter-radial-search-de-Umkreissuche: Filter: radial search (de: Umkreissuche) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4.7.0] 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 Radial Search (Umkreissuche)" on page 18 above. .. _Filter-tree-view: Filter: tree view ^^^^^^^^^^^^^^^^^ .. _Category-Menu: 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: 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. .. _What-s-new-in-Version-3-6: What's new in Version 3.6? -------------------------- .. _Area-and-interval-get-parameters-with-date: Area and interval: get parameters with date ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3.6.4] Links of this menu "Calendar \| March \| April" will be now: - http://hfs.die-netzmacher.de/kalender/month/201103/ - http://hfs.die-netzmacher.de/kalender/month/201104/ See reference: get\_param.date\_format .. _Category-Menu: Category Menu ^^^^^^^^^^^^^ [3.6.0] You can filter your data by a category menu. The difference between a category menu and the available filters check box, radio buttons and select box is, that the first is a list of links and all others are a part of an HTML form. You can use areas for a category menu in the same way like for filters. .. _Configurable-Search-respects-Filters: Configurable: Search respects Filters ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3.6.0] It is configurable, if the search respect filters. It is possible to differentiate between every filter. The new TypoScript property is .. _plugin-tx-browser-pi1-displayList-display-searchform-respect-filter: plugin.tx\_browser\_pi1.displayList.display.searchform.respect\_filter s .. _Filter-for-areas: Filter for areas ^^^^^^^^^^^^^^^^ [3.6.0] You can filter your data by areas. Example for areas are - 2010 to 2012 - 10.000 EUR to 20.000 EUR You can generate filter for periods relative like: - all days of the current week - -2 weeks from now to +2 weeks from now .. _Filter-for-local-table: Filter for local table ^^^^^^^^^^^^^^^^^^^^^^ [3.6.0] You can filter data from the local table. Before version 3.6.0 it was possible to filter data of foreign tables only. .. _Helpful-suggestions: Helpful suggestions ------------------- .. _Forum: Forum ^^^^^ |img-7| Illustration 52: The TYPO3-Frontend-Engine Browser Forum The Browser has its own forum. We speak English and German. You are welcome to post any question, bug or snippet code at TYPO3-Frontend-Engine Browser: Forum `http://typo3-browser-forum.de/ `_ .. _Credits: Credits ------- .. _dorn-malag: dorn & malag ^^^^^^^^^^^^ Thanks to dorn & malagagentur fürs netz `http://www.dorn-malag.de/ `_ who sponsored a part of the features CHECKBOX and RADIOBUTTONS. |img-5| .. _LEG-Thringen: LEG Thüringen ^^^^^^^^^^^^^ Thanks to LEG Thüringen `http://leg-thueringen.de/ `_ who sponsored - a part of the feature to filter data in local tables - improvement of performance - integration of jsTree (tree view) |img-5| .. _To-Do-List: To-Do List ---------- Nothing to do. .. _Known-bugs: Known bugs ---------- Please refer to the "Known bugs, unproper usability" within the section tree view on page 36 above. .. _Change-Log: Change Log ---------- 4.8.8 **Features** \* #56329: AND option for filter\* New TypoScript property filter.table.field.modeAndOr\* Option isn't tested in localised context 4.7.0 **Feature** \* #52486: Radial Search 4.1.21: **New Feature** \* #41753: Treeview as checkbox\* #41753.01: New COA TREEVIEW **Improvement** \* #41754: Filter: optimise performanceCHECKBOX is enabled for treeviews\* #41754.01: $arr\_andWhereFilter isn't never allocated\* #41754.02: init\_aFilterIsSelected (boolean) is moved to get\_selectedFilters (array)\* #41754.03: SQL optimisation: new method sql\_resAllItemsFilterWoRelation( )\* #41754.04: Improve performance reportsBE AWARE: It isn't tested in localised context\* #41776: Make filter 4.x independent of filter 3.x **Bugfix** \* #41814: Filter: local table isn't proper, if hits aren't displayed\* #41811: Filter areas: last item doesn't count hits 4.1.19 **Development** \* #00000: Treeview Checkboxes 4.1.18 **Improvement** \* #00000: jsTree: non used files and folders are removedjsTree TypoScript Constant Editor: dots and icons\* #00000: res/js/jquerytx\_browser\_pi1\_jstree-3.9.21.js is moved to tx\_browser\_pi1\_jstree-4.1.18.js 4.1.16 **Bugfix** \* #00000: Filter areas: If any filter is matched in localised context, alls records were displayed\* #00000: Filter weren't displayed in case of any record doesn't matched 4.1.15 **Improvement** \* #41372: Filter areas: strings aren't supported proper 4.1.12 **Bugfix** \* #11401: Filter: ###UID### replacement depends on localtable or foreigntable 4.1.10 **Bugfix** \* #00000: \* SearchForm: remove hiddden field for plugin4.1.7 **Bugfixes** \* #40354: Checkbox without input-tag\* #40354: Checkbox and radiobuttons\* items without proper line breaks\* items without a name\* items without hits 4.1.4 **New Feature** \* #00000: Filter for map 4.0.0 **Publishing** \* #00000: Release 4.0.0 3.9.22 **Improvement** #00000: optimising five tree views 3.9.21 **Improvement** #00000: enable more than one tree view by default 3.9.20 **Improvement** #00000: tree view performance 3.9.19 **Bugfix** #00000: andWhere search -> trim tableFields 3.9.18 **Bugfix** #00000: andWhere is ignored 3.9.16 **Bugfix** #00000: First filter item counts hitsFirst filter item counts hits in the tree view proper 3.9.9: **New Feature** \* #33826: filter becomes cObject 3.9.6: **New Features** - #32223: Category tree- #30912: Filter: independent total hits 3.9.3: **New Features** - #32117: Condition for filters 3.6.0: **New Features** - #11580: Configurable: Should the search respect filters?- #11523: Hide the update report for public- #11402: Filter for areas- #11401: Filter for local table- #8807: Category Menu 3.5.0: **New Features** - #8335: Filter with multiple select- #8337: Filter with checkbox and radiobuttons- #9408: Display the number of hits in the filter items 3.4.0: **Update** Conditions for filtering 3.0.4: **Update** Filters are documented 3.0.3: **Update** Plugin has new properties for the search form. 3.0.1: **Publishing** 2.6.1: **Initial release** .. _Illustration-Index: Illustration Index ------------------ Illustration 1: Result with six search words 3 .. _Illustration-2-tree-view-and-select-boxes-on-http-gruene-autos-org: Illustration 2: tree view and select boxes on http://gruene-autos.org/ 3 Illustration 3: tree view is animated 4 Illustration 4: Filter can control itselfs: items without any hit will hidden. 4 Illustration 5: Example with check boxes. 5 Illustration 6: Example for a category menu and an area 5 Illustration 7: Treeview in the backend 5 Illustration 8: Tutorial in PDF format 6 Illustration 9: Frontend with a simple example with tt\_news 7 Illustration 10: List view with marked search words 8 Illustration 11: Single view with marked search words 8 Illustration 12: List view with marked search words 8 Illustration 13: Single view with marked search words 8 Illustration 14: List view with marked words and phrases 9 Illustration 15: Single view with marked words and phrases 9 Illustration 16: The Browser plugin. Tab [List] (1) with the search menu (2) 10 Illustration 17: List view with the search form 11 Illustration 18: List view without any search form 11 Illustration 19: Search form with result phrase 11 Illustration 20: Search form without any result phrase 11 Illustration 21: http://gruene-autos.org/ with three selectboxes 15 Illustration 22: The object SELECTBOX 17 Illustration 23: The object SELECTBOX with some properties. 17 Illustration 24: Tree view example 21 Illustration 25: Installing cps\_tcatree 22 Illustration 26: Update your extension. The field uid\_parent will added to the SQL table 24 Illustration 27: Manufacturer table with the uid\_parent field 24 Illustration 28: Tree view with manufacturers and models in the backend 25 Illustration 29: Tree view - local table with the category field 26 Illustration 30: Configuration of a treeview in the TypoScript Constant Editor 27 Illustration 31: Tree view - collapsed 29 Illustration 32: Tree view - opened 29 Illustration 33: Apple 31 Illustration 34: Classic 31 Illustration 35: Default 31 Illustration 36: Classic without icons 31 Illustration 37: Classic without Icons 31 Illustration 38: Tree view id property of a filter 32 Illustration 39: Tree view ids from 1 to 5 33 Illustration 40: Disabled tree view 34 Illustration 41: Disabled tree view with top level only 34 Illustration 42: Quick Shop with the filter SELECTBOX 37 Illustration 43: Quick Shop with the filter CHECKBOX 39 Illustration 44: Quick Shop with the filter RADIOBUTONS 40 Illustration 45: Green Cars with three selectboxes - each with size = 1 41 Illustration 46: Green Cars with three selectboxes - each with size = 1 42 Illustration 47: Green Cars with three selectboxes - each with size = 1 43 Illustration 48: Green Cars with three selectboxes - each with size = 1 43 Illustration 49: Green Cars with three selectboxes - each with size = 1 44 Illustration 50: Green Cars with three selectboxes - each with size = 1 44 Illustration 51: Calendar with select box 45 Illustration 52: The TYPO3-Frontend-Engine Browser Forum 64 Illustration 53: http://www.dorn-malag.de/ 65 Illustration 54: http://leg-thueringen.de/ 65 `0 <#sdfootnote1anc>`_ You can take every other extension, but than you need a TypoScript with its tables and fields instead of tt\_news. `0 <#sdfootnote2anc>`_ The Browser has a Geo Coding support. `0 <#sdfootnote3anc>`_ The static template of Radial Search (Umkreissuche) must be included before the static template of the Browser – TYPO3 without PHP `0 <#sdfootnote4anc>`_ 501 is an example only. 501 is the view of the Organiser – TYPO3 for the lobby and the organisers – for headquarters records `0 <#sdfootnote5anc>`_ Postal codes of the world: 1 177 212 exactly in October of 2013 `0 <#sdfootnote6anc>`_ Postal codes of Germany: 16 481 exactly in October of 2013 `0 <#sdfootnote7anc>`_ If you want to know more about performance, you can enable the DRS performance report in the extension manager. `0 <#sdfootnote8anc>`_ We like a contract. Do you know someone for contracting? 71 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: Grafik2 .. :name: Grafik2 .. :width: 69 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 27 .. :id: graphics25 .. :name: graphics25 .. :width: 30 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics5 .. :name: graphics5 .. :width: 302 .. |img-5| image:: data: :alt: Frame3 .. :align: bottom .. :id: Frame3 .. :name: Frame3 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 205 .. :id: graphics1 .. :name: graphics1 .. :width: 227 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 161 .. :id: graphics81 .. :name: graphics81 .. :width: 302