, Adapt yourself to the new adaptation mode, Acorel
Gratis demo
, Adapt yourself to the new adaptation mode, Acorel

Adapt yourself to the new adaptation mode

Teun van den Elzen
As you might have heard the HTML5 UI will be retired for all users with the 1911 release of SAP Cloud for Customer. To anticipate on this changes some of the administrator functions, which were in the past solely available in the HTML5 UI, are already available in the Fiori UI since the 1905 release. The expectation is that all administrator functionality will be available in Fiori with the next release (1908). To be well prepared for this transition it is recommended to train yourself to use those functions in Fiori as much as possible. In this blog I will highlight adaptation functions of the new key user tool. I will sum up some of the functionality that’s available in the current release, explain how the adaptation mode works in the Fiori UI and give some tips based on my experience with the tool.

If you want to use the adaptation tool in your Fiori client you have to activate this functionality first. In order to do this go to settings and click adaptation settings. Here you can enable the adaptation for Fiori Client. This does not mean that you can’t use the HTML adaptation anymore, so just give it a try! A list of currently available functions for adaptation is provided in the adaptation settings as well. But the key question is: “How to?”
, Adapt yourself to the new adaptation mode, Acorel
Enable Adaptation

Differences in look and feel

Let’s first dive into the difference between the HTML5 UI Screen adaptation and the Fiori UI screen adaptation by showing them together in one picture. The main difference here is the location of your adaptations. Where adaptations in HTML5 take place all across your screen, increasing the risk you remove or shift a field or tab by accident, the Fiori adaptation mode has a new “adaptation side-panel” in which changes have to be made. To make changes in HTML5 you have to hover over the specific object to see if you can make changes to the object. To open adaptation mode in Fiori click start adaptation in the menu on the right top corner. When you are in adaptation mode a red-white striped bar is shown on top of the screen. In Fiori, most sections that are editable are provided with a blue pencil with an outline to give you insight about the size of the section or pane. To navigate to the relevant location in the adaptation side-panel you must click one of the pencils. The pencil and outline change colour from blue to red, so you have an indication of the section you are editing. Clicking the pencil is one way to determine on what level or object your adaptation takes place. When you want to edit a field you have to drill down from the section to the field level in the adaptation side-panel. My experience with drilling up and down in the UI structure is that it can be improved a lot regarding user friendliness. Finding the field you want to edit can be a time consuming job as drilling down leads in a lot of cases to dead ends, where no action can be performed.

, Adapt yourself to the new adaptation mode, Acorel
Adaptation in Fiori vs. HTML 5

 

A big advantage of the new adaptation mode for me is the fact that you can see all the available fields together on the right hand side. In HTML5 you have a pop-up within add fields to see only the fields that are not yet added to the screen. When you click on the field you drill down to the properties of the field. You can either make the field available for personalization, hide completely or set it to invisible.

, Adapt yourself to the new adaptation mode, Acorel
Drilldown to field

Monitoring adaptation

When you click ”changes” a change log of all changes that were ever executed on that particular field, tab, list or section is shown. A new feature in the Fiori adaptation is the console function that is shown in the right bottom. This console feature logs all actions in the current adaptation session and provides you information if any error occurred in your adaptation session.

, Adapt yourself to the new adaptation mode, Acorel
Monitoring adaptation

Add fields

Fields can be added on the section or list level with the ”add” button. A pop up enables you to enter the basic details of the field. Unfortunately it is in this release not possible to maintain the field definition of the newly created field in Fiori UI.

, Adapt yourself to the new adaptation mode, Acorel
Add new field

Moving fields

At the moment it is only possible to move a field from one to another section within the workcenter. You have to drilldown from a section to the field and click the ”move to” button. A drawback is that when you previously copied a section to another tab in the HTML5 adaptation mode it is copied by default as ”sectionGroup”. If you have a lot of those copied sections it becomes quite a job to find the right section to move your field to, as they have all the same meaningless name. It is therefore my advise to re-evaluate section names maintained in the HTML5 UI, as it can give you a lot of trouble in the future to find the right sections in the adaptation tool. To move the field’s order in the same section you can simply drag and drop the fields in the adaptation side-panel on the section level. Especially for the order of some lists this can be really useful. In HTML5 it is not possible to move the lists for appointments, e-mails, phone calls and tasks on the activities tab of an account, as they are treated as one block. However, in the Fiori adaptation mode it is possible to drilldown to the list for one activity type list and change the order.

, Adapt yourself to the new adaptation mode, Acorel
Moving fields

Expand list

A new function in the Fiori adaptation mode is the possibility to expand the list object. This is as far as I know not possible in the HTML5 adaptation mode, but a really useful feature. A maximum of 30 rows is accepted by the system for lists within a business object.

, Adapt yourself to the new adaptation mode, Acorel
Expand list

Concluded

To conclude, I want to sum up some key benefits and major drawbacks of the new adaptation mode. First of all I think this new way of screen adaptations will reduce the amount of errors you make. You don’t have to drag and drop fields across the screen anymore and furthermore it is quite easy to monitor the changes you’ve made with the changelog and the console function. Second, the expanded list makes it easy to provide more valuable information on one screen, which makes it easier for the user to gather the needed information. I experience the Fiori adaptation tool to be way faster than the HTML5 tool, which is a huge plus!

At this moment the Fiori adaptation tool still misses functionality like the determination of rules or editing the field definition of fields. Furthermore, it is still difficult to drilldown to the field you want to edit, because of system provided namings, like sectionGroup for copied sections. From my own experience I have to say that the pencils of the editable sections don’t always show up. After refreshing the page they mostly show up and adaptation can be started.

Despite the fact that the tool does not yet have all the functionality of the HTML5 tool it is definitely worth it to try out its current functionality. As it is the future tool for screen adaptation in SAP Cloud for Customer it is recommended to have a look at it, because before you know the 1911 release is waiting for you…..

, Adapt yourself to the new adaptation mode, Acorel

Teun van den Elzen