Daniel Rotter
Core Developer – Sulu GmbH
Core developer and support guru. Passionate traveler and soccer player.

Sulu 2.0.0-alpha4 released

This release took a bit longer than we actually planned but it includes a lot more features, improvements and bugfixes. In this article I will explain the bigger changes being implement in our 4th alpha in more detail without going too deep into the smaller bugfixes which we have done a few as well.

Symfony 4 support & directory structure

The biggest task in this release was to update Sulu to the Symfony 4 directory structure and support Symfony 4 itself. But we've finally made it! We had to update a few other bundles we depend on as well but it also feels good to give back to other open source projects we are using anyway. So starting with the alpha 4 release you can finally make use of all the awesome features that have been added to Symfony 4.x. But be aware that you also have to follow all the upgrade instructions from Symfony.

Live Preview

One of our most beloved features, the live preview within a page, has landed in this alpha as well. Even better, it's not only there in the same way as it was before (partly because some functionality like changing display sizes is still missing), but also improved for the content manager. In Sulu 1.x the twig templates had to annotate its HTML elements using RDFa which was quite a burden for developers as you can also see by reading our documentation for that. Because of that quite some previews were not working as good as they could, leading to some frustration for content managers.

The good news is that our live preview is not dependent on these RDFa attributes anymore, so it will work regardless of them. However, we still think it is a good idea to add them since you pass more information to search engines hopefully improving the ranking of your website.

More functionality on the WebspaceOverview

The WebspaceOverview, which contains the ColumnList containing all the pages, got a lot more functionality and has now feature parity with the old version of it in Sulu 1.x. In order for this to happen we had to add the options for ordering, copying and moving pages. In addition to that it is now also possible to exclude ghost and shadow pages in the ColumnList by using the new toggler in the toolbar.

Roles form

A very important part missing in Sulu 2.0 is the ability to set permissions in the system, practically making it impossible to create new users being able to login in the Sulu administration. However, in this release we made quite a big step in that direction since it is finally possible to create new roles and assign permissions to them. The form looks and works pretty similar to the old administration.

The only thing that really changed is how we handle webspaces in this form. In the 1.x series we had issues if a lot of webspaces were available in one installation, because all of them were listed in this form and also sent along with every single request. That's not only impracticable from a user perspective but sometimes even led to real issues because there were too many properties on the requests resp. responses for some web servers, causing them to fail.

We have solved this issue in Sulu 2.0 by grouping all the permissions for a webspace in a single matrix. At the beginning of a role none of these webspace permissions are shown in the form but there is a button to add this grouped webspace permissions for a specific webspace. So the role only contains the webspaces for which it has permissions instead of all of them. This approach should scale a lot better and work no matter if you have 1 or 5000 webspaces in your installation.

SmartContent & Translations

One of our most powerful field types, the SmartContent, was also added in the new UI with this release. As in the old version it enables the content manager to aggregate entities (most of the time pages) using different kind of filters like a root entity resp. data source, tags or categories.

This field types also required some more sophisticated translations containing placeholders and different versions regarding if multiple or only single items were selected. Therefore we changed the interface of our translate method, which now takes an additional object alongside the translation key. This object defines variables, which then can be used in the translation. We have decided to use the intl-messageformat component from yahoo for this transformation. This component adheres to the messageformat standard.

Pinnable navigation

Our left handside main navigation changed a bit from the 1.x release. Instead of always be shown in some way it just moves out to the left and if you click the navigation button it will move the entire application to the right so that it becomes visible. This works quite well for small screens but on big screens that will waste a lot of space. So we've added the possibility to pin the navigation using a small button with a pin icon. If this is clicked the navigation will always stay visible and never disappear.

Settings tab for pages

The settings tab was added to the page form. It does not have all the functions from the old version yet but you can already add the page to some navigations and make the page an internal or external link. In order to be able to do that the URL field type, a single page selection and a single contact selection have been added, which can now be used in other custom forms or in a page template as well. In addition to that we have extended the standard Form component to be able to display fields based on some so called visibilityConditions. In there you can use the JEXL expression language which allows you to access all the fields of an entity. An example for this is decision if the URL fields for a page of type internal link should be shown in the settings:

<property name="internal_link" type="single_internal_link" visibilityCondition="nodeType == 2">
        <title lang="en">Linked Content</title>
        <title lang="de">Verlinkter Inhalt</title>
Settings tab for pages

Datagrid & Form improvements

Also, our datagrid component got some improvements, especially the pagination. If the datagrid makes use of our default Pagination component it is also possible to set the limit using a dropdown and change the page using an input field as you are already used to in the 1.x version of Sulu. We also added the overlay to define which columns should be shown in the datagrid.

In addition to that we added some fields to media and category forms.