Skip to Content

SAP Cloud Developer Studio for SalesOnDemand supports UX3 concepts

In order to support large enterprise cloud applications the SAP Cloud Developer Studio for SalesOnDemand is now able to generate screens which are applying to the latest User Experience concepts named UX3. In this article you will learn on the one hand the definition and advantage of the new user experience concepts and on the other hand how to generate these new user interfaces with the SAP Cloud Developer Studio.

What is UX3?

UX3  concepts target the next generation enterprise usability to attract more users and different user groups than the typical SAP professional/business users. UX3 defines a productivity environment to reach the goal of 1 billion users. UX3 is targeted to extend the reach of SAP applications beyond today’s power users into the area of more casual users. UX3 introduces contemporary and modern interaction concepts that make it possible to create interactive, attractive and intuitive applications that meet to expectation of the Internet generation. Fundamental to the concepts is that UX3 provides interfaces tailored for 3 different user groups: Professional User, Casual Users and Consumers.

Professional Users expect a user experience which is streamlined for efficiency and effectiveness. It needs to be highly flexible and configurable. Function richness is required.

Casual Users have the same needs in terms of effectiveness and efficiency, but a user experience with less complexity is important. Functions need to match the users context rather to expose them all. This user type values attractiveness of user experience higher than the professional user type.

For the user type of a Consumer the user experience needs not only to be attractive but cool and desirable. The product needs to be fast, simple, easy to access and consume. Furthermore it is important to this user group that it is joyful and useful application.

If you want to learn more on the UX3 concepts, principles and patterns visit the UX3 Wiki

https://wiki.wdf.sap.corp/wiki/display/UX3/UX3.

UX3 Screens generated with SAP Cloud Developer Studio

With SAP Cloud Developer Studio you are able to generate screens applying to the UX3 paradigms. These UX3 concepts work seamlessly together with older Business ByDesign UX UIs. The Development Environment provides a screen generation function. On this dialog first option for a developer is to choose single UX3 screens and generate them. Second option is to choose a screen scenario with Thing-Navigation to trigger the generation of a full-blown multi screen scenario enabling you to create, view and edit Business Object instances. The UX3 screens generated are: Thing Type, Quick Create, Quick View and Thing Inspector. As known from previous ByDesign Interfaces the Work Center, Work Center View and Object Work List used here in junction with the UX3 user interfaces (Fig.1).For definition of the screen purpose see Tab. 1 below.

Figure 1: Thing based Screen Scenario: (1) Work Center; (2) Work Center View; (3) Object Work List (OWL); (4) Quick View (QV); (5) Thing Inspector (TI); (6) Quick Create (QC); (7) Thing Type (TT); ES: Enterprise Search; FD: Feeder;

Table 1
List of generated ScreensUX Definition
Work Center  
(Business ByDesign UX)
Work Centers are represented as short dynamic headlines in the upper navigation bar. Work Centers support task-specific activities (for example organizing employee benefits, managing purchase orders, planning and budgeting). A Work Center grants the user access to the Business Objects he needs to work on.
Work Center View
(Business ByDesign UX)
Work Center View is one subentity of a Work Center. It enables the developer to sort the task-specific-activities to different entities (i.e. Work Center: Payables; Work Center View 1: Incoming Payments; Work Center View 2: Outgoing Payments).
Object Work List
(Business ByDesign UX)
The Object Worklist is a List Pane which is always embedded in a Work Center view. The Object Worklist contains business objects such as purchase orders or opportunities. The user can, for example, search for, display, and edit objects as well as trigger follow-on processes. The Object Worklist is able to display the entities in different visualizations (i.e. List View, Card View etc.)
Quick Create
(UX3)
The Quick Create is a facility that allows the user to quickly create certain  business objects from any place in the application. The Quick Creates are called from out of the Tool Palette on left screen side where they are  indicated by icons. Quick Creates can also be called out of the content area if there are create actions being made available (e.g. on top of a table).
Quick View
(UX3)
The QuickView is a basis control for displaying a Thing overview. The QuickView appears as a small popup window with a short description of the related/referenced entity. The referenced entity is usually represented as a link but can be any control.
Thing Inspector
(UX3)
The ThingInspector exposes all aspects of a Thing including a handle on the Things, a compact summary of the attributes, Tags and the generic Thing actions, as well as the different facets of the Thing. A Thing is a representation of one or several entities in the form that is familiar to the user from daily work.
Thing Type
(UX3)
Things are smart and portable work objects such as a Material or a Business Partner. They embed attributes (data or images), related objects, analytical data and actions generated from meta-data. They suit the needs of knowledge workers and casual users who can tailor content and carry some actions in the context of a specific task.

