Almost every web site that delivers dynamic content has one or more listings of all kinds of stuff, e.g. news articles on news pages or procucts within an online shop. Many hours of web development are kind of wasted with programming stuff like pagers, sorting and filters over and over again. pt_extlist tries to fulfill these requirement in a generic approach. Lists of any database records you keep within your TYPO3 instance or even on external databases can be set up easily using TypoScript and hence be generated by Integrators without writing a single line of PHP code. Once configured, a list can be put on any page using content elements. Fluid templating makes it easy to adapt the look and feel of all elements. In this talk you will learn how to set up prototypes for web applications much faster than your competitors and speed up development by re-using existing tools. Creating lists will never be the same once you started using this extension!

1. pt_extlist
The one thing to list everything

2. Who we are
Daniel Lienert
Frankfurt, Germany
Freelancer
Michael Knoll
Karlsruhe, Germany
Working at punkt.de

3. Outline of our talk
Advanced
Motivation Lists distilled How to use pt_extlist Outlook
features

4. Motivation - Lists, lists, lists...

5. Lists, lists, lists...

6. Lists, lists, lists...

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

8. Lists distilled
On our way to a generic list generator
Lists distilled

9. Main parts of a list
Rows, Columns, Cells

10. „What is a list?“
1. It‘s a collection of rows

11. „What is a list?“ (Cont‘d)
2. It‘s a collection of columns

12. „What is a list?“ (Cont‘d)
3. It‘s a collection of cells

13. „What is a list?“ (Cont‘d)
4. It can have a set of headers

14. Lists are not static
Sorting, Filtering, Paging & Aggregating

15. Data Sources
Data „Magic“
Connect to multiple data sources like MySQL, solr, …

16. Sorting
It should be possible to sort the rows of a list

17. Filtering
It should be possible to filter rows

18. Paging
It should be possible to limit number of rows per page

19. Aggregating
It should be possible to aggregate columns

20. Requirements
• A (generic) list generator should be able
to
• use multiple data sources
• render rows, cells & headers
• sort, filter & limit results
• aggregate data

21. Architecture
pt_extlist
pt_extbase
Extbase / Fluid
TYPO3

22. How to use pt_extlist
How to use pt_extlist

23. pt_extlist – Basic
Features
Introduction to pt_extlist‘s content elements

24. Filters
List
Aggregate
Pager

25. Filters
Filter
Filterbox

26. List
Header (sorting)
List

27. Setting up a first list
1. Create TypoScript setup
 Declare list identifier
2. Insert plugin as content elements
 Select previously declared list identifier

28. Typo-
Data- List-
Script-
Source Identifier
Setup
Plugin
render

29. TypoScript Setup

30. TypoScript Setup
• What do you have to set up?
• Data Backend
• Data Fields
• Columns
• Filters

31. TypoScript Setup (List identifier)
plugin.tx_ptextlist.settings { List Identifier!
listConfig.infoTables {
# Here goes your configuration
}
}

32. TypoScript Setup (Data Backend)
listConfig.infoTables {
backendConfig < plugin.tx_ptextlist.prototype.backend.typo3
backendConfig {
tables (
static_countries
)
}

33. TypoScript Setup (Data Fields)
listConfig.infoTables {
/* ... */
fields {
name_en {
table = static_countries
field = cn_short_en
}
phone {
table = static_countries
field = cn_phone
}
}
}

34. TypoScript Setup
(Columns)
listConfig.infoTables { /* ... */
columns {
10 {
columnIdentifier = nameColumn
label = Country Name
fieldIdentifier = name_en
}
20 {
columnIdentifier = phoneColumn
label = Phone
fieldIdentifier = phone
}
}
}

35. pt_extlist‘s plugins

36. pt_extlist‘s plugins
(Cont‘d)

37. pt_extlist‘s plugins
(Cont‘d)

38. List plugin

39. Frontend

40. TypoScript Setup (Filter)
listConfig.infoTables { /* ... */
filters {
filterbox1 {
filterConfigs {
10 < plugin.tx_ptextlist.prototype.filter.string
10 {
filterIdentifier = contryNameFilter
label = Country Name
fieldIdentifier = name_en
}
}
}
}
}

41. Filterbox plugin

42. Filterbox plugin (Cont‘d)

43. Frontend (Filter)

44. Pager plugin

45. Frontend (Pager)

46. Frontend (Sorting)

47. Frontend (Sorting)

48. Advanced Features
Advanced
features
start end

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

50. Rendering images with TS
columns {
10 {
columnIdentifier = unoColumn
label = UNO
fieldIdentifier = name_en, uno_member
renderObj = COA
renderObj {
10 = IMAGE
10.if {
value.data = field:uno_member
equals = 1
}
10.file = /* path_to_image */
10.stdWrap.typolink.parameter = http://www.un.org }
/* ... Further configuration ... */
}
}
}

51. Rendering images with TS

52. Rendering links with
columns {
10 {
TS
columnIdentifier = unoColumn
label = UNO
fieldIdentifier = name_en, uno_member, uid
renderObj = COA
renderObj {
/* ... Further configuration ... */
20 = TEXT
20.value = Details
20.typolink.parameter = 1
20.typolink.additionalParams.dataWrap =
&tx_someextension_controller_details
[countryuid]={field:uid} }
}
}
}

53. Rendering links with
TS

54. 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
}

55. FLUID Templates (cont‘d)
• Easy-to-learn FLUID syntax for creating your
own templates
<f:for each="{listData}" key="rowIndex" as="listRow">
<f:render partial=“yourPartial“ arguments=“{row:}" />
</f:for>
• Unlimited options for styling your lists

56. FLUID Templates (cont‘d)
• Example

57. Further steps
How to get deeper into pt_extlist
Outlook
start end

58. Demolist Package
There are many more examples of TypoScript
Configurations within the Demolist package
( static template)

59. Demolist Package
Demolists explain some more features like
• Export
• Structured lists
• Complex dependencies and ignores of filters
• Using your own partials for rendering cells
• ...

60. TypoScript Reference
• ~100 pages reference on pt_extlist‘s TS

61. YAG Gallery
Photo-Gallery management for TYPO3
Implemented using Extbase & pt_extlist

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

63. YAG Gallery
Extension
visit our talk on
Saturday
(tomorrow )
at 11:00

64. 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!)

65. Q&A

66. Thank you for your
attention!