Illustration 23: Enable or disable the record browser with the flexform
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
The record browser is disabled.
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)
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.
Illustration 24: Configure the record browser
[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 for a 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.
This feature will be official in TYPO3 browser version 4.0.0
Illustration 25: jQuery UI for the record browser
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 if you don't need it. You will have a better performance.
If you don't need the jQuery UI (user interface) it is recommended to disable jQuery files. You will get a better performance.
Illustration 26: Disable jQuery for the record browser
[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.
Please see the TypoScript properties in the Reference section "record_browser" on page 27 below.
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
}
}
}
}
There are two needs for your HTML template, if you like to use the record browser
You have to place the marker ###RECORD_BROWSER### into your single view. See example below.
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.
<!-- ###TEMPLATE_SINGLE### begin -->
<!-- ###AREA_FOR_AJAX_LIST_01### begin -->
<!-- ###MODESELECTOR### begin -->
...
<!-- ###MODESELECTOR### end -->
<!-- ###SINGLEVIEW### begin -->
<div id="c###TT_CONTENT.UID###-###VIEW###view-###MODE###" \ class="###VIEW###view ###VIEW###view-###MODE###">
###RECORD_BROWSER###
<h1>
###TITLE###
</h1>
...
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.
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
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
////////////////////////////////////////////////////////
//
// 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
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
////////////////////////////////////////////////////////
//
// 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
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.
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.



