Skip to Content
Technical Articles
Author's profile photo Prasita Prabhakaran

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 TitleSubtitle 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 TitleSubtitle 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.

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Roger Beach
      Roger Beach

      Is it just me or are all of the images broken?

      Author's profile photo Lucas Araujo
      Lucas Araujo

      Me too

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      It's working fine for me... perhaps try again?

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Please check now, I have added the images again

      Author's profile photo Roger Beach
      Roger Beach

      Looks great.  Thank you.

      Author's profile photo Supriya Sahu
      Supriya Sahu

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Please look for console errors if any.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      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

       

       

      Author's profile photo GRUBER Julien
      GRUBER Julien

      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.