Dynamically change user interfaces for web applications and associated methods

• US 11,609,963 B2
• Filed: 10/24/2018
• Issued: 03/21/2023
• Est. Priority Date: 10/24/2018
• Status: Active Grant

• Current Assignee: Citrix Systems, Inc. (Cloud Software Group)
• Original Assignee: Citrix Systems, Inc. (Cloud Software Group)
• Inventors: Momchilov, Georgy, Van Rotterdam, Jeroen Mattijs, Patrick, Ian D.
• Primary Examiner(s): Burgess, Glenton B
• Assistant Examiner(s): Hackenberg, Rachel J
• Application Number:
  US16/169,155
• Publication Number:
  US 20200134099A1
• Time in Patent Office: 1,609 Days
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: G06F 9/452 Remote windowing, e.g. X-Window System, desktop virtualisation protocols for virtual reality H04L67/131

Abstract

A computing system includes a server and a client computing device. The server includes a web application, and anchor definition layers associated with the web application. The client computing device is operated by an end user and includes a display, and a native application that includes an embedded browser for accessing the web application in a customization mode. The customization mode permits display of one of the web pages along with anchors that can be customized based on what is permitted by the anchor definition layer corresponding to the displayed web page, and customization of the anchors on the displayed web page by the end user to define an anchor customization layer for the displayed web page. In normal use of the web application, the anchor customization layer is applied to the corresponding web page before the corresponding web page is displayed so as to display a customized web page without re-designing the web page itself.

Claims

1. A computing system comprising:

a server comprising a web application; and

at least one client computing device operated by at least one user and comprising;

a display; and

a native application comprising an embedded browser for accessing the web application in order to customize user interfaces (UI) of the web application without re-designing the web application itself, with the embedded browser to perform the following;

access the web application in an edit mode to perform the following;

display a web page of a plurality of web pages,

process a DOM (document object model) structure of the displayed web page to identify anchor points that are part of the user interfaces (UI) of the web application, with the anchor points being identified as user interface enclosures on the DOM structure,

based on user input, determine which anchor points on the displayed web page are available for customization, and

for the anchor points that are available for customization, based on user input select one or more customization options that can be applied to each anchor point, with the anchor points and corresponding customization options defining an anchor definition layer that is associated with the displayed web page;

after the edit mode, access the web application in a customization mode to perform the following;

display the web page having the anchor definition layer associated therewith, including display of the anchor points that are available for customization,

based on user input select one of the anchor points,

customize the selected anchor point to change order or position of the selected anchor point based on the one or more customization options that can be applied as defined in the anchor definition layer associated with the displayed web page, with the one or more customization options being applied via user input, and

save the customization of the selected anchor point in an anchor customization layer, with the anchor customization layer being associated with the displayed web page; and

after exiting the customization mode, access the web application in a normal mode to perform the following;

before display of the web page, apply the anchor customization layer associated therewith to customize display of the anchor points in the web page in response to the web page being displayed.

2. The computing system according to claim 1 further comprising an enterprise server, wherein said at least one second client computing device is enrolled with said enterprise server, and wherein the anchor definition layers are stored on said enterprise server as part of published resource metadata for the web application.

3. The computing system according to claim 1 wherein the customization options for the user include marking selected anchor points that are to be hidden from the end user, and marking selected anchor points that are to be made available to the end user for customization.

4. The computing system according to claim 3 wherein the customization options for each selected anchor point available for customization comprise at least one of the following:

marking the anchor point as being hideable;

marking the anchor point as being resizable;

marking the anchor point as a source meaning that the anchor point can be moved by the end user from its current position to another position on the web page;

marking the anchor point as a target meaning that the anchor point can accept positioning of a source anchor point which in turn causes the target anchor point to be positioned where the source anchor point was initially positioned; and

marking the anchor point as a tile meaning that the anchor point would appear as a live tile for the web application when published in a store view by the end user.

5. The computing system according to claim 1 wherein the anchor definition layers are stored on said server as part of published resource metadata for the web application.

6. The computing system according to claim 1 wherein the customization options for the end user for each anchor point that can be customized comprise at least one of the following:

hiding the anchor point;

resizing the anchor point;

re-positioning the anchor point; and

grouping the anchor point with other anchor points.

7. The computing system according to claim 1 wherein the anchor customization layer is stored on said client computing device.

8. The computing system according to claim 7 further comprising an enterprise server, wherein said client computing device is enrolled with said enterprise server, and wherein the anchor customization layer is cached on said enterprise server.

