Building Your ist Can Building Your List Can Be a Thing of ...
The one thing to list everything
-
Upload
daniel-lienert -
Category
Technology
-
view
841 -
download
4
description
Transcript of The one thing to list everything
![Page 1: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/1.jpg)
pt_extlistThe one thing to list everything
![Page 2: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/2.jpg)
Who we are
Michael KnollKarlsruhe, GermanyWorking at punkt.de
Daniel LienertFrankfurt, GermanyFreelancer
![Page 3: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/3.jpg)
Outline of our talk
MotivationLists
distilledHow to use pt_extlist
Advanced features
Outlook
![Page 4: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/4.jpg)
Motivation - Lists, lists, lists...
![Page 5: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/5.jpg)
Lists, lists, lists...
![Page 6: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/6.jpg)
Lists, lists, lists...
![Page 7: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/7.jpg)
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
![Page 8: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/8.jpg)
Lists distilledOn our way to a generic list generator
MotivationLists
distilledHow to use pt_extlist
Advanced features
Outlook
![Page 9: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/9.jpg)
Main parts of a listRows, Columns, Cells
![Page 10: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/10.jpg)
„What is a list?“
1. It‘s a collection of rows
![Page 11: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/11.jpg)
„What is a list?“ (Cont‘d)
2. It‘s a collection of columns
![Page 12: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/12.jpg)
„What is a list?“ (Cont‘d)
3. It‘s a collection of cells
![Page 13: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/13.jpg)
„What is a list?“ (Cont‘d)
4. It can have a set of headers
![Page 14: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/14.jpg)
Lists are not staticSorting, Filtering, Paging & Aggregating
![Page 15: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/15.jpg)
Data Sources
Connect to multiple data sources like MySQL, solr, …
Data „Magic“
![Page 16: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/16.jpg)
Sorting
It should be possible to sort the rows of a list
![Page 17: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/17.jpg)
Filtering
It should be possible to filter rows
![Page 18: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/18.jpg)
Paging
It should be possible to limit number of rows per page
![Page 19: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/19.jpg)
Aggregating
It should be possible to aggregate columns
![Page 20: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/20.jpg)
Requirements
• A (generic) list generator should be able to
• use multiple data sources
• render rows, cells & headers
• sort, filter & limit results
• aggregate data
![Page 21: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/21.jpg)
Architecture
pt_extlist
pt_extbase
Extbase / Fluid
TYPO3
![Page 22: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/22.jpg)
How to use pt_extlist
MotivationLists
distilledHow to use pt_extlist
Advanced features
Outlook
![Page 23: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/23.jpg)
pt_extlist – Basic Features
Introduction to pt_extlist‘s content elements
![Page 24: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/24.jpg)
Filters
List
Aggregate
Pager
![Page 25: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/25.jpg)
Filters
Filterbox
Filter
![Page 26: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/26.jpg)
List
List
Header (sorting)
![Page 27: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/27.jpg)
Setting up a first list
1.Create TypoScript setup Declare list identifier
2. Insert plugin as content elements Select previously declared list identifier
![Page 28: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/28.jpg)
List-Identifier
Data-Source
Typo-Script-Setup
Plugin
render
![Page 29: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/29.jpg)
TypoScript Setup
![Page 30: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/30.jpg)
TypoScript Setup
• What do you have to set up?
• Data Backend
• Data Fields
• Columns
• Filters
![Page 31: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/31.jpg)
TypoScript Setup (List
identifier)
plugin.tx_ptextlist.settings {
listConfig.infoTables {
# Here goes your configuration
}
}
List Identifier!
![Page 32: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/32.jpg)
TypoScript Setup (Data Backend)
listConfig.infoTables {
backendConfig < plugin.tx_ptextlist.prototype.backend.typo3
backendConfig {tables (
static_countries)
}
![Page 33: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/33.jpg)
TypoScript Setup (Data Fields)
listConfig.infoTables {
/* ... */
fields {name_en {
table = static_countriesfield = cn_short_en
}
phone {table = static_countriesfield = cn_phone
}
}}
![Page 34: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/34.jpg)
TypoScript Setup (Columns)
listConfig.infoTables { /* ... */
columns {
10 {columnIdentifier = nameColumnlabel = Country NamefieldIdentifier = name_en
}
20 {columnIdentifier = phoneColumnlabel = PhonefieldIdentifier = phone
}}
}
![Page 35: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/35.jpg)
pt_extlist‘s plugins
![Page 36: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/36.jpg)
pt_extlist‘s plugins (Cont‘d)
![Page 37: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/37.jpg)
pt_extlist‘s plugins (Cont‘d)
![Page 38: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/38.jpg)
List plugin
![Page 39: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/39.jpg)
Frontend
![Page 40: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/40.jpg)
TypoScript Setup (Filter)
listConfig.infoTables { /* ... */
filters {filterbox1 {
filterConfigs {10 <
plugin.tx_ptextlist.prototype.filter.string10 {
filterIdentifier = contryNameFilterlabel = Country NamefieldIdentifier = name_en
}}
}}
}
![Page 41: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/41.jpg)
Filterbox plugin
![Page 42: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/42.jpg)
Filterbox plugin (Cont‘d)
![Page 43: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/43.jpg)
Frontend (Filter)
![Page 44: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/44.jpg)
Pager plugin
![Page 45: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/45.jpg)
Frontend (Pager)
![Page 46: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/46.jpg)
Frontend (Sorting)
![Page 47: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/47.jpg)
Frontend (Sorting)
![Page 48: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/48.jpg)
Advanced Features
MotivationLists
distilledHow to use pt_extlist
Advanced features
Outlook
start end
![Page 49: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/49.jpg)
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
![Page 50: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/50.jpg)
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 ... */
}}
}
![Page 51: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/51.jpg)
Rendering images with TS
![Page 52: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/52.jpg)
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} }
}}
}
![Page 53: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/53.jpg)
Rendering links with TS
![Page 54: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/54.jpg)
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}
![Page 55: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/55.jpg)
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>
![Page 56: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/56.jpg)
FLUID Templates (cont‘d)
• Example
![Page 57: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/57.jpg)
Further stepsHow to get deeper into pt_extlist
MotivationLists
distilledHow to use pt_extlist
Advanced features
Outlook
start end
![Page 58: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/58.jpg)
Demolist PackageThere are many more examples of TypoScript Configurations within the
Demolist package( static template)
![Page 59: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/59.jpg)
Demolist PackageDemolists explain some more features like
•Export
•Structured lists
•Complex dependencies and ignores of filters
•Using your own partials for rendering cells
•...
![Page 60: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/60.jpg)
TypoScript Reference
• ~100 pages reference on pt_extlist‘s TS
![Page 61: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/61.jpg)
YAG GalleryPhoto-Gallery management for TYPO3
Implemented using Extbase & pt_extlist
![Page 62: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/62.jpg)
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
![Page 63: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/63.jpg)
YAG Gallery Extension
visit our talk on Saturday
(tomorrow )
at 11:00
![Page 64: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/64.jpg)
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
![Page 65: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/65.jpg)
Q & A
![Page 66: The one thing to list everything](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b776bd4a795984708b466f/html5/thumbnails/66.jpg)
Thank you for yourattention!