.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================================ Browser Tutorial Navigation (en) ================================ :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2011-08-13T12:28:35 :Classification: browser_tut_navigation_en :Description: This is the Tutorial Navigation for the Extension Browser - the Frontend Engine. :Keywords: forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, navigation, a-z-browser, pagebrowser, recordbrowser, index browser, alphbetical browser :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\_navigation\_en |img-3| .. _Browser-Tutorial-Navigation-en: Browser Tutorial Navigation (en) ================================ |img-4| Version: 3.7.1, 2011-08-13 - Version is corresponding with the version of the Browser. Extension Key: browser\_tut\_navigation\_en - Tutorials for the extension Browser (extkey: browser) Language: en Keywords: forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, navigation, a-z-browser, pagebrowser, recordbrowser, index browser, alphbetical browser Copyright 2009 - 2011, 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 Navigation (en) 1 <#__RefHeading__1813_1267833485>`_ `Introduction 3 <#__RefHeading__1815_1267833485>`_ `What does it do? 3 <#__RefHeading__1817_1267833485>`_ `Further Information 3 <#__RefHeading__1819_1267833485>`_ `Definitions 4 <#__RefHeading__18101_2136419308>`_ `A-Z-Browser (index browser) 4 <#__RefHeading__18103_2136419308>`_ `Page browser 4 <#__RefHeading__18105_2136419308>`_ `Record browser 4 <#__RefHeading__18107_2136419308>`_ `Tutorial: Page Browser and A-Z-Browser 5 <#__RefHeading__1821_1267833485>`_ `Step 1: Switch the Browsers off 5 <#__RefHeading__1823_1267833485>`_ `Step 2: Labeling the Page Browser 6 <#__RefHeading__1825_1267833485>`_ `Step 3: Configuring the Page Browser 6 <#__RefHeading__1827_1267833485>`_ `Step 4: Configuring the A-Z-Browser 7 <#__RefHeading__1829_1267833485>`_ `Step 5: A-Z-Browser with German Umlaute 8 <#__RefHeading__1831_1267833485>`_ `Step 6: A small A-Z-Browser 11 <#__RefHeading__1833_1267833485>`_ `If you need your own A-Z Field 11 <#__RefHeading__1835_1267833485>`_ `Add parameters 12 <#__RefHeading__1837_1267833485>`_ `Localization 14 <#__RefHeading__1845_1267833485>`_ `Tutorial: Record Browser 15 <#__RefHeading__18109_2136419308>`_ `Configuring by the flexform 15 <#__RefHeading__18111_2136419308>`_ `Configuring by TypoScript 18 <#__RefHeading__18113_2136419308>`_ `The needs for your HTML template 19 <#__RefHeading__18115_2136419308>`_ `Configuring the AJAX page object 19 <#__RefHeading__3898_386078505>`_ `Non supported Features 21 <#__RefHeading__3900_386078505>`_ `Background 22 <#__RefHeading__18117_2136419308>`_ `The record browser session 22 <#__RefHeading__18119_2136419308>`_ `Reference 23 <#__RefHeading__18121_2136419308>`_ `Navigation 23 <#__RefHeading__18123_2136419308>`_ `a-z\_Browser 24 <#__RefHeading__18125_2136419308>`_ `pagebrowser 26 <#__RefHeading__18127_2136419308>`_ `record\_browser 27 <#__RefHeading__15844_2136419308>`_ `What's new in Version 3? 28 <#__RefHeading__10280_1267833485>`_ `Additional parameters 28 <#__RefHeading__18129_2136419308>`_ `Record Browser 28 <#__RefHeading__18131_2136419308>`_ `Helpful suggestions 29 <#__RefHeading__10282_1267833485>`_ `Forum 29 <#__RefHeading__30581_1792227413>`_ `Credits 30 <#__RefHeading__18133_2136419308>`_ `freemedia.ch 30 <#__RefHeading__19944_2136419308>`_ `Known Bugs 31 <#__RefHeading__19950_2136419308>`_ `Record Browser 31 <#__RefHeading__17682_2136419308>`_ `To-Do List 32 <#__RefHeading__1853_1267833485>`_ `Change Log 33 <#__RefHeading__1855_1267833485>`_ `Illustration Index 34 <#__RefHeading__1857_1267833485>`_ |img-5| Illustration 1: Tutorial in PDF format Introduction What does it do? ^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser (extkey: browser). It is a step-by-step introduction for configuring browsers for navigation like the record browser or the A-Z-Browser only. .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: This tutorial in PDF format """"""""""""""""""""""""""" You find this tutorial as a PDF file at - doc/manual.pdf - `http://typo3.org/extensions/repository/view/browser\_tut\_navigation\ _en/current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.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/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 `_ Tutorial Basics: A lot of step-by-step introductions. - HTML: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_basics\_en/current/ `_ - `PDF: `_ `http://typo3 .org/extensions/repository/view/browser\_tut\_basics\_en/current/info/ ?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Definitions: Definitions ----------- |img-6| |img-6| .. _A-Z-Browser-index-browser: A-Z-Browser (index browser) ^^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-6| The A-Z-Browser (1) groups your records by initials or numbers. You are using the A-Z-Browser in list views. .. _Page-browser: Page browser ^^^^^^^^^^^^ If there are more records than for one page only, the page browser (2) groups your records by pages. You are using the page browser in list views. .. _Record-browser: Record browser ^^^^^^^^^^^^^^ |img-6| The record browser (3) enables the navigation to the first, the previous, the next and the last record. You are using the record browser in single views. .. _Tutorial-Page-Browser-and-A-Z-Browser: Tutorial: Page Browser and A-Z-Browser -------------------------------------- .. _Step-1-Switch-the-Browsers-off: Step 1: Switch the Browsers off ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _TypoScript: TypoScript """""""""" You find the TypoScript code in res/tutorial\_01/step\_01.txt plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } } } } .. _Plugin: Plugin """""" |img-6| Disable in the frontend plugin the options: - A-Z-Browser and - Page Browser .. _Result: Result """""" |img-6| |img-6| .. _Step-2-Labeling-the-Page-Browser: Step 2: Labeling the Page Browser ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _TypoScript: TypoScript """""""""" You find the TypoScript code in res/tutorial\_01/step\_02.txt plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } } } \_LOCAL\_LANG { default { pi\_list\_browseresults\_prev = **<** pi\_list\_browseresults\_first = **<<** pi\_list\_browseresults\_next = **>** pi\_list\_browseresults\_last = **>>** pi\_list\_browseresults\_displays = **%s to %s from %s news** } } } .. _Result: Result """""" |img-6| |img-6| .. _Step-3-Configuring-the-Page-Browser: Step 3: Configuring the Page Browser ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You can configure the Page Browser in the same way like the extension tt\_news. .. _TypoScript: TypoScript """""""""" The Page Browser has a TypoScript array. plugin.tx\_browser\_pi1.navigation { pageBrowser { ... } } The elements of the array should be self-explanatory. See the illustration above. |img-6| .. _Step-4-Configuring-the-A-Z-Browser: Step 4: Configuring the A-Z-Browser ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ There are a lot of possibilities for configuring the A-Z-Browser. .. _TypoScript: TypoScript """""""""" The A-Z-Browser has a TypoScript array. plugin.tx\_browser\_pi1.navigation { a-z\_Browser { ... } } |img-6| .. _The-A-Z-Browser-properties: The A-Z-Browser properties """""""""""""""""""""""""" |img-6| |img-6| The A-Z-Browser: - Displays tabs like A \| B \| C \| ... - Every tab is configurable: - A tab has a label like A or XYZ. There isn't any restriction for labels.I. e. you can label a tab like 0-9, A-Z, äöüß, ... - A tab has so called initials. Examples are - A - A, B, C, D, E - A, Ä - 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 - Initials aren't case sensitive in the default mode. If a tab has the initial A, it will display all records which first record is "A" or "a". You can configure, that initials will be processed case sensitive. A tab with the initial A will display records which first record is "A" but won't display records which first record is "a". - Every tab got a link, if its initials match records. The HTML-a-tag has the title property like "1 item" or "32 items". - You can deactivate the title property. - You can configure the word item and items. - If any initial of a tab doesn't match any record, you can configure, that a tab won't be displayed. It is configurable as default for all tabs and for every tab in particular. - A tab can extend with the property special. - If a tab gets the special property "all", it displays all records. - If a tab gets the special property "others", it displays all records, which aren't displayed by the other tabs. - If the user is visiting a page with the Browser Tutorial Navigation (en) the first time thus without activating any tab, you can configure the default tab. The value for the default tab is the label of the tab which should be displayed as the default. Example for the value are: "A", "XYZ", "0-9", if you have labeled tabs in the same way. - The A-Z-Browser process all values from the first field of your SQL select statement. If you need another field than the first field, you can configure it of course. - The A-Z-Browser supports UTF-8 and multi-byte respectively. The A-Z-Browser detects the environment in your database in PHP files. If the detection fails, you can configure the environment by your own. .. _Step-5-A-Z-Browser-with-German-Umlaute: Step 5: A-Z-Browser with German Umlaute ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Example: Example """"""" |img-6| |img-6| .. _TypoScript: TypoScript """""""""" You find the TypoScript code in res/tutorial\_01/step\_05.txt plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } } } navigation.a-z\_Browser { tabs { 2.valuesCSV = **A, Ä, ä** 16.valuesCSV = **O, Ö, ö** 19.valuesCSV = **S, ß** 21.valuesCSV = **U, Ü, ü** } } } Important: Special signs must displayed in a human readable format in your TypoScript Object Browser. I.e: - This is proper: A, Ä - This is wrong: A, ö |img-6| .. _Case-Sensitive: Case Sensitive """""""""""""" If you use the A-Z-Browser in the non case sensitive mode (it is the default mode) like plugin.tx\_browser\_pi1.navigation.a-z\_Browser.caseSensitive = 0 please configure the initials with both: the special sign in lower case and upper case like below: plugin.tx\_browser\_pi1.navigation.a-z\_Browser.tabs.2.valuesCSV = A, Ä, ä .. _Real-URL: Real URL """""""" You should understand a special context between the A-Z-Browser and real URL: - If a visitor is the first time on a list view, there should be a default tab for real URL. - If you have a default tab for real URL you will get a URL to a single view like.../anliegen/ **A-Z** /abgeschlossenheitsbescheinigung/ - If you haven't a default tab for real URL you will get a URL to a single view like.../anliegen//abgeschlossenheitsbescheinigung/ |img-6| You need this line in your TypoScript (this is the default): plugin.tx\_browser\_pi1.navigation { a-z\_Browser { defaultTab.realURL = **1** } } |img-6| In your real URL configuration (i.e. in the file realurl\_conf.php) you need a configuration according to your TypoScript like: $TYPO3\_CONF\_VARS['EXTCONF']['realurl']['\_DEFAULT']['fixedPostVars'] = array ( 'tx\_civserv\_form' => array ( array ( 'GETvar' => 'tx\_browser\_pi1[azTab]', 'valueDefault' => **'A-Z'** , ), ... Line 8 is the important one. You don't need any of the configuration above, if you aren't using the A-Z-BRowser or if your aren't using real URL. .. _Further-Information: Further Information """"""""""""""""""" See the Tutorial RealURL. .. _Step-6-A-small-A-Z-Browser: Step 6: A small A-Z-Browser ^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Example: Example """"""" |img-6| |img-6| .. _TypoScript: TypoScript """""""""" You find the TypoScript code in res/tutorial\_01/step\_06.txt plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } } } navigation.a-z\_Browser { defaultTab = **2** tabs > tabs { 0 = **All** 0.special = **all** 1 = **0-9** 1.valuesCSV = **0,1,2,3,4,5,6,7,8,9** 2 = **A-Z** 2.valuesCSV = **A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z** 3 = **OTHERS** 3.special = **others** 3.displayWithoutItems = **0** } } } .. _If-you-need-your-own-A-Z-Field: If you need your own A-Z Field ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The A-Z-Browser takes the initial from the first field in the select statement. Sometimes you need another field, i.e. if the first field is the uid. In this case you have to configure the A-Z-Browser in the current view. .. _TypoScript: TypoScript """""""""" Code (cutout) plugin.tx\_browser\_pi1 { views { list { 1 { a-z\_Browser { field = **tt\_news.title** } select = tt\_news.uid, tt\_news.title } } } } .. _Add-parameters: Add parameters ^^^^^^^^^^^^^^ .. _When-do-I-have-to-add-parameters: When do I have to add parameters? """"""""""""""""""""""""""""""""" |img-6| The illustration above is an example for needing parameters: - You have a single view with a fe\_user record - You offer the view – this record – for download as a PDF file (see the link inside the yellow circle) - You offer the view – this record – for optimized printing (see the link inside the yellow circle) You have to add one parameter at least to this links: The pdf link and the print link have to know the uid of the fe\_user at least. .. _TypoScript: TypoScript """""""""" .. _Snippet: Snippet ~~~~~~~ plugin.tx\_browser\_pi1 { template { ... add\_parameter { browser = COA browser { // showUid 10 = TEXT 10 { dataWrap = &tx\_browser\_pi1[showUid]={GPvar:tx\_browser\_pi1\|showUid }&###CHASH### if.isTrue.data = GPvar:tx\_browser\_pi1\|showUid } ... } } } } The browser has a draft TypoScript snippet for adding all browser default parameters. See the snippet above or plugin.tx\_browser\_pi1.template.add\_parameter .. _How-can-I-use-the-snippet-the-draft: How can I use the snippet / the draft? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The TypoScript snippet below is the snippet for the example above. temp.pdflink { 10 = TEXT 10 { value = PDF typolink { parameter = {page:uid},123 \_blank - "Seite als PDF-Datei herunterladen" parameter.insertData = 1 additionalParams { cObject = COA cObject { 10 < plugin.tx\_browser\_pi1.template.add\_parameter.browser 20 < plugin.tx\_browser\_pi1.template.add\_parameter.extensions.org } } } } } Line 11: The typolink get the additional parameters from the browser Line 12: The typolink get the additional parameters from a third party extension, which is bases on the browser:form the Organiser If you are developing an extension based on the browser, you find a snippet below, for how to integrate your own additional parameters. .. _Parameters-by-third-party-extensions: Parameters by third party extensions """""""""""""""""""""""""""""""""""" plugin.tx\_browser\_pi1 { template { add\_parameter { extensions { org = COA org { // calendarUid 10 = TEXT 10 { dataWrap = &tx\_browser\_pi1[calendarUid]={GPvar:tx\_browser\_pi1\|\ca lendarUid}&###CHASH### if.isTrue.data = GPvar:tx\_browser\_pi1\|calendarUid } // departmentUid 20 = TEXT 20 { dataWrap = &tx\_browser\_pi1[departmentUid]={GPvar:tx\_browser\_pi1\|\ departmentUid}&###CHASH### if.isTrue.data = GPvar:tx\_browser\_pi1\|departmentUid } // eventUid 30 = TEXT 30 { ... Above is an example provided by the extension Organiser (org). .. _Localization: Localization ^^^^^^^^^^^^ Every tab of the A-Z-Browser has the stdWrap property. There are two examples in the include static template for localization. Take a look in the configuration array of the tab [All] and [Others]. See the snippet below: .. _TypoScript: TypoScript """""""""" Code (cutout) plugin.tx\_browser\_pi1 { a-z\_Browser { tabs { 0 = All 0 { special = all stdWrap { data = **LLL:EXT:browser/pi1/locallang.xml:label\_azbrowser\_all** } } ... 25 = Others 25 { special = others displayWithoutItems = 0 stdWrap { data = **LLL:EXT:browser/pi1/locallang.xml:label\_azbrowser\_others** } } } } } Another example for localization: plugin.tx\_browser\_pi1 { a-z\_Browser { tabs { 0 = All 0 { special = all stdWrap { lang.de = **Alle** } } } } } .. _Tutorial-Record-Browser: Tutorial: Record Browser ------------------------ .. _Configuring-by-the-flexform: Configuring by the flexform ^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Enabling-and-disabling: Enabling and disabling """""""""""""""""""""" |img-6| You enable and disable the record browser in the tab [Single View] and the select box [Record Browser]. You have three options: - disabled - enabled - configuration by the flexform - Take it from TypoScript (default) .. _Disabled: Disabled ~~~~~~~~ The record browser is disabled. .. _Enabled-configuration-by-the-flexform: Enabled - configuration by the flexform ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The record browser is enabled. You configure the browser with the properties of the select box. Advantage: - You have an user interface for the configuration - You can't make syntactical mistakes - You don't know nothing about TypoScript Disadvantage If you are using the browser plugin several times on your website,you have to configure each plugin/flexform. .. _Take-it-from-TypoScript-default: Take it from TypoScript (default) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The record browser is enabled, if it is enabled by TypoScript (default). You configure the browser with the properties of the TypoScript. Advantage: If you are using the browser plugin several times on your website,you have to configure the record browser once only. .. _Configuring: Configuring """"""""""" |img-6| [Record Browser] See explanation above [Record Browser: Tutorial] Link to this tutorial on typo3.org [Record Browser: if there isn't any result]Behavior of the record browser, if there is only one record in the single view [Record Browser: if there isn't any record for linking]Behavior of the buttons of the record browser, if there isn't any record fora button. [Record Browser: display link to the first and the last record]Behavior of the buttons for the first and last record. [Record Browser: labeling] Templates for the record browser with chars, icons, positions and text. .. _Jquery-UI-user-interface: Jquery UI (user interface) """""""""""""""""""""""""" This feature will be official in TYPO3 browser version 4.0.0 |img-6| Tab [Templating] Configure the graphical design of your record browser. [CSS jQuery UI] Select the jQuery UI you like. Or don't embed it, if you don't like it or ifyou don't need it. You will have a better performance. .. _Deactivate-jQuery: Deactivate jQuery """"""""""""""""" If you don't need the jQuery UI (user interface) it is recommended to disable jQuery files. You will get a better performance. |img-6| [jQuery UI] The jQuery UI JavaScript file.You don't need it, if you don't use the jQuery UI (see above). [jQuery Plugin t3browser] The jQuery Plugin of the TYPO3 browser.This plugin enables AJAX support.You don't need it, if you don't like AJAX support. .. _Configuring-by-TypoScript: Configuring by TypoScript ^^^^^^^^^^^^^^^^^^^^^^^^^ Please see the TypoScript properties in the Reference section "record\_browser" on page 27 below. .. _Best-practice: Best practice """"""""""""" .. _Be-aware-of-the-current-property: Be aware of the current property ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The browser plugin takes the TypoScript configuration from the current property while runtime. plugin.tx\_browser\_pi1 { navigation { record\_browser { items { current { // ... // <-- will be taken while runtime } // } items\_wo\_link { // Same like .icons but without typolink } } } } If the property "enabled – configured by TypoScript" is selected in the flexform, the array items.current will be overriden by the flexform values. plugin.tx\_browser\_pi1 { navigation { record\_browser { items { current { // if the property "enabled – configured by flexform" is selected ... // <-- in the flexform, this array will be overriden by the flexform } // while runtime } items\_wo\_link { // Same like .icons but without typolink } } } } The best way for change the configuration to your needs is: - Edit the configuration of the property you like, f.e. items.chars - Copy the configuration to the current array. See the snippet below. plugin.tx\_browser\_pi1 { navigation { record\_browser { items { chars { ... // <- Do your changes here } current < .chars // <- Copy your changes to current } items\_wo\_link { // Same like .icons but without typolink } } } } .. _The-needs-for-your-HTML-template: The needs for your HTML template ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ There are two needs for your HTML template, if you like to use the record browser .. _Marker-RECORD-BROWSER-required: Marker ###RECORD\_BROWSER### (required) """"""""""""""""""""""""""""""""""""""" You have to place the marker ###RECORD\_BROWSER### into your single view. See example below. .. _Id-for-the-single-view-required-for-AJAX-only: Id for the single view(required for AJAX only) """""""""""""""""""""""""""""""""""""""""""""" If you like to use AJAX, the single view needs an identifier. This identifier has to include some information like the id of the current plugin, the view and the mode. Because the data are available while runtime only, you have to use markers. See example below. .. _HTML-snippet: HTML snippet """""""""""" ...
**###RECORD\_BROWSER###**

