With the release 1808 SAP Business ByDesign made another step towards SAP Fiori design by adapting the card based layout of the Fiori Overview Pages.
All content on these overview pages will arrange their information on cards which was already introduced for the Home - Overview page. The cards can have a width of "narrow", "medium" and wide and the content which is display on the cards is specific to the workcenter in which it is located.
The overview pages can host different types of content which are available via the gallery in Personalization mode.
All cards have some common behavior like
They are arrange from left to right and from top to bottom.
They have a defined width ("Narrow", "Medium", "Wide") which can be changed via the settings of the card. The settings are located on the backside of the card and can be accessed in personalization mode via the settings button on the right bottom corner, or the button on the context menu on the card.
The title of the card can be changed in personalization mode via the context menu of the card or inplace by pressing the title.
The arrangement of the cards can be changed in personlization mode just dragging a card to another place or pressing the Move button and the arrows on the context menu of the card.
All cards can be either completely removed from the page via the cross button on the right top corner (in personalization mode), or set to invisible/visible via the sidecar checkbox. Both changes could be done via the context menu of the card as well.
The gallery is very similar to the one which is used on the Launchpad or the Home - Overview page, despite the fact that it only displays the content which is available for this workcenter.
Once in Personalization the overview page displays an additional plus card at the end of the cards collection. If this is pressed the gallery will open and will offer the different types of cards which can be used onthe overview page. The different types of cards are:
Mashups (embedded pages)
KPIs (with, or without the underlying report)
Reports (with the configuration of the view selection)
Groups of Quicklinks (workcenter specific links with instance count information)
Embedded List (for example the "Latest News" table)
Once a Mashup is selected and the Apply button was pressed the mashup is added to the overview page inside a new card.
This mashup card could be dragged to another position
and the width of it could be selected via the standard card settings (backside of the card), plus for mashups we can also define the height of the card.
After the Apply button is pressed the settings are applied and the card has its new size.
Please mention: The settings and changes are not stored yet, they are only applied for this session. To store the changes they regular mechanism of storing personlization must be used via the buttons in the sidecar.
Quicklink cards will also be added to the overview page via the gallery (like all other cards), by selecting the Quicklinks tab and the corresponding quicklink group.
If you select want to add a group of quicklinks as a new card to an overview page you have to select the tab Quicklinks inside the gallery and then open the settings of the card. In this case I will select the "Invoice Runs" quicklink group.
The new quicklink card is added to the overview page and dragged to the left upper corner and we've opened the settings of the card to add links to it.
In this case there is only one available which we will add and after the Apply button and saving our personalization the overview page looks like this.
Adding KPI cards is very similar like adding other cards. We just opened the gallery via the plus card on the overview page and select the tab KPI. In the search field I search for "Invoice" and the content of the gallery is filtered accordingly. I add the KPI card "Net Invoice Value" and drag it to the left side of the overview page (and apply and store it).
Again we open the gallery in personlization mode via the plus card on the overview page but now we select the tab "Reports" and filter again for "Invoice".
We select "Invoice and Credit Memos" and except the changes via the Apply button.
Now we are adapting our layout by first chancing the settings of the added KPI card to display the card without the underlying report, and secondly to bring the newly added Report card also to the left side of the overview page.
Add Embedding Lists:
To add an additional list we can select the last tab in the gallery, called "Embedded List" and select the appropriate entry. In our case there is only one "Latest News" which displays the configured feeds.
After adding this card and moving it to its new place the overview page looks like this. Unfortunately there are not yet any feeds available.