the one thing to list everything

pt_extlistThe one thing to list everything

Who we are

Michael KnollKarlsruhe, GermanyWorking at punkt.de

Daniel LienertFrankfurt, GermanyFreelancer

Outline of our talk

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

Motivation - Lists, lists, lists...

Lists, lists, lists...

Lists, lists, lists...

Conclusions

• „Lists are everywhere“• Having a generic tool for generating lists– enables rapid prototyping– enables faster Time-To-Market for projects

– lets developers concentrate on more interesting stuff

can save time & money

Lists distilledOn our way to a generic list generator

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

Main parts of a listRows, Columns, Cells

„What is a list?“

1. It‘s a collection of rows

„What is a list?“ (Cont‘d)

2. It‘s a collection of columns

„What is a list?“ (Cont‘d)

3. It‘s a collection of cells

„What is a list?“ (Cont‘d)

4. It can have a set of headers

Lists are not staticSorting, Filtering, Paging & Aggregating

Data Sources

Connect to multiple data sources like MySQL, solr, …

Data „Magic“

Sorting

It should be possible to sort the rows of a list

Filtering

It should be possible to filter rows

Paging

It should be possible to limit number of rows per page

Aggregating

It should be possible to aggregate columns

Requirements

• A (generic) list generator should be able to

• use multiple data sources

• render rows, cells & headers

• sort, filter & limit results

• aggregate data

Architecture

pt_extlist

pt_extbase

Extbase / Fluid

TYPO3

How to use pt_extlist

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

pt_extlist – Basic Features

Introduction to pt_extlist‘s content elements

Filters

List

Aggregate

Pager

Filters

Filterbox

Filter

List

List

Header (sorting)

Setting up a first list

1.Create TypoScript setup Declare list identifier

2. Insert plugin as content elements Select previously declared list identifier

List-Identifier

Data-Source

Typo-Script-Setup

Plugin

render

TypoScript Setup

TypoScript Setup

• What do you have to set up?

• Data Backend

• Data Fields

• Columns

• Filters

TypoScript Setup (List

identifier)

plugin.tx_ptextlist.settings {

listConfig.infoTables {

# Here goes your configuration

}

}

List Identifier!

TypoScript Setup (Data Backend)

listConfig.infoTables {

backendConfig < plugin.tx_ptextlist.prototype.backend.typo3

backendConfig {tables (

static_countries)

}

TypoScript Setup (Data Fields)

listConfig.infoTables {

/* ... */

fields {name_en {

table = static_countriesfield = cn_short_en

}

phone {table = static_countriesfield = cn_phone

}

}}

TypoScript Setup (Columns)

listConfig.infoTables { /* ... */

columns {

10 {columnIdentifier = nameColumnlabel = Country NamefieldIdentifier = name_en

}

20 {columnIdentifier = phoneColumnlabel = PhonefieldIdentifier = phone

}}

}

pt_extlist‘s plugins

pt_extlist‘s plugins (Cont‘d)

pt_extlist‘s plugins (Cont‘d)

List plugin

Frontend

TypoScript Setup (Filter)

listConfig.infoTables { /* ... */

filters {filterbox1 {

filterConfigs {10 <

plugin.tx_ptextlist.prototype.filter.string10 {

filterIdentifier = contryNameFilterlabel = Country NamefieldIdentifier = name_en

}}

}}

}

Filterbox plugin

Filterbox plugin (Cont‘d)

Frontend (Filter)

Pager plugin

Frontend (Pager)

Frontend (Sorting)

Frontend (Sorting)

Advanced Features

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

start end

TypoScript Rendering

Use the power of TypoScript to

• Render links, images, arbitrary HTML in your list

• Configure complex lists by overwriting list identifiers

• Use GET and POST parameters for filtering

Rendering images with TS

columns { 10 {

columnIdentifier = unoColumnlabel = UNOfieldIdentifier = name_en, uno_member

renderObj = COArenderObj {

10 = IMAGE10.if {

value.data = field:uno_memberequals = 1

}10.file = /* path_to_image */10.stdWrap.typolink.parameter = http://www.un.org

}/* ... Further configuration ... */

}}

}

Rendering images with TS

Rendering links with TScolumns {

10 {columnIdentifier = unoColumnlabel = UNOfieldIdentifier = name_en, uno_member, uid

renderObj = COArenderObj {

/* ... Further configuration ... */

20 = TEXT20.value = Details20.typolink.parameter = 120.typolink.additionalParams.dataWrap =

&tx_someextension_controller_details[countryuid]={field:uid} }

}}

}

Rendering links with TS

FLUID Templates• Change Template for every Controller /

Action pair via TypoScript

plugin.tx_ptextlist.settings.listConfig.<yourListId> { controller.List.list.template = EXT:your_ext/Resources/

Private/Templates/YourTemplate.html}

FLUID Templates (cont‘d)

• Easy-to-learn FLUID syntax for creating your own templates

• Unlimited options for styling your lists

<f:for each="{listData}" key="rowIndex" as="listRow"><f:render partial=“yourPartial“ arguments=“{row:}" />

</f:for>

FLUID Templates (cont‘d)

• Example

Further stepsHow to get deeper into pt_extlist

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

start end

Demolist PackageThere are many more examples of TypoScript Configurations within the

Demolist package( static template)

Demolist PackageDemolists explain some more features like

•Export

•Structured lists

•Complex dependencies and ignores of filters

•Using your own partials for rendering cells

•...

TypoScript Reference

• ~100 pages reference on pt_extlist‘s TS

YAG GalleryPhoto-Gallery management for TYPO3

Implemented using Extbase & pt_extlist

YAG Gallery Extension

• Flexible Gallery System for TYPO3

• Based on Extbase

• Using pt_extlist for

• Filtering Images by Galleries, Albums, Categories and Tags

• Rendering Image lists in Frontend and Backend

YAG Gallery Extension

visit our talk on Saturday

(tomorrow )

at 11:00

Further information

• pt_extlist website http://extlist.punkt.de

•pt_extlist on FORGE http://forge.typo3.org/projects/extension-pt_extlist

•Current developer‘s version (use „develop“ branch!) https://www.github.com/daniellienert/pt_extlist

Q & A

Thank you for yourattention!