Category: SAP Fiori
Author: Sally-Ann van Nuland, Gijs Pruijmboom

Themes, overview and maps

You can read more about the Design principles of SAP Fiori and the matching Guidelines in our previous blogpost. Mentioned in that blog were the advantages of using the Guidelines, not the technical insight on how to use the Guidelines. There is no need for that since the Guidelines are completely written out by SAP and available on the SAP webpage, but we like to point out three subject that are well worth looking into.

1. The UI Theme Designer

In short: The option to adjust the visual look according to company standards.

Thanks to the Design principles and the Guidelines it seems that the look of SAP Fiori is standard and that a company is missing out on a chance to be visible when using SAP Fiori. This isn’t true per se. Yes, SAP Fiori is holding on to their Design Concept and most of the framework is already set, but no, this does not mean that there is no room for creativity an visual adjustments.

UI Theme Designer (Source: SAP) UI Theme Designer (Source: SAP)

SAP Fiori user interfaces are equipped with SAPUI5 control sets that are made up with CSS. Fiori applications can work with multiple themes, when available, and support high-contrast accessibility requirements as well. A standard theme can be adjusted, for example, by replacing the logo for the company logo or changing the colors to accommodate the requirements for the visual language and brand of the company. A theme can be radically adjusted, but you can also choose to adjust little details.

A very important advantage is the fact that the theme is centralized. This means that when there are adjustments that are implemented in the UI Theme Designer these adjustments will show in the entire SAP Fiori environment. This can save a lot of time. Another advantage is that the theme can become a task on its own. This can help defining roles and responsibilities in a project group. Check out this page for more info.

2. The Overview Page for the end-user

In short: The display of separate tasks and the corresponding information per role on the Overview page.

It was already possible to group information in the Launchpad with SAP Fiori 1.0. This provided a clear overview for the end-user. With the Overview Page for SAP Fiori 2.0 this concept is improved and included as a feature for the end-user. Traceble in the Guidelines under the subject Layouts, Floorplans and Framework is the chapter Overview Page. This element of the Fiori Design Guidelines, that isn’t only focusing on design, can create clearity on the Launchpad and the connection with the Overview Page per task and role. The Overview page can be seen a layer with substantive information. A dashboard per subject if you will. 

Visual about the Overview Page (Source: SAP) Visual about the Overview Page (Source: SAP)

The Overview Page is an important section for the end-user because it doesn’t only show a rolebased dashboard, but a taskbased overview within this role.

  • Focus on tasks without otiose information from other apps.
  • Different flows of information per specific task.
  • Different visualization of data (tables, maps, charts) per task.
Example of the Overview Page (Source: SAP) Example of the Overview Page (Source: SAP)

3. Visualization of maps

In short: A clear view because of choices in design

Because of our experience in the segments; Logistics and Service and Maintenance, we are well aware of the importance of a geologic map. For planning the most efficient route for example. An analytic map can be used for analytics and reports. Both type of maps are already figured out by SAP when it comes to design and the technology is implemented within SAP Fiori. This means the only thing left to do is shaping the maps instead of developing and implementing it completely. The next features are insertable to the maps: De volgende kenmerken zijn bijvoorbeeld toe te voegen aan de kaarten:

  • Legend
  • Navigation and control (zoom in etc.)
  • Add on locations (and additional information)
  • Labels with symbols and colorindication
  • Areas with colorindication and radius
  • Routes

Furthermore it is possible to add UI5 controls to a map that aren’t included in the standard. It is possible to show revenue per country in a analytic map for example. In short you have a lot op options and opportunities in regards of the maps.

Visual examples can be find here

Specific questions?

Enter your e-mail address and Oliver IT will contact you as soon as possible!

Done! We will contact you soon!
Jeroen Jansen Consultant
Jeroen Jansen