###TITLE###

... The id from above id="c###TT\_CONTENT.UID###-###VIEW###view-###MODE###" will become while runtime i.e. id="c12-singleview-1" c12 means: the browser plugin – the content element – has the id 12 in the table tt\_content. singleview-1 means: single view with the elment 1 (from the TypoScript) array. .. _Configuring-the-AJAX-page-object: Configuring the AJAX page object ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you like to use AJAX, you need a page object. The browser has a template, you have to copy the template to the TypoScript only: - to your page with the Browser plugin or - to the root page, if you are using the Browser plugin on different pages. Templates are prepared for default (without configured language) and for this languages: - en - es - de - fr - it .. _Default-TypoScript-Template: Default TypoScript Template """"""""""""""""""""""""""" The default template doesn't contain a configuration for a language. Because English is the TYPO3 default language, all Browser labels – like the back button – will be displayed in English. .. _TypoScript-snippet: TypoScript snippet ~~~~~~~~~~~~~~~~~~ //////////////////////////////////////////////////////// // // ajax page object II browser\_content < plugin.tx\_browser\_pi1.javascript.ajax.jQuery.default // ajax page object II If you are interested in the TypoScript configuratuion or if you like to change something, please inspect - browser\_content or - plugin.tx\_browser\_pi1.javascript.ajax.jQuery.default .. _In-case-of-localization: In case of localization """"""""""""""""""""""" If you have a localized TYPO3 page – i.e. for English, German and Spanish – you can use the localized AJAX page object templates of the Browser plugin. You have to configure the sys\_language\_uid in every case. The example below: - There are configured the three languages English, German and Spanish - The sys\_language\_uid is configured by the TypoScript Constant Editor n case of English and German - The sys\_language\_uid is configured in the TypoScript directly in the case of Spanish If you are using a language without a prepared template like Turkish for example: - Please take the default template (see above). - Configure the language properties like in the prepared templates. .. _TypoScript-snippet: TypoScript snippet ~~~~~~~~~~~~~~~~~~ //////////////////////////////////////////////////////// // // ajax page object II // English (EN) // Id of sys\_language: Configured by the Constant Editor. // See: plugin.tx\_browser\_pi1.typeNum.sys\_language\_en browser\_content < plugin.tx\_browser\_pi1.javascript.ajax.jQuery.en [globalVar = GP:L = 1] // German (DE) // Id of sys\_language: Configured by the Constant Editor. // See: plugin.tx\_browser\_pi1.typeNum.sys\_language\_de browser\_content < plugin.tx\_browser\_pi1.javascript.ajax.jQuery.de [global] [globalVar = GP:L = 2] // Spanish (ES) browser\_content < plugin.tx\_browser\_pi1.javascript.ajax.jQuery.es browser\_content { // Id of sys\_language: Configured by the Constant Editor. browser\_content.config.sys\_language\_uid = 2 } [global] // ajax page object II .. _Why-is-it-called-ajax-page-object-II: Why is it called "ajax page object II"? """"""""""""""""""""""""""""""""""""""" In the TypoScript comment we called the AJAX page object the "ajax page object II". The browser is working with a AJAX page object "I" for all other AJAX functionality. The AJAX page object II is a new concept, which simplified the AJAX configuration and makes it more flexible for JavaScript-Developers. The old concept (the AJAX page object I) will be replaced by the new concept in the Browser version 4.0 completely. .. _Non-supported-Features: Non supported Features ^^^^^^^^^^^^^^^^^^^^^^ The record browser isn't type specific. For example: - You have a list with news. - Some news are typed as external links. - If you are clicking on this news, you want see the single view on the same page, but the content of the external website. - If you are moving from the list view with the tt\_news, the record browser will display every news. News of the type external link too. .. _Background: Background ---------- .. _The-record-browser-session: The record browser session ^^^^^^^^^^^^^^^^^^^^^^^^^^ The record browser is working with a session. If a user is calling the list view, the result ids will be stored in the session. The record browser of the single view don't need to render the list results again. This has two advantages: - Good performance - All information of the list like a search word or filters will keep in mind .. _Disable-the-session-management: Disable the session management """""""""""""""""""""""""""""" If you don't want a session management, you can disable it by the flexform. See tab [General] field [Session management]. Be aware of the disadvantage for the performance. Without session management but with a record browser there will be the workflow for each single view: - The list view will be rendered (in the background) - The single view will be rendered with the record browser. - All information of the list view like a search word or filters will lost in space. .. _Known-Bug: Known Bug """"""""" There is a known bug in context with session management. See section "Record Browser" on page 31 below. .. _Reference: Reference --------- See the complete Reference in the Browsers manual. - 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 `_ .. _Navigation: Navigation ^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _navigation: navigation """""""""" .. container:: table-row Property navigation Data type array Description Array for configuring the - a-z-browser - modeSelector - page browser - record browser :: plugin.tx_browser_pi1 { navigation { a-z_Browser { } modeSelector { } pageBrowser { } record_browser { } } } Default See below .. ###### END~OF~TABLE ###### .. _a-z-Browser: a-z\_Browser ^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _a-z-Browser: a-z\_Browser """""""""""" .. container:: table-row Property a-z\_Browser Data type a-z\_Browser Description Array for configuring the a-z-browser display.tabWithoutItems (boolean): - 1: A tab will be displayed in any case, if a tab hasn't any result it will be displayed too. - 0: A tab will be displayed only, if it has a result. - display.tabWithoutItems can be overwritten bytabs.X.displayWithoutItems (see below) display.tabHrefTitle (boolean): - 1: The link of a tab will get a-title property like... - 0: The link of a tab won't get any title property display.tabWithoutItems can be overwritten bytabs.X.displayWithoutItems (see below) defaultTab (integer): The id of the current tab, if the user hasn't choose any tab. defaultTab.display\_in\_url (boolean): - 0 (default): Don't display default tab name in URL like:.../service/ - 1: Display default tab name in URL like:.../service/A-Z/All/ defaultTabWrap (string): - The default wrap for all tabs inside the href.Example: \| - If you need a wrap only for one tab, please iuse the wrap property of the tab. caseSensitive (boolean): - 1: The values in tab. *X* .valuesCSV are case sensitive. - 0: The values in tab. *X* .valuesCSV aren't case sensitive. field: - Default is the first table.field element of the current view (first value in view.list. *X* .select - If you need another field for your a-z-browser, please define it in the variable field in the syntax table.field.Example: tt\_news.title - field is only respected in a view (local) and not in the global array. tabs: See tabs on page 25 below. charset (string: auto \| iso \| utf): - Default is auto. I. e.: if you have a database in a one byte format (like ISO), the a-z\_Browser will use one byte methods. If the database has a multi byte format (like UTF-8), the a-z\_Browser will use multi byte methods. - If you have any problems with so called German Umlaute or other multi byte chars, try to set the char set manually. Possible values are iso or utf. **Example:** :: plugin.tx_browser_pi1.navigation.a-z_Browser { display { tabWithoutItems = 1 tabHrefTitle = 1 } defaultTab = 0 defaultTab { realURL = 1 } caseSensitive = 0 field = tabs { ... } charset = auto } Default .. _a-z-Browser-tabs: a-z\_Browser.tabs """"""""""""""""" .. container:: table-row Property a-z\_Browser.tabs Data type array Description Array with the tabs (like A, B, C, ... or A-E, F-J, ...) in the a-z-browser tab. *X* = name of the tab. Examples - A - 0-9 - 0-Z tab. *X* .valuesCSV (comma seperated values). Examples: - tab. *X* is A: proper valuesCSV for a German list would be a and ä - tab. *X* is A-E: proper valuesCSV for a German list would be a, ä, b, c, d and e tab. *X* .wrap (string): - The wrap for the tab. - If you need the same wrap for all tabs, please use the property :: a-z_Browser.defaultTabWrap tab. *X* .stdWrap stdWrap property. Important in context of localization (see examples in the tutorial "Page Browser and A-Z-Browser above) tab. *X* .special - all: Will display all records of the result list - others: Will display all records, which don't match any value in the valuesCSV of any tab tab. *X* .displayWithoutItems (boolean): - Default: 1 - 1: The tab will be displayed in any case, if the tab hasn't any result it will be displayed too. - 0: The tab will be displayed only, if it has a result. tabs.X.displayWithoutItems overwrites display.tabWithoutItems (see above) **Example:** :: plugin.tx_browser_pi1.navigation.a-z_Browser.tabs { 0 = All 0 { special = all stdWrap { lang.de = Alle } } 1 = 0-9 1 { valuesCSV = 0,1,2,3,4,5,6,7,8,9 } 2 = A 2 { valuesCSV = a,ä } 3 = C 3 { valuesCSV = c } ... 26 = Z 26 { valuesCSV = z } 27 = Others 27 { special = others displayWithoutItems = 0 } } Default .. ###### END~OF~TABLE ###### .. _pagebrowser: pagebrowser ^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _pagebrowser: pagebrowser """"""""""" .. container:: table-row Property pagebrowser Data type array Description Configuration of the pagebrowser. The pagebrowser is only available in list views. It's possible to hide it by TypoScript (see property Error: Reference source not found on page Error: Reference source not found). If you want to know more, please read the Reference in the tt\_news manual pageBrowser.[options] If the a-z\_Browser is active, all results are depending on the current selection of the a-z\_Browser. I.e the tab "A" of the a-z\_Browser is active and there are 40 items with the first letter "A", the pageBrowser will display two tabs for the first 20 results and the second 20 results. **Example:** :: plugin.tx_browser_pi1.navigation { pageBrowser { maxPages = 10 results_at_a_time = 20 showResultCount = 1 dontLinkActivePage = 1 tableParams = \ cellpadding="2" align="center" showFirstLast = 1 pagefloat = center showRange = 1 wrap { disabledLinkWrap = \ | inactiveLinkWrap = | activeLinkWrap = \ | showResultsWrap = |
showResultsNumbersWrap = browseBoxWrap = browseLinksWrap = | } } } Default See the example .. ###### END~OF~TABLE ###### .. _record-browser: record\_browser ^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _record-browser: record\_browser """"""""""""""" .. container:: table-row Property record\_browser type array Description **Example:** :: plugin.tx_browser_pi1 { navigation { // [BOOLEAN] Display the record browser record_browser = 1 record_browser { display { // [BOOLEAN] 0: Don't display the record browser, // if there isn't any result/record. withoutResult = 1 // [BOOLEAN] 0: Don't display link to first and last record firstAndLastButton = 1 // [BOOLEAN] 0: Display buttons with a link only. buttonsWithoutLink = 1 } buttons { chars { // Box: wrap for all buttons wrap_all = TEXT wrap_all { // [STRING] empty (default): empty value will allocated while runtime // with the rendered buttons. value = wrap =
    |
} // The devider between of two buttons devider = TEXT devider { value = noTrimWrap = | | | } // First button of the record browser first = TEXT first { value = << noTrimWrap = |
  • |
  • | typolink { parameter = {page:uid} – c###TT_CONTENT.UID###-record-browser \ ###RECORD_POSITION###/###RECORD_SUM### parameter { insertData = 1 } additionalParams = \ &tx_browser_pi1[showUid]=###RECORD_UID###&###CHASH### } } prev { // Previous button of the record browser } curr { } next { } last { } } icons { // Same like .chars but with icons } position { // Same like .chars but with the numbers of the position } text { // Same like .chars but with text labels } current < .icons } buttons_wo_link { // Same like .icons but without typolink } } } } .. ###### END~OF~TABLE ###### .. _What-s-new-in-Version-3: What's new in Version 3? ------------------------ .. _Additional-parameters: Additional parameters ^^^^^^^^^^^^^^^^^^^^^ [3.6.2] The browser provides a TypoScript snippet for adding additional parameters. See the example above. .. _Record-Browser: Record Browser ^^^^^^^^^^^^^^ [3.7.0] New feature. See the "Tutorial: Record Browser" on page 15 above. .. _Helpful-suggestions: Helpful suggestions ------------------- .. _Forum: Forum ^^^^^ If you have helpful suggestions, feel free to publish any question, bug or code snippet on `http://typo3-browser-forum.de/ `_ Posts are welcome in English and German. .. _Credits: Credits ------- .. _freemedia-ch: freemedia.ch ^^^^^^^^^^^^ |img-6| Thanks to Freemedia Medien & Verlag ( `http://freemedia.ch `_ ), who sponsored the record browser. .. _Known-Bugs: Known Bugs ---------- .. _Record-Browser: Record Browser ^^^^^^^^^^^^^^ The record browser is using a session for storing the uids of all records for the single view. If you cache your list view, there will be this result: - [OK] First visit with all records:session data will be updated and will be proper. - [OK] User configures the list view with filters or a search word:session data will be updated and will be proper. - [BUG] User resets the list view form(all records will displayed again):session data won't be updated and won't be proper. Session data contains the previous result of the configured list view. If someone has an idea, I will be happy for every post in the forum. See "Forum" on page 29 above. .. _To-Do-List: To-Do List ---------- Nothing to do. .. _Change-Log: Change Log ---------- 3.7.1 **Improvement** \* 00000: How to configure the AJAX page object for the database browser 3.7.0 **New Feature** \* 27041: Record browser for the single view **Improvements** \* 00000: All browsers got the navigation array 3.6.2 **New Feature** \* 13597: TypoScript snippet for additional parameters 3.0.1 **Initial release** .. _Illustration-Index: Illustration Index ------------------ Illustration 1: Tutorial in PDF format 3 Illustration 2: List view with A-Z-Browser (1) & page browser (2) 4 Illustration 3: Single view with record browser (3) 4 Illustration 4: List view with A-Z-Browser (1) & page browser (2) 4 Illustration 5: List view with A-Z-Browser (1) & page browser (2) 4 Illustration 6: Disable A-Z-Browser and Page Browser 5 Illustration 7: The browsers are active 6 Illustration 8: The browsers are switched off. 6 Illustration 9: Page browser with default labels. 6 Illustration 10: Page browser with configured labels. 6 Illustration 11: The Page Browser array in the TypoScript. 7 Illustration 12: The Page Browser array in the TypoScript. 7 Illustration 13: The view list. 7 Illustration 14: The A-Z-Browser. 7 Illustration 15: The tab [U] hasn't any result before configuration. 8 Illustration 16: The tab [U] has one item after configuration. 8 Illustration 17: Example for the tab "A" with initials "A, Ä". 9 Illustration 18: Example for the tab "A" with initials "A, Ä". 10 Illustration 19: The default tab will be displayed in the real URL path. 10 Illustration 20: The A-Z-Browser with the default configuration. 11 Illustration 21: The A-Z-Browser with the a "small" configuration. 11 Illustration 22: Download this page as PDF or print it! 12 Illustration 23: Enable or disable the record browser with the flexform 15 Illustration 24: Configure the record browser 16 Illustration 25: jQuery UI for the record browser 17 Illustration 26: Disable jQuery for the record browser 17 Illustration 27: http://freemedia.ch 30 34 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 27 .. :hspace: 4 .. :id: Grafik2 .. :name: Grafik2 .. :width: 98 .. |img-3| image:: img-3.png .. :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:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 205 .. :id: graphics9 .. :name: graphics9 .. :width: 227 .. |img-6| image:: data: :alt: Frame4 .. :align: bottom .. :id: Frame4 .. :name: Frame4