pt_extlist The one thing to list everything
Jan 15, 2015
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!