Object pages in multi application user interface

• US 10,649,611 B2
• Filed: 03/17/2017
• Issued: 05/12/2020
• Est. Priority Date: 05/13/2016
• Status: Active Grant

• Current Assignee: SAP SE
• Original Assignee: SAP SE
• Inventors: Rauschenbach, Tina, Richter, Kai, Grammatikakis, Ioannis, Jann, Florian, Hoffner, Andreas
• Primary Examiner(s): Casillas, Roland J
• Application Number:
  US15/462,072
• Publication Number:
  US 20170329479A1
• Time in Patent Office: 1,152 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 diverse client computing devices as a web page that includes a set of UI elements leading to the multiple applications. The diverse client computing devices have display screens of diverse sizes. In the system, backend servers host a UI infrastructure including the common UI and one or more object page floorplans of respective UI object pages representing the multiple applications and representing application information and data on the diverse client computing devices. Design tools are available to process the object page floorplans to display, create, or edit the UI object pages. The object page floorplans include a first object page layout including a title bar, a header, an expanded default state, a navigation control, a content area, and a footer toolbar containing actions that are performed upon a corresponding first UI object page.

Claims

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

one or more backend servers hosting a UI infrastructure including the common UI and one or more object page floorplans of respective UI object pages representing the multiple applications and representing application information and data on the diverse client computing devices; and

one or more design tools to process the object page floorplans to display, create, or edit the UI object pages representing the multiple applications and representing application information and data on the client computing device, wherein the one or more design tools allow the user to create a customized UI environment tailored to user preference, wherein the customized UI environment comprises a plurality of content containers with a customized appearance and presentation, wherein the content containers are adjustable to fit within different display screens of the client computing devices, and wherein the content containers can display content from a plurality of different applications, and

wherein the object page floorplans include a first object page layout including a title bar, a header, an expanded default state, a navigation control, a content area, and a footer toolbar containing actions that are performed upon a corresponding first UI object page, wherein the header includes controls for tailoring the customized UI environment, wherein the content area includes content blocks that have a flexible width and are self-adjusting to avoid truncation of content, and wherein spacing between content blocks is constant and non-zero.

2. The system of claim 1, wherein the first object page layout has a configurable content visibility property.

3. The system of claim 1, wherein, in the first object page layout, a width of a row of content blocks depends on a column layout for a respective display screen size.

4. The system of claim 1, wherein the first object page layout has a float positioning property.

5. The system of claim 1, wherein the first object page layout has a pop out property that allows pop out of secondary content to secondary screens when the corresponding first UI object page is displayed.

6. The system of claim 1, wherein the header is a snapping header that snaps closed leaving only a title bar when the corresponding first UI object is scrolled.

7. The system of claim 1, wherein the header controls for tailoring UI object content include one or more of variant management, object status, object number, button, tokenizer, rating indicator, progress indicator, and form controls.

8. The system of claim 1, wherein the navigation control provides at least one of anchor bar navigation, no navigation, and facet navigation.

9. The system of claim 8, wherein the navigation control includes facets navigating to one or more of dataset toolbar features, single dataset features, unassociated tables features, table and form features, master detail features, and form features.

10. A method for presenting a common user interface (UI) of multiple applications on diverse client computing devices as a web page that includes a set of UI elements leading to the multiple applications, the diverse client computing devices having display screens of diverse sizes, the method comprising:

retrieving one or more object page floorplans of respective UI object pages representing the multiple applications and representing application information and data on the diverse client computing devices; and

processing, using one or more design tools, the object page floorplans to display, create, or edit the UI object pages representing the multiple applications and representing application information and data on the client computing device, wherein the one or more design tools allow the user to create a customized UI environment tailored to user preference, wherein the customized UI environment comprises a plurality of content containers with a customized appearance and presentation, wherein the content containers are adjustable to fit within different display screens of client computing devices, and wherein the content containers can display content from a plurality of different applications, and

wherein the object page floorplans include a first object page layout including a title bar, a header, an expanded default state, a navigation control, a content area, and a footer toolbar containing actions that are performed upon a corresponding first UI object page, wherein the header includes controls for tailoring the customized UI environment, wherein the content area includes content blocks that have a flexible width and are self-adjusting to avoid truncation of content, and wherein spacing between content blocks is constant and non-zero.

11. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout to configure content visibility in the corresponding first UI object page.

12. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout to adjust a width of a row of content blocks depending on a column layout in the corresponding first UI object page for a respective display screen size.

13. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout to use a float positioning property to flow content in the corresponding first UI object page.

14. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout to use a pop out property that allows pop out of secondary content to secondary screens when the corresponding first UI object page is displayed.

15. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout to provide a snapping header that snaps closed leaving only a title bar when the corresponding first UI object is scrolled.

16. The method of claim 10, wherein processing the object page floorplans includes processing the first object page layout using controls in the header that include one or more of variant management, object status, object number, button, tokenizer, rating indicator, progress indicator, and form controls in the header to tailor first UI object content.

17. The method of claim 16, wherein processing the object page floorplans includes processing the first object page layout using the navigation control to provide at least one of anchor bar navigation, no navigation, and facet navigation in the corresponding first UI object.

18. The method of claim 17, wherein processing the object page floorplans includes processing the first object page layout using facets in the navigation control to navigate to one or more of dataset toolbar features, single dataset features, unassociated tables features, table and form features, master detail features, and form features in the corresponding first UI object.