Teun van den Elzen
Read all my blogs
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.
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.
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.
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.
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.
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.
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…..
5 reacties op “Adapt yourself to the new adaptation mode”
Hi,
and How to change a label of the field in FIORI?
Hi Pawel,
At the moment it is not possible to change a field label with the Fiori Adaptation mode, however this functionality will be available in the upcoming release of C4C (1908). On the 27th of July all test tenants will be upgraded and on the 10th of August all production tenants will get new functionality.
Hi,
Thank You for Your help.
Hi,
Have you figured out how to add a mashup with the Fiori UI?
I don’t see an obvious way to “Add” when I’m adapting the changes in.
As of 1908, it appears that changes I adapt in with HTML5 UI don’t apply to Fiori UI anymore.
Hi Jason,
The adaptation features will be made available during the course of three releases 1905, 1908 and 1911. As far as I know adding mashups is only available in HTML5 UI in the 1908 release, so adapting mashups will be probably added in the 1911 release.
Changes made in HTML5 UI should be reflected in Fiori (as long as those objects exist in Fiori). The HTML5 UI tickets object does not exist for Fiori, so for instance adaptations made in the HTML5 UI for the tickets object will not be reflected in Fiori, as they have to be adapted in ‘open layout in HTML’ mode.
Kind Regards,
Teun