eZ Platform is a powerful Content Management System built on the solid Symfony framework. In most enterprise grade CMS implementations the administration user interface needs to be extended. In the case for eZ Platform version 2.0.0 this is now done with a combination of Symfony framework and React.js JavaScript Widgets. This presentation gives a quick overview of the system architecture and the available extension points for developers.

1. INTRODUCTION TOINTRODUCTION TO
EZ PLATFORM V2EZ PLATFORM V2
UI CUSTOMIZATIONUI CUSTOMIZATION
eZ Partner Meeting Barcelona 2018
January 25th 2018 - Jani Tarvainen

2. AgendaAgenda
v2 Admin UI Technical Overview
Development Best Practices
Some Available Extension Points
Transitioning from v1 to v2

3. Admin UI v2 introductionAdmin UI v2 introduction
A traditional Symfony application
Page loads, controllers...
Events, Symfony forms...
React.js used for Widgets
React now very common, including the space
Today Universal Discovery Widget, Multifile upload...
Bootstrap 4 for markup, and UI elements
CMS

4. Admin UI v2 IntroductionAdmin UI v2 Introduction
A flexible architecture a must
eZ Partners use a broad range of technologies
Symfony updated to 3.4, take advantage
Workflows
Cache component
...
Open to any front end technologies
React used by default, but not enforced
The browser is your "integration platform"
You can use , ...
HTTP/2
Web Components Vue.js

5. Development Best PractisesDevelopment Best Practises
Override, extend using standard Symfony/PHP practises
PHP classes, services, Twig extending
Add interactivity with JavaScript where needed
Use included UI design functionality
Layout guidelines for consistent UX
Bootstrap UI widgets where applicable
Use mechanism everywhereSymfony Translation
Documentation: https://doc.ezplatform.com/en/2.0/guide/extending_ez_platform_ui/

6. Some Available Extension PointsSome Available Extension Points
Menus
Dashboard
Tabs
Sidebar
Field Types
React Widgets
Custom Views
...

7. Extending menusExtending menus
Manage admin navigation tree
Each menu path is a link
Symfony route
Anchor (for JS)
Any URL
Menu tree is built with KNPMenuBundle
Add/Remove menu items with events
Documentation: https://doc.ezplatform.com/en/2.0/guide/extending_ez_platform_ui/#menus

8. Extending sidebarExtending sidebar
Add items to sidebar menus
Add buttons to le right using event listener
Add hyperlink or JavaScript hook
Example:
https://github.com/noodle69/EdgarEzUIBookmarkBundle/blob/e6a83c605fef271831fee2deeffe41fb90c

9. Extending DashboardExtending Dashboard
Add new elements to dashboard
Modify using Symfony events
Add new components
Documentation: https://doc.ezplatform.com/en/2.0/guide/extending_ez_platform_ui/#dashboard

10. Extending tabsExtending tabs
Add new tabbed interfaces
Create tab group in PHP
Render in Twig where you want
Modify existing tabbed interfaces
Using event listener
Add, reorder, delete…
Documentation:
https://doc.ezplatform.com/en/2.0/guide/extending_ez_platform_ui/#dashboard

11. Extending using Field TypesExtending using Field Types
Adding fieldtypes
Back end definitions as before
Built as Symfony form types
All views (edit/preview/view) in Twig
in edit use UDW, etc. to integrate to eZ
Documentation: https://doc.ezplatform.com/en/2.0/cookbook/adding_new_field_types/

12. Extending using React.js WidgetsExtending using React.js Widgets
Example: Universal Discovery Widget
Use for content selection for your code
Add tab to UDW
Practical usage:
Use in components with JSX, vanilla JS elsewhere
Extend React components to modify functionality
No enforced process
React
JavaScript build
Documentation:
https://doc.ezplatform.com/en/2.0/guide/extending_ez_platform_ui/#universal-discovery-
module

13. Custom app view integrationCustom app view integration
Integrate any Symfony apps/views
Add suitable route+controller
Set view templates to be share
Embedded Single Page Apps
Function independently, Styles inherited from UI
Can tap into , 3rd party
iFrames for quick integrations of admin
REST API

14. TransitionTransition
from v1 to v2from v1 to v2
Site front ends require minimal changes
Moving admin changes from v1 to v2
Heavy v1 customization in JavaScript needs a rewrite
Embedded Symfony views straightforward
For new work, create Symfony views and integrate lightly
to v1 admin

15. THANK YOUTHANK YOU
Questions?
More information: https://ezplatform.com/