Overview page in multi application user interface

• US 10,353,534 B2
• Filed: 03/16/2017
• Issued: 07/16/2019
• Est. Priority Date: 05/13/2016
• Status: Active Grant

• Current Assignee: SAP SE
• Original Assignee: SAP SE
• Inventors: Grammatikakis, Ioannis, Watters, Daniel George, Jann, Florian, Krenkler, Michael, Voutta, Emil, Schon, Jamila, Ziegler, Marc
• Primary Examiner(s): Bashore, William L
• Assistant Examiner(s): Distefano, Gregory A
• Application Number:
  US15/461,330
• Publication Number:
  US 20170329500A1
• Time in Patent Office: 852 Days
• CPC Class Codes: G06F 16/2428 Query predicate definition using graphical user interfaces, including menus and forms G06F16/2423 takes precedence
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 2203/04803 Split screen, i.e. subdividing the display area or the window area into separate subareas
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04812 Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0483 Interaction with page-structured environments, e.g. book metaphor
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 8/38 for implementing user interfaces
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: H04L 67/02 based on web technology, e.g. hypertext transfer protocol [HTTP]

Abstract

A system for presenting a common user interface (UI) of multiple applications on a client computing device as a web page that includes a set of UI elements leading to a respective set of the multiple applications for a user. In the system, backend servers host a UI infrastructure including the common UI. Design tools are coupled to UI infrastructure for personalizing the common UI that is presented by the backend servers on the client device. The design tools include a tool that disposes, in the common UI, an overview page (OVP) element leading to a personalized overview page that visually displays, at a glance, application information and data visualizations for a specific work domain or role of the user.

Claims

1. A system for presenting a common user interface (UI) of multiple applications on a client computing device as a web page that includes a set of UI elements leading to a respective set of the multiple applications for a user, the system comprising:

one or more backend servers hosting a UI infrastructure including the common UI; and

one or more design tools coupled to UI infrastructure for personalizing the common UI that is presented by the one or more backend servers on the client device,

the one or more design tools including a tool that disposes, in the common UI, an overview page (OVP) element leading to a personalized overview page that visually displays, at a glance, application information and data visualizations for a specific work domain or role of the user for each given application in the respective set of the multiple applications, wherein;

the OVP element includes a card, for each given application, that displays application content for the given application;

each card presents an actionable element that enables the user to perform an action corresponding to the given application and the displayed application content for the given application without launching the application, wherein;

at least one of the cards includes a multiple-selection action element that enables multiple selections and multiple corresponding actions to be performed; and

at least one of the cards includes a single-selection action element that enables one selection and one corresponding action to be performed, with the one action resulting in the card being removed from the OVP element after the one action has been performed.

2. The system of claim 1, wherein the one or more design tools include a tool deploying the OVP element in the common UI as a user-activable tile or a web link leading to the personalized overview page.

3. The system of claim 1, wherein the one or more design tools include a tool that includes, in the personalized overview page, displays of real-time application information and data visualizations of one or more applications running in the background.

4. The system of claim 3, wherein the one or more design tools include a tool that organizes displays of real-time application information and data visualizations in an equal plane within the personalized overview page.

5. The system of claim 1, wherein the one or more design tools include a tool that deploys cards as containers of content in the personalized overview page, the cards being deployed in a UI framework according to a template schema that allows application vendors to embed application specific content into the cards used in the personalized overview page.

6. The system of claim 5, wherein the one or more design tools include a tool that rearranges a card layout in the personalized overview page using a drag and drop feature to change a position of a card in the personalized overview page.

7. The system of claim 5, wherein the one or more design tools include a tool that:

deploys cards in the personalized overview page in an flexible card layout that features collapsible columns or rows of cards; and

collapses the columns or rows of cards to fit the personalized overview page to a screen size on the client computing device.

8. The system of claim 5, wherein the one or more design tools include a tool that binds each card to a single application data-source and uses UI annotation to render the card'"'"'s content.

9. The system of claim 5, wherein the one or more design tools include a tool that:

provides the personalized overview page with an object header including context information describing the personalized overview page,

provides a user-activable smart filter bar control to analyze a meta document of an OData service and render a filter bar configured to filter content displayed on the personalized overview page, and

provides a content area including collapsible columns of the cards, each card bound to a single application data-source.

10. The system of claim 5, wherein a card includes a content area reserved for displaying application content, and wherein the one or more design tools include a tool for embedding a UIS control that specifies the properties and format of the content that is to be displayed in the content area.

11. The system of claim 10, wherein the card further contains an identifier describing card content, and wherein the one or more design tools include a tool that configures the identifier as a navigation link to an application or view that is the data-source of the card content.

12. The system of claim 10, wherein the one or more design tools include a tool for disposing, in the card, user-activable actions related to the card content.

13. A method comprising:

presenting a common user interface (UI) of multiple applications as a web page on a client computing device, the common UI including a set of UI elements leading to a respective set of the multiple applications for a user; and

disposing, in the common UI presented on the client computing device, an overview page (OVP) element leading to a personalized overview page that visually displays, at a glance, application information and data visualizations for a specific work domain or role of the user for each given application in the respective set of the multiple applications, wherein;

the OVP element includes a card, for each given application, that displays application content for the given application;

each card presents an actionable element that enables the user to perform an action corresponding to the given application and the displayed application content for the given application without launching the application, wherein;

at least one of the cards includes a multiple-selection action element that enables multiple selections and multiple corresponding actions to be performed; and

at least one of the cards includes a single-selection action element that enables one selection and one corresponding action to be performed, with the one action resulting in the card being removed from the OVP element after the one action has been performed.

14. The method of claim 13, wherein disposing the overview page (OVP) element in the common UI presented on the client computing device includes providing the OVP element as a user-activable tile or a web link in the common UI leading to the personalized overview page.

15. The method of claim 13 further comprising, displaying, on the personalized overview page, real-time application information and data visualizations of one or more applications running in the background.

16. The method of claim 13 further comprising, organizing displays of the application information and data visualizations in an equal plane within the Overview page.

17. The method of claim 13 further comprising, deploying cards as containers of content in the personalized overview page, the cards being deployed in a UI framework according to a template schema that allows application vendors to embed application specific content into the cards in the personalized overview page.

18. The method of claim 13 further comprising:

deploying cards as containers of content in the personalized overview page; and

rearranging a card layout in the personalized overview page using a drag and drop feature to change a position of a card in the personalized overview page.

19. The method of claim 13 further comprising:

deploying cards as containers of content in the personalized overview page as an flexible card layout that features collapsible columns or rows of cards; and

collapsing the columns or rows of cards to fit the personalized overview page to a screen size on the client computing device.

20. The method of claim 13 further comprising, providing the personalized overview page with:

an object header including context information describing the personalized overview page;

a user-activable smart filter bar control to analyze a meta document of an OData service and render a filter bar configured to filter content displayed on the personalized overview page; and

a content area including collapsible columns of the cards, each card bound to a single application data-source.

21. The method of claim 13 further comprising:

deploying cards as containers of content displayed in the personalized overview page, wherein each card is bound to a single application data-source and uses UI annotation to render its content.

22. The method of claim 21, wherein a card includes a content area reserved for displaying application content, and wherein the method further comprises embedding a UIS control that specifies the properties and format of the content that is to be displayed in the content area.

23. The method of claim 22, wherein the card further contains an identifier describing card content, and wherein the method further comprises configuring the identifier as a navigation link to an application or view that is the data-source of the card content.

24. The method of claim 22 further comprising, disposing, in the card, user-activable actions related to the card content.