9. The computing system according to claim 1 wherein the customization mode further permits a customized anchor point to be tagged with a label, with the tag and the customizations being saved as a pattern that can be applied to a different web page for customization by the end user based on the different web page having an anchor point tagged with the same label, with the customization of the different web page corresponding to the customizations associated with the tagged anchor point.

10. A method for operating a computing system comprising:

a server comprising a web application;

and a client computing device comprising;

an embedded browser for accessing the web application in order to customize user interfaces (UI) of the web application without re-designing the web application itself, and comprising;

accessing the web application in an edit mode to perform the following;

display a web page of a plurality of web pages,

process a DOM (document object model) structure of the displayed web page to identify anchor points that are part of the user interfaces (UI) of the web application, with the anchor points being identified as user interface enclosures on the DOM structure,

based on user input, determine which anchor points on the displayed web page are available for customization, and

for the anchor points that are available for customization, based on user input select one or more customization options that can be applied to each anchor point, with the anchor points and corresponding customization options defining an anchor definition layer that is associated with the displayed web page;

after the edit mode, access the web application in a customization mode to perform the following;

display the web page having the anchor definition layer associated therewith, including display of the anchor points that are available for customization,

based on user input select one of the anchor points,

customize the selected anchor point to change order or position of the selected anchor point based on the one or more customization options that can be applied as defined in the anchor definition layer associated with the displayed web page, with the one or more customization options being applied via user input, and

save the customization of the selected anchor point in an anchor customization layer, with the anchor customization layer being associated with the displayed web page; and

after exiting the customization mode, access the web application in a normal mode to perform the following;

before display of the web page, apply the anchor customization layer associated therewith to customize display of the anchor points in the web page in response to the web page being displayed.

11. The method according to claim 10 wherein the computing system further comprises an enterprise server, wherein the second client computing device is enrolled with the enterprise server, and wherein the anchor definition layers are stored on the enterprise server as part of published resource metadata for the web application.

12. The method according to claim 10 wherein the customization options for the user include marking selected anchor points that are to be hidden from the end user, and marking selected anchor points that are to be made available to the end user for customization.

13. The method according to claim 12 wherein the customization options for each selected anchor point available for customization comprise at least one of the following:

marking the anchor point as being hideable;

marking the anchor point as being resizable;

marking the anchor point as a source meaning that the anchor point can be moved by the end user from its current position to another position on the web page;

marking the anchor point as a target meaning that the anchor point can accept positioning of a source anchor point which in turn causes the target anchor point to be positioned where the source anchor point was initially positioned; and

marking the anchor point as a tile meaning that the anchor point would appear as a live tile for the web application when published in a store view by the end user.

14. The method according to claim 10 further comprising storing the anchor definition layers on the server as part of published resource metadata for the web application.

15. The method according to claim 10 wherein the customization options for the end user for each anchor point that can be customized comprise at least one of the following:

hiding the anchor point;

resizing the anchor point;

re-positioning the anchor point; and

grouping the anchor point with other anchor points.

16. The method according to claim 10 further comprising storing the anchor customization layer on the client computing device.

17. The method according to claim 16 wherein the computing system further comprises an enterprise server, wherein the client computing device is enrolled with the enterprise server, and further comprising caching the anchor customization layer on the enterprise server.

18. A non-transitory computer readable medium for operating a client computing device comprising a native application comprising an embedded browser for accessing a web application in order to customize user interfaces (UI) of the web application without re-designing the web application itself, with the non-transitory computer readable medium having a plurality of computer executable instructions for causing the computing device to perform steps comprising:

access the web application in an edit mode to perform the following;

access the web application in an edit mode to perform the following;

display a web page of a plurality of web pages,

process a DOM (document object model) structure of the displayed web page to identify anchor points that are part of the user interfaces (UI) of the web application, with the anchor points being identified as user interface enclosures on the DOM structure,

based on user input, determine which anchor points on the displayed web page are available for customization, and

for the anchor points that are available for customization, based on user input select one or more customization options that can be applied to each anchor point, with the anchor points and corresponding customization options defining an anchor definition layer that is associated with the displayed web page;

after the edit mode, access the web application in a customization mode to perform the following;

display the web page having the anchor definition layer associated therewith, including display of the anchor points that are available for customization,

based on user input select one of the anchor points,

customize the selected anchor point to change order or position of the selected anchor point based on the one or more customization options that can be applied as defined in the anchor definition layer associated with the displayed web page, with the one or more customization options being applied via user input, and

save the customization of the selected anchor point in an anchor customization layer, with the anchor customization layer being associated with the displayed web page; and

after exiting the customization mode, access the web application in a normal mode to perform the following;

before display of the web page, apply the anchor customization layer associated therewith to customize display of the anchor points in the web page in response to the web page being displayed.