ABSTRACT
The motive of this blog is to explain how personalized User Interfaces can be designed. The concepts of Smart Templates, Annotation Handling and Variant Management are discussed in this blog.
Smart Templates are used to create applications based on OData Services and annotations requiring minimal JavaScript UI coding. It becomes really straight-forward for the end user to model UI screens built using the above concept based on his/her preferences and choose to see or hide specific data elements in an application. Also, an end user can save multiple contexts in an application and can switch between them easily. The latter is technically termed as variant management.
Lets take an example of a sample IoT application and explain the above concepts using the same.
INTRODUCTION
Everyone loves personalized experience these days. Imagine an application framework where the end user has the liberty of choosing what they want to see on the UI of an application and they can dynamically change the Key Performance Indicators that are visible in the application to other attributes that would be essential just for them and not for others. All this, without losing on any of the functionalities of the application. Requirements like these have aroused highly because of the IoT era which expects such Smart applications.
Something else that has been a gaining a lot of traction are Touch based applications. Implementing these ideas is certainly a very interesting as well as challenging task.
SOLUTION
Consider an IoT Application screen, that shows information about number of devices and there are selectors on the screen based on which the user can filter the devices that they see. Suppose a user has applied 3-4 filters and wants to save the current state of the application, so that when he/she logs in to the app at a later point of time, the same state can be retrieved.
An Application screen showing multiple devices in a map.
Another feature that is used to enable these kind of applications is the use of a specific category of controls in OpenUI5 which are called “Smart Controls”. These controls interpret the oData metadata and can render the elements on UI based on the properties in a particular entity type of the metadata. These controls make use of the Annotations XML that contains information about how the data needs to be rendered in the UI. This XML takes care of forming a list, dropdown, smart table or other similar controls.
The below figure gives a fair explanation of the steps that a Smart Control would go through before its rendered in the UI. The Component initialization is where the Component is loaded with the data models and configuration settings of the application. Things like language settings are loaded at this point in time. The metadata for a “Thing” will be loaded after this along with the annotations which will be used by the Smart Control to render on the UI.
Applications with the above features are gaining lot of importance and visibility in the IoT world these days, since it gives the end user a lot of freedom to customize what they want to see on the final screen.
The User Interfaces which are built on Touch based platforms are a challenge to handle this concept currently, but imagine the excitement of a user who could personalize the below seen screen of a Vending Machine according to his own choice.
There are limited resources available on the above mentioned framework and innovating and implementing on these lines would really be a great excitement for the current IoT era. The concepts mentioned in this workshop have come into use quite recently, and the primary target of this post is to cover the basics and create a mindset change to prepare developers for this framework.
CONCLUSION
The use of the controls discussed in the workshop gives high degree of control to the end user on how he wants to see the final UI. Some key takeaways from this blog can be summarized as below-
- There is a great scope of innovation in the field of Smart Controls and Smart Templates. Currently, there are limited controls that can easily consume an Annotation XML file and developers are constantly working on creating many such controls. Imagine the ease with which applications can be built once there are a bunch of such controls. Each control can be bound to a data source and we can just model our data in a different way to reflect the UI.
- Customizing the controls based on User Preferences does become difficult since we are trying to use an extensively generic component.
The blog only gives a brief explanation of the new framework that is becoming a highlight in the IoT era and would be gaining much popularity going forward.
- SAP Managed Tags:
| User | Count |
|---|---|
| 12 | |
| 9 | |
| 7 | |
| 7 | |
| 6 | |
| 5 | |
| 4 | |
| 4 | |
| 3 | |
| 3 |
