A Dive Into GridField

talk about Silverstripe CMS's GridField by Martina Lindenhofer and Werner M. Krauß at SilverStripe EU Conference in Manchester, UK 2025 www.stripecon.eu

Transcript

1. A Dive Into Gridfield Martina Lindenhofer, BSc. Werner M. Krauß StripeCon 2025, Manchester (UK)
2. Martina Lindenhofer, BSc. • Born in Lower Austria, Lives in Vienna since 2010 • Married, Expecting • Bachelor’s degree in Media Informatics at the University of Vienna • WebDeveloper at pixelpoems since 2020, works with SilverStripe since 2016 • Martina on Slack, MLindenhofer on github • AI Art, Japan, Anime, Manga, Gaming, Cosplay, HEMA
3. Werner M. Krauß wmk Bad Ischl, Austria netwerkstatt.at 2 kids, at least 5 guitars, pilgrim
4. The GridField - Let’s Start Diving Generated with Microsoft Bing AI Image Creator
5. History
6. History • Bugs exist longer than GridFields • GridField is part of the framework since SilverStripe 3 • Successor of UncleCheese’s DataObjectManager in 2.4 • And TableListField / ComplexTableField even before…-
7. How Does It Work
8. Overal Structure GridField List of Records GridFieldComponent GridFieldConfig
9. GridFieldConfig • A wrapper holding an ArrayList of GridFieldComponent classes • Many preconfigured configs available: ◦ GridFieldConfig_RecordViewer Readonly viewer ◦ GridFieldConfig_RecordEditor Allow editing of Records ◦ GridFieldConfig_RelationEditor Also allow adding or removing relations in has_many or many_many relationships • You can modify those or write your own subclass ◦ addComponent() / removeComponent()
10. GridFieldComponent • An Interface, sub-interfaces • Provides ◦ GridField_ActionProvider, .._ColumnProvider, .._HTMLProvider, …_StateProvider • Handles ◦ …_URLHandler, …_SaveHandler • Misc ◦ …_DataManipulator, .._ActionMenuItem • Collected in GridFieldConfig • Highly configurable and extendable ◦ Many extensions available via Composer
11. GridField_HTMLProvider • Provides HTML as array of different areas for outputting HTML ◦ header ◦ footer ◦ before ◦ after • Your components can define custom areas if needed
12. Configuration Generated with Microsoft Bing AI Image Creator
13. Predefined Configurations Subclasses of GridFieldConfig • GridFieldConfig_Base ◦ Simple readonly, paginated view of records, with sortable and searchable headers. • GridFieldConfig_RecordViewer ◦ Allows viewing readonly details of individual records • GridFieldConfig_RecordEditor ◦ Allows editing of records contained within the GridField • GridFieldConfig_RelationEditor ◦ Adds features to work on has-many or many-many relationships.
14. Adjust your configs globally • GridFieldConfig has the updateConfig hook • Use it in an Extension • Example: add sorting to all GridFields, where the items have a “Sort” or “SortOrder” field
15. GridField And ModelAdmin No, they don’t mean me! >.< Wikipedia (by Toglenn, 2019)
16. “The HQ Of Data Management” - ModelAdmin • Data is managed with GridFields • GridField configurable for each $managed_modelclass • Tools for importing (ModelAdmin) and exporting (e.g. to CSV or customised Excel) • Method to get GridFieldConfig for each model
17. Custom config Modelspecific GridField configuration
18. Everything configured? Let’s go!
19. Out Of The Box Features Generated with Microsoft Bing AI Image Creator
20. Pagination • For GridFields with many data records • Items per page configurable
21. Summary Fields • Can be configured via private static $summary_fields for the shown class
22. Searchable Fields • Based on Search Context • Only database-fields can set as searchable_fields • Configurable via private static $searchable_fields in your class
23. Useful Extensions
24. Lumberjack • Organizes pages into a ModelAdmin-Like GridField • https://github.com/silverstripe/silverstripe-lumberjack • Similar to Catalogue Manager
25. Gridfield Extensions • De-facto standard collection of useful tools • https://packagist.org/packages/symbiote/silverstripe-gridfieldextensions • Add existing search button • Add new multiple class button • Add GridFielEditab
26. Inline Editing You can add inline-editable fields to edit records directly in the GridField without having to click into the record itself
28. Nested GridFields • Allows nesting of GridFields for managing relation records directly within a parent GridField.
30. Add Multi Button • You can add different Subclasses of a superclass. Example: Superclass → News Subclasses → Events, Podcasts, Seminar • Use ->setClasses() if you don’t want all subclasses in that list • Checks ->canCreate() on all subclasses else
31. Reorder Items • Orderable rows - enables Drag & Drop sorting in GridFields
32. Bulk Editing
33. Bulk Upload • Throw e.g. Images to an Upload Area • Adds them to DataObjects which get linked to the current object • See also: https://docs.silverstripe.org/en/6/optional_features/gridfield-bulk-editing-t ools/bulk-uploader/
35. Bulk Manager • Perform actions on multiple records straight from the GridField. • Out of the box: unlink, delete and bulk editing. • You can also easily create and add your own actions. • See also: https://docs.silverstripe.org/en/6/optional_features/gridfield-bulk-editing-t ools/bulk-manager/
36. Fluent Extensions for Grids Generated with Microsoft Bing AI Image Creator
37. Fluent Grid Extension • Automatically added once Fluent is installed • Supports GridFieldDetailForm_ItemRequest with extra actions • It extends GridFieldDataColumns. • This allows it to take locale-specific values into account when rendering columns in a GridField. • Displaying the translated value (e.g. title, name) in the GridField instead of the raw/default value. • Optionally indicating whether a field in the current locale is localised or inherited. • Ensuring consistent behaviour when switching locales in the CMS (via the locale dropdown in the top-right corner).
38. Visible Locales Column • In which locales an item is localized or not • works also for setups with fallback-locales
39. Visible Locales Columns - Code Example
40. Delete All Locales Action • To delete an Item in ALL locales
41. Delete All Locales Action - Code Example
42. Layout modifications
43. Tiled Gridfield • https://packagist.org/packages/axllent/silverstripe-tiled-gridfield
44. Calendar View A component for viewing a GridField's data as a calendar, useful for things like event calendars. It also provides a toggle button that let's you switch between the default list view for a GridField and the Calendar view. • https://packagist.org/packages/webbuilders-group/silverstripe-gridfield-ca lendar-view
45. What extensions do others use? (Poll results) We got a lots of examples of useful GridField-Extensions for in use - some examples: • https://github.com/bratiask/silverstripe-pickerfield • https://github.com/silverstripe/silverstripe-gridfield-bulk-editing-tools • https://github.com/UndefinedOffset/SortableGridField • https://github.com/webbuilders-group/silverstripe-frontendgridfield • https://github.com/goldfinch/image-editor • https://github.com/sunnysideup/silverstripe-yes-no-any-filter Thanks for all participants!
46. Get Your Own Component
47. Style Rows With Custom CSS • Based on the current record • GridField calls “updateNewRowClasses” hook • Write an Extension to GridField and update it
48. Check if the current record fits your needs If yes, add a css class to the current row for styling
49. Is Published Status • Lumberjack has a GridFieldSiteTreeState config available • Extends GridField_ColumnProvider ◦ augmentColumns: modifies column list (e.g. adds a column) ◦ getColumnsHandled: names of all affected columns ◦ getColumnContent: actual HTML based on the current record ◦ getColumnAttributes: HTML attributes, e.g. CSS classes; based on current record ◦ getColumnMetaData: can be used by other components => adding your own tool to a GridField isn’t that complicated
51. Aaand Action: GridFieldItemRequest
52. Own functionality when editing a DataObject • GridFieldItem_Request is the Controller for editing a DataObject • Can be the controller if you have custom actions, e.g. buttons etc. for the current item ◦ E.g. send an invoice for the current Order
54. Quiztime!
55. RTFM • Docs: https://docs.silverstripe.org/en/6/developer_guides/forms/field_types/grid field/ • Create your own component https://docs.silverstripe.org/en/6/developer_guides/forms/how_tos/create _a_gridfieldcomponent/
56. Explore • To be done: a repo for easily exploring of various GridField settings https://github.com/s2hub/just-gridding
57. Questions? Johannes?
58. Thank you very much!