This page is still a beta!

1.4. Tutorial: Record Browser

Configuring by the flexform

Enabling and disabling

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:

  1. disabled

  2. enabled - configuration by the flexform

  3. 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:

  1. You have an user interface for the configuration

  2. You can't make syntactical mistakes

  3. You don't know nothing about TypoScript

Disadvantage

  1. 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:

  1. If you are using the browser plugin several times on your website,you have to configure the record browser once only.

Configuring

Illustration 24: Configure the record browser

  1. [Record Browser]See explanation above

  2. [Record Browser: Tutorial]Link to this tutorial on typo3.org

  3. [Record Browser: if there isn't any result] Behavior of the record browser, if there is only one record in the single view

  4. [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.

  5. [Record Browser: display link to the first and the last record] Behavior of the buttons for the first and last record.

  6. [Record Browser: labeling]Templates for the record browser with chars, icons, positions and text.

Jquery UI (user interface)

This feature will be official in TYPO3 browser version 4.0.0

Illustration 25: jQuery UI for the record browser

  1. Tab [Templating]Configure the graphical design of your record browser.

  2. [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.

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.

Illustration 26: Disable jQuery for the record browser

  1. [jQuery UI]The jQuery UI JavaScript file. You don't need it, if you don't use the jQuery UI (see above).

  2. [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

Please see the TypoScript properties in the Reference section "record_browser" on page 27 below.

Best practice

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:

  1. Edit the configuration of the property you like, f.e. items.chars

  2. 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

There are two needs for your HTML template, if you like to use  the record browser

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)

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

<!-- ###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

  1. id="c###TT_CONTENT.UID###-###VIEW###view-###MODE###"

will become while runtime i.e.

  1. 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

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:

  1. to your page with the Browser plugin or

  2. to the root page, if you are using the Browser plugin on different pages.

Templates are prepared for

  1. default (without configured language)

and for this languages:

  1. en

  2. es

  3. de

  4. fr

  5. it

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

  ////////////////////////////////////////////////////////

  //

  // 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

  1. browser_content or

  2. plugin.tx_browser_pi1.javascript.ajax.jQuery.default

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:

  1. There are configured the three languages English, German and Spanish

  2. The sys_language_uid is configured by the TypoScript Constant Editor n case of English and German

  3. 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:

  1. Please take the default template (see above).

  2. 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

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

The record browser isn't type specific.

For example:

  1. You have a list with news.

  2. Some news are typed as external links.

  3. If you are clicking on this news, you want see the single view on the same page, but the content of the external website.

  4. 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.