DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

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)

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, <http://wildt.at .die-netzmacher.de>

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

Browser Tutorial Navigation (en) 1

Introduction 3

What does it do? 3

Further Information 3

Definitions 4

A-Z-Browser (index browser) 4

Page browser 4

Record browser 4

Tutorial: Page Browser and A-Z-Browser 5

Step 1: Switch the Browsers off 5

Step 2: Labeling the Page Browser 6

Step 3: Configuring the Page Browser 6

Step 4: Configuring the A-Z-Browser 7

Step 5: A-Z-Browser with German Umlaute 8

Step 6: A small A-Z-Browser 11

If you need your own A-Z Field 11

Add parameters 12

Localization 14

Tutorial: Record Browser 15

Configuring by the flexform 15

Configuring by TypoScript 18

The needs for your HTML template 19

Configuring the AJAX page object 19

Non supported Features 21

Background 22

The record browser session 22

Reference 23

Navigation 23

a-z_Browser 24

pagebrowser 26

record_browser 27

What's new in Version 3? 28

Additional parameters 28

Record Browser 28

Helpful suggestions 29

Forum 29

Credits 30

freemedia.ch 30

Known Bugs 31

Record Browser 31

To-Do List 32

Change Log 33

Illustration Index 34

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.

Definitions

Frame4 Frame4

A-Z-Browser (index browser)

Frame4

The A-Z-Browser (1) groups your records by initials or numbers. You are using the A-Z-Browser in list views.

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

Frame4

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

Step 1: Switch the Browsers off

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

Frame4

Disable in the frontend plugin the options:

  • A-Z-Browser and
  • Page Browser
Result

Frame4 Frame4

Step 2: Labeling the Page Browser

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

Frame4 Frame4

Step 3: Configuring the Page Browser

You can configure the Page Browser in the same way like the extension tt_news.

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.

Frame4

Step 4: Configuring the A-Z-Browser

There are a lot of possibilities for configuring the A-Z-Browser.

TypoScript

The A-Z-Browser has a TypoScript array.

plugin.tx_browser_pi1.navigation {

a-z_Browser {

...

}

}

Frame4

The A-Z-Browser properties

Frame4 Frame4

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

Example

Frame4 Frame4

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, ö

Frame4

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

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/

Frame4

You need this line in your TypoScript (this is the default):

plugin.tx_browser_pi1.navigation {

a-z_Browser {

defaultTab.realURL = 1

}

}

Frame4

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

See the Tutorial RealURL.

Step 6: A small A-Z-Browser

Example

Frame4 Frame4

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

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

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

When do I have to add parameters?

Frame4

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

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

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

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

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

Configuring by the flexform

Enabling and disabling

Frame4

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.

Configuring

Frame4

[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)

This feature will be official in TYPO3 browser version 4.0.0

Frame4

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

If you don't need the jQuery UI (user interface) it is recommended to disable jQuery files. You will get a better performance.

Frame4

[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

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:

  • 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

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

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

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

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

//

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

  • 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

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

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

There is a known bug in context with session management. See section "Record Browser" on page 31 below.

Reference

See the complete Reference in the Browsers manual.

a-z_Browser

a-z_Browser

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<a href="..." title="10 items">...
  • 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: <span>|</span>
  • 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

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

pagebrowser

pagebrowser

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 = \
        <span class="SCell">|</span>
      inactiveLinkWrap = |
      activeLinkWrap   = \
        <span class="SCell">|</span>
      showResultsWrap  = |<br />
      showResultsNumbersWrap =
      browseBoxWrap    =
      browseLinksWrap  = |
    }
  }
}

Default

See the example

record_browser

record_browser

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  = <ul id="record-browser" class="ui-widget ui-helper-clearfix">|</ul><div id="update-prompt"></div>
          }
            // The devider between of two buttons
          devider = TEXT
          devider {
            value =
            noTrimWrap = | | |
          }
            // First button of the record browser
          first = TEXT
          first {
            value = &lt;&lt;
            noTrimWrap  = |<li class="ui-state-default ui-corner-all"> | </li>|
            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
      }
    }
  }
}

What's new in Version 3?

Additional parameters

[3.6.2]

The browser provides a TypoScript snippet for adding additional parameters. See the example above.

Record Browser

[3.7.0]

New feature. See the "Tutorial: Record Browser" on page 15 above.

Helpful suggestions

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

freemedia.ch

Frame4

Thanks to Freemedia Medien & Verlag ( http://freemedia.ch ), who sponsored the record browser.

Known Bugs

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

Nothing to do.

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