Extending PlatformUI with new navigation
Introduction
This tutorial aims at providing a step-by-step guide on how to extend the JavaScript application provided by the PlatformUI bundle.
In this tutorial, we will create a new part of the application allowing to browse your content by Content Type instead of using the tree structure. To fully benefit from this document, you need to:
- be comfortable with eZ Platform's content model (Content, Location, Content Type, etc.)
- have basic to intermediate level in HTML5/CSS/JavaScript
- have a basic knowledge of Symfony's concepts (Bundle, Controller and routing)
- have read the PlatformUI technical introduction
This tutorial is divided into 9 steps. The complete code base is available on Github in the ExtendingPlatformUIConferenceBundle repository which also provides a tag for each step. The expected end result can be seen in this screencast:
Relevant Community resources
Adding support for a new field type to eZ Platform UI
Tutorial path
In this section
- Create the extension Bundle To extend PlatformUI, the very first thing to do is to create a Symfony bundle. For that, you can use the Symfony generate bundle command in the following way:
- Set up the configuration Each component of the PlatformUI application is written as a YUI module. The YUI module system comes with a dependency system which is used in the PlatformUI application. For instance, the PlatformUI application has a module called ez-templatebasedview which provides a base view class to ease the us
- Alter the JavaScript Application routing The essential task of the PlatformUI Application component is to handle the routing. It is based on the routing capabilities provided by the YUI App component and it uses hash-based URIs. By default, the PlatformUI Application will recognize and handle several routes which are declared in the app co
- Define a View Each route defines a View to render when the route is matched. As explained in the PlatformUI technical introduction, this kind of view is called a Main View. Like any view, it can have an arbitrary number of sub-views.
- Configure the navigation As written in the PlatformUI technical introduction, the Navigation Hub gives access to 4 navigation zones which have a set of navigation items. Each Navigation Item is actually a View in the Navigation Hub which can generate one or more links in the menu. Most Navigation Items can even be seen as a
- Build the content list As written in the PlatformUI technical introduction, pages in PlatformUI can be generated either by the browser based on the REST API (or any other API) responses or by doing part of the rendering on the server side for instance with some Twig templates called by a Symfony controller. Both options a
- Paginate results By default, the Search Service returns 25 results so, without pagination, the current interface allows you to view only the 25 Locations. To add the pagination, we need to modify the whole component stack to accept an offset parameter and to use it:
- Filter by Content Type This step is very similar to the previous one on adding pagination. We are going to add a new type parameter in the whole component stack; the main difference with the offset case is that the user will pick a Content Type in a drop-down list instead of just using the Next/Previous links in the page.
- Conclusion We now have a basic interface but it already has some bugs and it could be improved in a lots of ways. Here is a list of things that are left as exercises:
Contributors
- Dominika Kurek Updated
Comments
Add a comment