Getting Started with HTML5 in SAP Business ByDesign
HTML5 is now the default UI-technology for SAP Business ByDesign. Hence, we would like to use this blog to introduce you to the main changes that come with the HTML user interface.
- The new Screen Layout
- The Launchpad
- The Work Center Shortcuts
- The Home Overview
1. The new Screen Layout
With the switch to HTML5, there are some changes that we would like to explain here.
The navigation menu that ran across the top in Silverlight is now on the left (1). This change was made to accommodate modern displays that tend to be in the 16:9 ratio or even wider.
The navigation menu has icons and color coding that indicates which work centers belong to the same business area. The user can switch between icons only and icons + menu name.
In the upper right corner (2), you find the Enterprise Search, that you can open by clicking on the magnifying glass. The Me Area where you can enter personalization, my settings, provide feedback or log off. If you were a key user, then additional options to enter or leave adaptation or access the company settings would be available here. The question mark opens the help center (3) where Business ByDesign provides context sensitive help to the user.
In addition, there is a navigation area at the bottom of the screen where you can find open work center views or common tasks (4).
2. The Launchpad
The launchpad is always the starting point when a user is logged on to Business ByDesign.
On the screenshot below there are different groups of tiles available on the launchpad which can easily be adapted by the user. Please click here to learn how to personalize the launchpad.
Let’s take a closer look at the different groups.
- The Work: Inbox (1): Here the user has access to business task management items directly and automatically assigned to him. Business ByDesign automatically pushes relevant information in the form of tasks, alerts, and notifications to the user so that the user can complete the daily work.
- The Service and Support section (2): From here the user can directly open e.g. the getting started, submit and idea or consult the ByDesign Community
In addition, the user can also add KPI’s, shortcuts or mashups to the launchpad.
- The user can add different KPIs (3) to the launchpad that help the user to keep track of important numbers. If the user wants to have more information about the KPI, he only needs to click the tile which opens the details screen of the KPI.
- In order to quickly access the most important areas or tasks in ByDesign the user can add shortcuts to the launchpad (4). Please click here to learn how to add shortcuts to the launchpad
- Mashup (5) enable the user to incorporate information from e.g. external sources to the launchpad. Please click here to learn how to add mashups to the launchpad.
The names of the groups as well as the current assignment of the tiles to those groups are only examples. The names can easily be edited and any launchpad group can have any type of tile in it.
3. The Work Center Shortcuts
Besides the possibility to add shortcuts to the launchpad, the user can also add shortcuts to the work center Shortcuts.
To do so, the user only needs to hover the mouse over a specific work center view or common task and click the icon that appears next to it. As soon as the user clicks the icon the selected object will appear in the work center Shortcuts.
4. The Home Overview
The new overview page within the Home work center enables the business user to achieve transparency into critical business KPIs and situations.
On this page the business user finds important report cards and KPI cards, which he has personalized on his page.
In case the user has personalized embedded reports (so called Information Consumer Patterns) in Silverlight, he will find the migrated content on this page after the upgrade to 1711 in the HTML5 UI.
Consume the Overview Page
Please find an example for an overview page below. Business users can navigate to the related detail by clicking on the header of a report or KPI card.
In case the user clicks on a KPI card (example (1) or (2)) he will reach the KPI detail screen as shown below, which provides in the header further information on criticality and how far he is away from his goals or previous reference values.
In the lower part of the screen the user will find multiple context reports, which deliver further explanations by analyzing the trend or segmentation of his KPI values.
By the way those KPIs are created as corporate KPIs from the key user within the business analytics work center.
In case the user chooses to click on a report card (example (3) or (4)), he can drill further into the details by using the analysis pattern. Here the user can choose predefined corporate or personal views and selections or define his own drill-downs on fields of his choice.
Personalize the Overview Page
A user can add new cards to the overview page by starting the personalization mode (1) and then open the gallery (2) to add new KPI or report cards to your page (3). After this step the user can configure both KPI and report cards by maintaining the related settings.
Business user can choose for report cards the width and the view and selection variant you want to see. For KPIs he can decide if he wants to display the KPI with context report or collapsed, but there is more to come.
Furthermore, it is possible to arrange cards, delete cards and finally save the personalization, which is then available for consumption.
Please keep in mind that the overview page is a first step into a new world of monitoring, which is planned to be extended to work center and custom-built overview pages in future. Please click here to learn more about the built-in analytic capabilities of Business ByDesign.