Tab. 1: User Experience Definition of UX3 screens generated with SAP Cloud Developer Studio.

Comparison of Business ByDesign and UX3 screen types

Executing an analytical comparison of the SAP Business ByDesign screens and the current UX3 screen collection the Object Instance Floorplan (OIF) and Fact Sheet (FS) have functional overlaps with the UX3 Thing Inspector (TI). The TI is optimsed for information consumption / reading and lightweight editing interactions while in Business ByDesign UX two separate UIs are made for information consumption and editing. First the OIF, it is streamlined for data entry and second the FS which is optimized for information consumption / reading. Up to this point SalesOnDemand is not using any OIF. If your use cases do not demand heavy editing functions the OIF screen can be left out and the UX3 TI is the perfect solution.

The next functional overlap can be detected between the UX3 Quick View (QV) and the FS. The QV gives the user on mouse-over a small preview of the Business Object (BO) Instance while the user sees onclick the BO Instance in much more detail on the separate FS screen. Therefore the QV is a more useful UI if you want to keep the user in context and enable fast scanning of BO instances. Users will be very happy to have a QV if they need to scan quickly through large amounts of data. Deep investigations are easier done on a FS.


As you can conclude UX3 concepts supports users to get fast and easy overview and access to complex information. The correct UI selection is defined by your main application purpose. If you look at your application the correct choice should not be a difficult task.

Other Business ByDesign UIs like the Quick Activity and Guided Activity are still relevant for their use contexts and should be used.

Step-wise explanation for UX3 Screen generation with SAP Cloud Developer Studio

For a screen generation we need to build a simple Business object first and Save+Activate this Business Object. Just use this simple code snippet with 4 employee properties for a first easy Business Object.

Step 1: Add Business Object

Step 2: Edit Code

import AP.Common.GDT as apCommonGDT;
import AP.CRM.Global;
import AP.FO.BusinessPartner.Global;
import AP.PC.IdentityManagement.Global;

businessobject BusinessObject1 {

[AlternativeKey]element EmployeeID:ID;

element EmployeeFIRSTNAME:LANGUAGEINDEPENDENT_LONG_Name;

element EmployeeLASTNAME:LANGUAGEINDEPENDENT_LONG_Name;

element EmployeeBIRTHDATE:Date;

}

Step 3: Save and Activate the Business Object

Step 4: On the newly created Business Object click the right mouse menu and choose “Create Screens”. The“Create Screens” Dialog is called.

Step 5: To create a screen scenario which contains the features for creation, viewing and editing select the option “Screen Scenario with Thing-based Navigation”. This will create a WorkCenter with WorkCenter View, Object Worklist (OWL), Thing Inspector (TI), Quick Create (QC), Quick View (QV) and Thing Type (TT). The Thing based navigation between the screens is generated in addition.

After generation the WorkCenter can be assigned to the test user and additional Business Object Instances  ‘Employees’ can be created.

Most common Fine-Tuning activities with generated screens

The UIDesigner tool provides now any possibiliy to start the fine-tuning of the screens.

A ususal fine-tuning would include:

  1. Work Center Title change and Work Center View Title change. In addition the titles of the additional screens (TI, QV, QC) are defaulted also you might want to change these.
  2. Delete the generated “SAP_UUID” column in the OWL and use the employeeLASTNAME as link instead. To do so maintain the ID/Description mapping on the DataModel Tab and on the Designer Tab, set the property “PresenationMode” to “DescriptionOnly”. Finally do a mapping of the “Text” property to the SAPUUID. 
  3. The generated Thing Type has a default icon. Change it to your wanted one.
  4. Define the navigation to other Business Objects “Things”. If you display other Business Objects /Things on your screen you can define the navigation to these TIs easily by switching to the DataModel Tab in the UIDesigner, selecting the Business Object ID datafield and maintaining the property “Associated thing type”.
  5. Create alternative visualisations of your Object Worklist by activating the property Integrated Toolbar on the Advanced List Pane Level. Then you choose under the level “Alternative List Pane Variants” the “Alternative List Visualisations” and maintain here the properties.

SDK Experts will notice that the handling of the Thing based Navigation is much easier than the older Object Based Navigation. The eveolution step to the Thing Navigation does not mean that the OBN is not working anymore. Combination of both Navigation paradigms are possible.

Tags:
Former Member