The Ins and Outs of UI Customization in SAP Hybris

Hybris is a pretty sizeable investment, both in cost and man-hours required to get the project running. You’re signing up for one of the most robust eCommerce ecosystems, so it’s good to know the ‘fine print,’ the specifics of working with the platform and developing it into a viable platform for your business. We’ve already covered the personalization potential of Hybris. So this post will continue unveiling various ins and outs of working with Hybris and its diverse ecosystem. This time, our focus will be on the Hybris UI and its pros and cons.

Hybris is a multi-dimensional and multi-layered system when it comes to UI. It has its benefits and limitations that might not be obvious if you haven’t worked with the platform before. And while it might seem tempting to opt in for a system that’s less sophisticated and more primitive regarding UI, you’d want to be equipped with as much information as possible before making that call. We hope that this breakdown by our experienced team of developers will help you make an informed decision.

UI Documentation

The standard documentation that’s available with SAP Hybris is exceptionally well-written. So it makes getting into a Hybris project a pretty easy task with its precise technical language and definitions. However, UI development is where the documentation is lacking. It doesn’t include any fulfilling instructions that can facilitate the development of UI themes containing custom markup and components. So before jumping into Hybris UI project with your engineers, make sure that they completely understand the limitations, as the documentation isn’t going to be very helpful in the process.

SmartEdit

This is a relatively new feature within SAP Hybris that became available in Q1 2016 and has been continuously improved with each new release. It allows business users to make certain changes to page UI, without the need to involve engineers or designers. On a high level, think of it as a drag-n-drop visual page editor.

While this is not a full-blown ‘do-it-yourself’ solution for Hybris, it does have some pretty useful UI functionality. For example, it allows users to make changes to the navigation options on a page (Category navigation, Account navigation, etc.).

It can also facilitate personalization, which we discussed in our previous articles, through a framework that lets you connect external data sources and drive customized website experience for your users. It has some nice features, like the ability to time the personalization by selecting the start and end dates for the changes that you make through SmartEdit. This could also be used to test your changes to the UI with A/B tests, where you have one customization expiring and the second one starting right after it so that you could compare the results of your changes.

The visual editor within Hybris is very functional, but at the same time, if you’re looking to add new UI components, even the simplest ones, it touches upon all the application levels because these new UI elements would have to be properly registered or coded into the system and its core.

The Layout

The out-of-the-box version of Hybris includes a ready-made layout, which is absolutely fine if there isn’t any significant customization involved. However, if you require customized design solutions according to your business specification and they don’t fit the standard layout, you’ll have to re-render some of the components, which can be time-consuming.

Updates

SAP recently released a new version of Hybris. This update reaffirms their dedication to customer experience improvements, as mentioned in their release notes. The update is heavy on UI enhancements, like various tweaks and iterations to cart fulfillment options - Save for Later, Selective Cart, and others. It also features new responsive UI for telco companies.

They’re also slowly introducing AngularJS for the B2C accelerator, which is a storefront solution with templates and other features that significantly improve time-to-market. The introduction of Angular makes further customization drastically more flexible.

It’s worth noting that, unlike some other eCommerce solutions, Hybris is very ‘aggressive’ when it comes to updates. The previous release 6.4 came out in May, and the one before that came out in January. This means that the platform receives quarterly updates, which further solidify its UX/UI capabilities. This comes in high contrast to those competitors who release updates once a year or even less frequent than that.

Configuration

The initialization of site components requires a lot of startup data to be present in the database. This, in turn, requires a very cumbersome and painstaking process of preparing files for import to Hybris.

UI Enhancements for Administration

SAP Hybris offers a decent range of administrative capabilities out of the box. However, a fork might often be required for various unique aspects of your project. And to develop the UI components just to display these new administrative capabilities, your developers would have to be well-versed in the internal UI framework of Hybris and all of its inner workings, as it was created specifically to add administrative capabilities to the platform.

Conclusion

While there are certain small ‘bumps on the road’ that a Hybris UI development team might experience, it’s obvious that SAP makes up for it with some great additional functionality that’s being introduced with each new release. The updates are coming in very often, and we even expect that pretty soon some of the issues described above will become irrelevant or non-existent.

Remember that for an experienced development team most of the issues above are more like guidelines. They only prevent certain practices from being implemented, and most of the time there is a viable workaround. That is, of course, if you go for an experienced ecommerce development company with a fair share of practice deploying Hybris. Accidentally, we happen to be one! Feel free to reach out, if you’re looking to get settled with Hybris.