Application builder
Disclosed herein are system, method, and computer program product embodiments for unifying graphical user interface (GUI) displays across different device types. In an embodiment, a unification system may convert various GUI view appearing on, for example, a desktop device into a GUI view on a mobile device. Both devices may be accessing the same application and/or may use a cloud computing platform to access the application. The unification system may aid in reproducing GUI modifications performed on one user device onto other user devices. In this manner, the unification system may maintain a consistent look-and-feel for a user across different computing device type.
1. A computer-implemented method, comprising:
instantiating an editor graphical user interface (GUI) including a first view displaying a first GUI of either an application or a record page corresponding to a first device type and a second view displaying a second GUI of either the application or the record page corresponding to a second device type;
receiving an edit interaction with the first view modifying a first GUI component of the first GUI, the edit interaction comprising adjusting a visibility parameter for the first GUI component of the first GUI to designate whether the first GUI component is visible when a GUI of either the application or the record page is displayed at a device of the first device type; and
in response to the receiving on the first GUI, modifying the first GUI component of the first GUI and a corresponding GUI component of the second GUI, the modifying comprising, while continuing to display the first GUI component of the first GUI, marking the displayed first GUI component of the first GUI and the displayed corresponding GUI component of the second GUI in the second view with a visibility icon within the displayed first GUI component of the first GUI and within the displayed corresponding GUI component of the second GUI in the second view in response to the visibility parameter indicating that the first GUI component is designated as hidden and is not visible when the GUI of either the application or the record page is displayed at the device of the first device type,
wherein the visibility icon indicates that the first GUI component of the first GUI and the corresponding GUI component of the second GUI have adjusted visibility parameters and that visibility of the first GUI component of the first GUI on a device of the first device type differs from visibility of the corresponding GUI component of the second GUI on a device of the second device type.
2. The computer-implemented method of claim 1 , wherein the first device type is a desktop computing device and the second device type is a mobile computing device.
3. The computer-implemented method of claim 1 , wherein the first GUI and the second GUI depict a shared computing application.
4. The computer-implemented method of claim 1 , wherein the first GUI component of the first GUI is a record including a plurality of tabs.
5. The computer-implemented method of claim 1 , wherein the editor GUI includes a component panel including selectable GUI components to add to the first GUI or the second GUI.
6. A system, comprising:
a memory; and
at least one processor coupled to the memory and configured to:
instantiate an editor graphical user interface (GUI) including a first view displaying a first GUI of either an application or a record page corresponding to a first device type and a second view displaying a second GUI of either the application or the record page corresponding to a second device type;
receive an edit interaction with the first view modifying a first GUI component of the first GUI, the edit interaction comprising adjusting a visibility parameter for the first GUI component of the first GUI to designate whether the first GUI component is visible when a GUI of either the application or the record page is displayed at a device of the first device type; and
in response to the receiving on the first GUI, modify the first GUI component of the first GUI and a corresponding GUI component of the second GUI, the modifying comprising, while continuing to display the first GUI component of the first GUI, marking the displayed first GUI component of the first GUI and the displayed corresponding GUI component of the second GUI in the second view with a visibility icon within the displayed first GUI component of the first GUI and within the displayed corresponding GUI component of the second GUI in the second view in response to the visibility parameter indicating that the first GUI component is designated as hidden and is not visible when the GUI of either the application or the record page is displayed at the device of the first device type,
wherein the visibility icon indicates that the first GUI component of the first GUI and the corresponding GUI component of the second GUI have adjusted visibility parameters and that visibility of the first GUI component of the first GUI on a device of the first device type differs from visibility of the corresponding GUI component of the second GUI on a device of the second device type.
7. The system of claim 6 , wherein the first device type is a desktop computing device and the second device type is a mobile computing device.
8. The system of claim 6 , wherein the first GUI and the second GUI depict a shared computing application.
9. The system of claim 6 , wherein the first GUI component of the first GUI is a record including a plurality of tabs.
10. The system of claim 6 , wherein the editor GUI includes a component panel including selectable GUI components to add to the first GUI or the second GUI.
11. A non-transitory computer-readable device having instructions stored thereon that, when executed by at least one computing device, cause the at least one computing device to perform operations comprising:
instantiating an editor graphical user interface (GUI) including a first view displaying a first GUI of either an application or a record page corresponding to a first device type and a second view displaying a second GUI of either the application or the record page corresponding to a second device type;
receiving an edit interaction with the first view modifying a first GUI component of the first GUI, the edit interaction comprising adjusting a visibility parameter for the first GUI component of the first GUI to designate whether the first GUI component is visible when a GUI of either the application or the record page is displayed at a device of the first device type; and
in response to the receiving on the first GUI, modifying the first GUI component of the first GUI and a corresponding GUI component of the second GUI, the modifying comprising, while continuing to display the first GUI component of the first GUI, marking the displayed first GUI component of the first GUI and the displayed corresponding GUI component of the second GUI in the second view with a visibility icon within the displayed first GUI component of the first GUI and within the displayed corresponding GUI component of the second GUI in the second view in response to the visibility parameter indicating that the first GUI component is designated as hidden and is not visible when the GUI of either the application or the record page is displayed at the device of the first device type,
wherein the visibility icon indicates that the first GUI component of the first GUI and the corresponding GUI component of the second GUI have adjusted visibility parameters and that visibility of the first GUI component of the first GUI on a device of the first device type differs from visibility of the corresponding GUI component of the second GUI on a device of the second device type.
12. The non-transitory computer-readable device of claim 11 , wherein the first device type is a desktop computing device and the second device type is a mobile computing device.
13. The non-transitory computer-readable device of claim 11 , wherein the first GUI component of the first GUI is a record including a plurality of tabs.
14. The non-transitory computer-readable device of claim 11 , wherein the editor GUI includes a component panel including selectable GUI components to add to the first GUI or the second GUI.
15. The computer-implemented method of claim 1 , wherein the visibility parameter for the first GUI component of the first GUI is adjusted to show the first GUI component when a GUI of either the application or the record page is displayed at a device of the first device type and to hide the first GUI component when a GUI of either the application or the record page is displayed at a device of the second device type.
16. The system of claim 6 , wherein the visibility parameter for the first GUI component of the first GUI is adjusted to show the first GUI component when a GUI of either the application or the record page is displayed at a device of the first device type and to hide the first GUI component when a GUI of either the application or the record page is displayed at a device of the second device type.
17. The non-transitory computer-readable device of claim 11 , wherein the visibility parameter for the first GUI component of the first GUI is adjusted to show the first GUI component when a GUI of either the application or the record page is displayed at a device of the first device type and to hide the first GUI component when a GUI of either the application or the record page is displayed at a device of the second device type.
18. The computer-implemented method of claim 1 , wherein instantiating the editor GUI comprises:
retrieving a set of values sequentially assigned to a first plurality of GUI components based on locations of the first plurality of GUI components within the first GUI,
wherein the first plurality of GUI components includes the first GUI component,
wherein the first plurality of GUI components is in a first arrangement within the first GUI, and
wherein the set of values defines an order of the first plurality of GUI components within the first GUI; and
displaying, within the second GUI, a second plurality of GUI components corresponding to the first plurality of GUI components in a second arrangement based on the order defined by the set of values,
wherein the second plurality of GUI components includes the second GUI component.
19. The computer-implemented method of claim 18 , further comprising:
in response to a modification of a location of a third GUI component within the first GUI, updating the set of values to incorporate the modification of the location of the third GUI component, the updated set of values defining an updated order; and
arranging the second plurality of GUI components within the second GUI according to the updated order defined by the updated set of values.
20. The computer-implemented method of claim 1 , further comprising:
displaying, on the first GUI, an editor prompt comprising a drop-down menu including various screen sizes for displaying the first GUI component,
wherein the edit interaction comprises a selection from the drop-down menu.