Technical Articles
Unveiling Key User Tools in SAP Fiori Elements – Overview Pages
Motivation
As we already know Overview Pages plays a key role in the overall information architecture. And thus user adaptation is a highly desirable feature.
Basic code-less enhancements like change of card title/sub-tile or to adding of a “Frequently used apps” cards are missing as of now . Coded enhancements available are decoupled from the original app . They are not completely upgrade safe and come with an additional cost of adaptation and and obvious increased cost of ownership .
To address these, Overview Pages supports user interface adaptation starting SAPUI5 version 1.58.2. This is available for Key users with special roles assigned. The Key user has the capability of making additional customisations to an OVP app related to the following features, which can then be published and then made available to all users.
Prerequisite
The Key user requires the role SAP_UI_FLEX_KEY_USER to be assigned for using this feature. This can be assigned using SU01 in the required system. For cloud systems the user is FlexKeyUser. More info on this can be found here.
Features
For a Key user the following set of features are available in the UI Adaptation Mode.
To enable UI Adaptation Mode
Click on the Me Area àAdapt UI
The selected mode “UI Adaptation” is displayed on top of the screen as follows:
You can now proceed to make use of the user adaptation features available in OVP.
On click of a card a context menu is shown as follows:
On click of the ellipsis or a right click of the card results in the following options to be shown:
Hide Card
This gives a provision to hide cards on initial load by the Key user. The cards will continue show up in the Manage Cards section and the end user will be able to view them later.
Add Card
In case there are cards hidden the context menu (when clicked on a card or when clicked on the empty space on screen) provides an option to show the hidden card.
Add card allows the Key user to search from the list of available cards and add them back into the overview page
Edit Card
Edit card provides the following list of features, including a quick preview of the changes done
Card Title, Subtitle are editable.
Dynamic subtitle can be switched on/off. When switched on it will show the list of values based on HeaderInfo annotation already available for the given OVP application.
KPI Header can be switched on/off. When switched on it will allow details of KPI Value and KPI Description to be added
KPI Value shows a list of DataPoint annotations available for the Entity set associated with the current card. The names shown are title provided for the DataPoint Annotation. If this is not present the qualifier is shown along with “No label defined” on the UI
KPI Description can be edited
View By shows a list of PresentationVariant annotations available for the Entity set associated with the current card. The names shown are text provided for the PresentationVariant Annotation. If this is not present the qualifier is shown along with “No label defined” on the UI
Filter By shows a list of SelectionVariant annotations available for the Entity set associated with the current card. The names shown are text provided for the SelectionVariant Annotation. If this is not present the qualifier is shown along with “No label defined” on the UI
View Fields By is a list of LineItem annotations available for the Entity set associated with the current card. The value help shows a list of options along with fields information for each of the LineItem annotations (labels provided for the dataFields/dataPoints within the LineItem Annotation).
Navigate To is a list of navigation options available within Identification annotations for the Entity set associated with the current card, based on its priority. The names shown are labels provided for the DataFieldForIntentBasedNavigation/DataFieldWithURL based on priority within the Identification Annotation. If this is not present the qualifier is shown along with “No label defined” on the UI
In case of Chart Cards:
Type of Chart is a list of Chart annotations available for the Entity set associated with the current card. The names shown are descriptions provided for the Chart Annotation. If this is not present the qualifier is shown along with “No label defined” on the UI. Note that based on the annotations used. SelectionPresentationVariant and KPIAnnotation are also used in certain cases. The settings will vary accordingly.
In case of List cards there are additional options as follows to set the type of List:
Add View
Add view provides an option to add a view switch to the current card
View Name is editable, rest of the fields are same as the ones available in Edit Card. To edit the basic properties of the card select the “Basic Card Attributes” option as shown below:
Delete View
In case of cards which have view switch, there is a provision to delete those.
Modify Card Size(only for apps that are already using Resizable Layout)
Resizing
By default resizing is enabled for all cards in Overview Pages. Switching this toggle to off will disable resizing for the selected card
Number of Columns
Change the number of columns for the selected card
Number of Rows
Change the number of rows for the selected card
Below is an example for cards like List and Table type.
Below is an example for cards like Analytical and Link List type.
Save
The changes made to the card can be saved
Cancel
Cancel reverts the current set of changes for the given card
Reset Card
Reset takes the card back to the last published state.
Copy Card
Makes a copy of the selected card. To denote that it is a copy of an existing card “Copy” is shown in UI Adaptation Mode.
Create Link List Card
This allows the Key user to add a New static link list card
Card Title and Subtitle are same as in Edit Card. Display Type for the Link list card can be set as List or Carousel. Data for each line item to be shown on the Link list card can be added with the following information:
Link Title, Subtitle can be entered. Link To can be a URL or Application. In case of Application, Key user is presented with a list of applications currently registered with FLP.
Create KPI Card
This allows the Key user to add a New KPI card, by selecting a Smart Business KPI if it exists in the current system
Click on Add KPI Card
KPI can be searched from the list of Smart Business KPIs available in the current system and selected. Card Title and Subtitle can be entered.
Cut
Simulation of Drag Card
Paste
Simulation of Drop Card
Publish
This allows the Key user to publish the set of changes to be visible for all end users. This also requires a Transport Request to be provided.
Save & Exit
Save the current set of changes
Reset
Reset all the UI changes like Hide/Show, View Switch & Cut&Paste back to the initially delivered state and other changes back to last published state.
Best Practices
To make the UI Adaptation Mode more user friendly application areas are to maintain labels for annotations as follows
Annotation |
Property |
---|---|
PresentationVariant |
text |
SelectionVariant |
text |
DataPoint |
title |
IdentificationAnnotation |
The label is displayed based on the priority set in the DataFieldForIntentBasedNavigation/DataFieldWithURL property |
ChartAnnotation |
description |
May the Force be with the Key User!
We look forward to your queries and comments on this feature.
Is it just me or are all of the images broken?
Me too
It's working fine for me... perhaps try again?
Please check now, I have added the images again
Looks great. Thank you.
Hi Prasita,
I have assigned myself the required role(SAP_UI_FLEX_KEY_USER ) but, still cannot find ADAPT UI in the Me Area.
Is there anything else that i am missing ?
Thanks,
Supriya
Please look for console errors if any.
Hi Prasita,
Is it possible for me to fix a layout using adapt UI?
Cards should appear in a specific sequence for all the users and one card should not have any other card below it.
Is it also possible that reset layout should reset to the layout I have set using adapt UI?
Please clarify
Hello Prasita,
Thanks for this blog page, this "Adapt UI" is definitely a great functionality.
One question though: it seems to me that some systems do not have the "Add KPI Card" possibility, to add new cards from Smart Business KPIs, but only the possibility to add link list cards. Could you precise if there is a prerequisite to get this possibility? Maybe a matter of system version (for instance, was it available in version 1809?)
Thanks,
Julien.