Smart controls – A journey through history to create a perspective on future innovations
The early days
SAPUI5 started as a plain control library in 2009. Application development capabilities like MVC and data binding were added. The introduction of SAP Fiori in 2013 paved the ground for a broad adoption of SAPUI5 in SAP business application development. But UIs became increasingly complex, and there was a growing demand to provide bigger reusable building blocks and integrated application functionality, such as personalization. With Simplified Financials (sFin) in ERP as a front runner, the smart control library was introduced in 2014 to provide larger composite controls with integrated generic controller logic. Those ‘smart’ controls not only boost developer’s efficiency by enabling easy creation of applications, but also ensure a consistent look and feel all across the application suite. The representation of the data within the controls follows logical consistency and most recent UI guidelines in combination with up-to-date UI themes. Self-evident, out-of-the-box ingredients are accessibility, product standards, and end user enablement, such as personalization and variant management.
A long journey: OData V2 and smart controls
The history of the smart controls is closely connected to SAP’s journey with Microsoft’s Open Data Protocol (OData) that started with OData Version 2 (V2) for smart controls. When OData was chosen as the standard protocol on which SAP builds business applications, the smart controls leveraged a coherent interpretation of the OData annotations. This explains the most current naming: OData V2 smart controls. Together with the ABAP Backend, Core Data Services, SAP Gateway, and SAPUI5 Model services, these smart controls are powerful cornerstones to build robust and compelling business applications with SAP Fiori powered by SAPUI5.
Feature richness with smart controls and smart templates
Over time the scope of the smart controls increased with each ERP application based on SAP Fiori. New smart controls were created, and integrated logic was expanded. The most used smart controls are the smart table and the smart filterbar, but smart field, smart link, and smart chart also play an important role in building business applications. An important addition to the development environment are smart templates (powered by SAP Fiori elements), which define recognizable and user-friendly floorplans guiding casual and professional users through their daily work. The interplay between smart controls and smart templates has grown extremely rich, robust, and powerful over the years.
Besides the recommended usage within smart templates, it is possible to make use of smart controls standalone, for example, in more advanced scenarios. So customers have discovered the smart controls as a powerful addition to the SAPUI5 development landscape. They are enabled to easily write their own freestyle applications by means of leveraging the smart control library.
Important improvements of OData V2 smart controls
The most recent additions to and improvements of the OData V2 smart controls are described in this blog post. The next major important investment will be the runtime adaptation of the smart variant management. So we continue to invest into these controls as we strive for even greater feature richness and important roundoffs. With this commitment, we support stakeholders and customers on their long journey with the recent development stack.
Next level of efficiency
A few years ago, a new version of OData became available (OData V4) that comes with a variety of new features, such as the following:
- A new JSON format for data that allows a significant reduction of the payload size
- Cross-service navigation that allows lazyloading of large service models
- Major enhancements for $filter (any and all) and $expand (query options)
- System query option $apply that allows the requesting of aggregated data
These and other features not only make it possible to provide more efficient applications with better performance but also unlock new capabilities for writing applications. For more information, you can have a look at the presentation (slides) of the UI5 OData V4 model.
In order to support this new version of OData, we decided to create a new set of smart controls. Considering the feedback we got for OData V2 smart controls, we strive for a more advanced architecture that does not restrict the new control library to OData. In an OData V4 scenario, SAP Fiori elements V4 floorplans evaluate the OData V4 annotations and orchestrate the new smart controls accordingly in list reports and object pages. SAP Fiori elements V4 can consume the ABAP RESTful Application Programming Model (RAP) as before, but can also be used with the Cloud Application Programming Model (CAP) based on Java or NodeJS for a description of the business logic. It has turned out that this new development stack comes with a notably improved performance, and it is the recommended way to create new SAP Fiori-based business applications inside and outside of SAP.
Since the new smart controls are not tightly coupled to OData V4, it is possible to use these controls also with other data protocols, for instance JSON based approaches such as GraphQL or FHIR (Fast Healthcare Interoperability Resources), which has been introduced for Health applications. A prototype making use of the FHIR model is currently under investigation.
Increasing relevance of new generation smart controls
The new generation smart controls are already widely used for customer development. First customers start to build on the data aggregation capabilities of OData V4 leveraging the latest additions to smart controls and SAP Fiori elements V4. S/4 HANA Sales and Distribution has created a new SAPUI5 based version of the Create Sales Order application (known as VA01 for SAP GUI users); you can have a look at their latest blog.
Smart controls go OpenUI5
We invest heavily into a public release of the new generation smart controls (sap.ui.mdc library) in OpenUI5. We are convinced that the new smart controls are future-proof, robust, as well as performant and will lead application development based on UI5 to a new stage of efficiency and user experience. The successful journey of Smart Controls being the cornerstone of efficiency, consistency and readiness for change in SAP’s UI strategy is about to continue – stay tuned, use and enjoy them!
For more information on UI5
- Exchange knowledge: SAP Community | Q&A | Blog Post | Slack
- Learn more: SAPUI5 Demo Kit | openSAP | UI5 NewsCast | UI5ers live
- Try UI5 for free: SAPUI5 | OpenUI5 | OpenUI5 on NPM | SAPUI5 on NPM
- Follow us: Twitter | YouTube
Related Fiori elements and Fiori tools blog posts
- Best Practices for Extending SAP Fiori Elements Apps with Custom Controls and Logic
- Simplifying application generation for SAPUI5 freestyle and SAP Fiori elements apps
Dirk Becker is Area Product Owner for SAPUI5 Smart Controls and Tables.
Thanks for sharing this excellent overview of the new capabilities of UI5 smart controls
Hi @Dirk, Thanks for the brief overview. What I can takeaway from this is that it should be possible to wire a Smart Control like Smart Table with a GraphQL API. Has anyone attempted such a thing ? Do you have a handle to a sample which I could try ? Thanks, Abhishek
yes, that is correct. You can wire the new generation Smart Controls also with a GraphQL API. Just keep in mind that you will have to provide the delegate classes on your own. - Recently, a student was with us and wrote a thesis based on this analysis of GraphQL and Smart Controls; and he gave a proof that it works. There might be some relics in the system and if you are interested you can contact me directly and I try to find some more information in the archives...
Best regards, dirk
Hi Dirk, can we use the new mdc controls in a Fiori Freestyle app running against a v4 model (without having to implement the evaluation of v4 annotations)?