- SAP Managed Tags:
An overview page is a data-driven SAP Fiori app built using SAPUI5 technology, OData services, and annotations for organizing large amounts of information on one single page. And as with other SAP Fiori elements, you can create overview pages using the template wizard in SAP Web IDE.
Overview pages provide quick access to vital business information at a glance, in the form of visual, actionable cards. With the overview page app, you can create cards for different types of content that helps in visualizing information in an attractive and efficient way. To create an overview page, you’ll use the overview page floorplan.
Have a look at the following video to get a broader understanding of the overview page.
Now, obviously there’s much, much more to the overview page, and fortunately there are many great resources out there, such as the SAP Fiori design guidelines and the product documentation on the SAP Help Portal. But let me highlight a few things I think are important to consider.
From afar, the two might look alike, but get in closer, you’ll see the differences. While the SAP Fiori launchpad provides a single-entry point to all Fiori apps, an SAP Fiori overview page only shows the user the most important information, which is based on their unique role within an organization.
Whereas the user can launch apps (such as the overview page) from tiles on the SAP Fiori launchpad, the overview page uses cards to display more detailed, aggregated information about the tasks they need to do daily. And just like when clicking on a tile in the launchpad, clicking on an overview page card will also lead the user to an application.
From the video above, you learned that the overview page is based on the dynamic page layout and a powerful part of this floorplan is the use of the smart filter bar. The smart filter bar is generated from data services and what results from these filters is what populates the information you see in the overview page cards.
So how does the smart filter bar work? It filters item lists and tables according to various filter criteria. If you use a view, or in SAPUI5-speak, a variant, then you’ll be able to handle complex lists that make use of multiple filters. This way you’ll be able to save and load different layouts to display data in different views. And when we’re looking at the data on overview page cards, you’ll sometimes see the results of multiple filter selections.
Here, I’ve only just highlighted some of the features of the smart filter bar and why it’s a powerful tool for the overview page. There’s more about the smart filter bar in the Fiori design guidelines.
In the video we had a quick look at the list, table, and quick view cards, and a some of the analytical chart cards. But you can also choose from the bar chart, link list, and table cards, and the stacked column, vertical bullet, and scatter plot analytical chart cards.
The list card is probably one of the more popular cards used in overview pages, because not only can you view items in a list, you can also add a variety of components to it such as links or a progress bar. And this bar, together with some semantic highlighting, can be used to indicate that something critical requires your users’ immediate attention.
What makes analytical chart cards so useful, is that they visualize data in easy-to interpret formats. The KPI area in the card header first reveals a lot of information about an item by using semantic colors to indicate positive or negative trends or deviations. The chart area of the card then displays more details of what a KPI is highlighting.
You’ve gotten a glimpse into the overview page and its cards, but before you begin creating an overview page, you should consider a few things such as who will be using the app, decide on what type of content you want displayed, and how.
It’s important to only show cards that support a business user in their daily work and not overwhelm them with too much information. By using different card types and making use of different visual cues, your user will be able to recognize the most important tasks immediately.
You should also:
Also, have a look at the chapter in the SAP Fiori design guidelines about choosing the correct chart type.
Stay smart with SAP Fiori elements and stay tuned!
Special thanks to lisa.jones and Ravi for their support in creating the multimedia for this blog.
If you found this blog interesting, be sure to read stay smart with SAP Fiori Elements.
Overview pages provide quick access to vital business information at a glance, in the form of visual, actionable cards. With the overview page app, you can create cards for different types of content that helps in visualizing information in an attractive and efficient way. To create an overview page, you’ll use the overview page floorplan.
Have a look at the following video to get a broader understanding of the overview page.
Please click on the image to watch the video
Now, obviously there’s much, much more to the overview page, and fortunately there are many great resources out there, such as the SAP Fiori design guidelines and the product documentation on the SAP Help Portal. But let me highlight a few things I think are important to consider.
Not just another Fiori launchpad
From afar, the two might look alike, but get in closer, you’ll see the differences. While the SAP Fiori launchpad provides a single-entry point to all Fiori apps, an SAP Fiori overview page only shows the user the most important information, which is based on their unique role within an organization.
Whereas the user can launch apps (such as the overview page) from tiles on the SAP Fiori launchpad, the overview page uses cards to display more detailed, aggregated information about the tasks they need to do daily. And just like when clicking on a tile in the launchpad, clicking on an overview page card will also lead the user to an application.
The power of the smart filter bar
From the video above, you learned that the overview page is based on the dynamic page layout and a powerful part of this floorplan is the use of the smart filter bar. The smart filter bar is generated from data services and what results from these filters is what populates the information you see in the overview page cards.
So how does the smart filter bar work? It filters item lists and tables according to various filter criteria. If you use a view, or in SAPUI5-speak, a variant, then you’ll be able to handle complex lists that make use of multiple filters. This way you’ll be able to save and load different layouts to display data in different views. And when we’re looking at the data on overview page cards, you’ll sometimes see the results of multiple filter selections.
Here, I’ve only just highlighted some of the features of the smart filter bar and why it’s a powerful tool for the overview page. There’s more about the smart filter bar in the Fiori design guidelines.
Overview page cards show you what you need to know
In the video we had a quick look at the list, table, and quick view cards, and a some of the analytical chart cards. But you can also choose from the bar chart, link list, and table cards, and the stacked column, vertical bullet, and scatter plot analytical chart cards.
The list card is probably one of the more popular cards used in overview pages, because not only can you view items in a list, you can also add a variety of components to it such as links or a progress bar. And this bar, together with some semantic highlighting, can be used to indicate that something critical requires your users’ immediate attention.
What makes analytical chart cards so useful, is that they visualize data in easy-to interpret formats. The KPI area in the card header first reveals a lot of information about an item by using semantic colors to indicate positive or negative trends or deviations. The chart area of the card then displays more details of what a KPI is highlighting.
Best practices for designing an overview page
You’ve gotten a glimpse into the overview page and its cards, but before you begin creating an overview page, you should consider a few things such as who will be using the app, decide on what type of content you want displayed, and how.
It’s important to only show cards that support a business user in their daily work and not overwhelm them with too much information. By using different card types and making use of different visual cues, your user will be able to recognize the most important tasks immediately.
You should also:
- use semantic colors in texts and charts to highlight the most important information (e.g. “urgent” or “out of stock”) to attract the user’s attention.
- offer a mix of card types to easily recognize, select, and read information.
- define a deliberate card order because most users assume that bigger cards and cards at the top of the page are more important than others.
- group similar topics and related cards next to each other.
Also, have a look at the chapter in the SAP Fiori design guidelines about choosing the correct chart type.
Stay smart with SAP Fiori elements and stay tuned!
Special thanks to lisa.jones and Ravi for their support in creating the multimedia for this blog.
If you found this blog interesting, be sure to read stay smart with SAP Fiori Elements.
