US-12619402-B2 - Low-code / no-code layer for interactive application development

US12619402B2US 12619402 B2US12619402 B2US 12619402B2US-12619402-B2

Abstract

A system includes persistent storage containing predefined user interface (UI) component templates and a representation of a web page that includes a runtime UI component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime. The system also includes a processor configured to perform operations, including receiving, from a client device, a request for the web page, and determining, based on the request, that the web page includes the runtime UI component. The operations also include determining runtime parameter values associated with the request, and determining, based on the runtime parameter values and the predefined UI component templates, context-specific UI components to populate the empty portion of the web page. The operations further include generating a context-specific representation of the web page based on the context-specific UI components, and transmitting, to the client device, the context-specific representation.

Inventors

Gaurav Goyal
Chaitanya Saragadam
Mohammed Furqan
Pradeep Kumar Gouribhatla
Rahul Bharadwaj
Avishek Dalal

Assignees

SERVICENOW, INC.

Dates

Publication Date: 20260505
Application Date: 20240625

Claims (20)

1 . A method comprising: receiving, from a client device, a request for a web page, wherein the web page comprises a runtime user interface (UI) component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime; determining a runtime parameter value associated with the request, wherein the runtime parameter value represents a web page sequence of one or more web pages viewed using the client device prior to reception of the request for the web page; determining, based on the runtime parameter value and a plurality of UI component templates, one or more context-specific UI components to populate the empty portion of the web page reserved by the runtime UI component, wherein determining the one or more context-specific UI components comprises determining the one or more context-specific UI components based on the web page sequence, and wherein different web page sequences viewed using the client device prior to reception of the request for the web page cause determination of different context-specific UI components; generating a context-specific representation of the web page based on the one or more context-specific UI components; and transmitting, to the client device, a response comprising the context-specific representation of the web page.
2 . The method of claim 1 , wherein determining the one or more context-specific UI components based on the web page sequence comprises: determining, based on the web page sequence, one or more previously-viewed context-specific UI components that have been displayed using a previous instantiation of the runtime UI component as part of the one or more web pages; and determining the one or more context-specific UI components based on the one or more previously-viewed context-specific UI components.
3 . The method of claim 1 , wherein determining the one or more context-specific UI components comprises: obtaining metadata that defines a runtime behavior of the runtime UI component; selecting, from the plurality of UI component templates, one or more UI component templates that the metadata indicates correspond to the runtime parameter value; and updating one or more fields of the selected one or more UI component templates based on data responsive to the request.
4 . The method of claim 3 , wherein: the metadata comprises a mapping between a plurality of possible runtime parameter values and the plurality of UI component templates, and selecting the one or more UI component templates comprises selecting the one or more UI component templates based on the mapping indicating that the one or more UI component templates correspond to the runtime parameter value.
5 . The method of claim 3 , wherein the one or more context-specific UI components comprise a plurality of context-specific UI components, wherein the selected one or more UI component templates comprise a selected plurality of UI component templates, wherein the metadata indicates a plurality of possible hierarchies in which the plurality of UI component templates are to be arranged to populate the empty portion of the web page, and wherein determining the plurality of context-specific UI components comprises: generating, based on the metadata and the runtime parameter value, a representation of a runtime hierarchy of the selected plurality of UI component templates, wherein the context-specific representation of the web page comprises the plurality of context-specific UI components spatially arranged within the empty portion of the web page according to the runtime hierarchy.
6 . The method of claim 1 , wherein determining the one or more context-specific UI components comprises: providing (i) metadata associated with the runtime UI component and (ii) the runtime parameter value as input to a machine learning model that has been trained to generate content for context-specific UI components; and obtaining, from the machine learning model, a first content for at least one context-specific UI component of the one or more context-specific UI components.
7 . The method of claim 1 , wherein the web page further comprises a static UI component configured to populate a corresponding portion of the web page independently of the runtime parameter value.
8 . The method of claim 7 , further comprising: generating a partial representation of the web page, wherein the partial representation comprises (i) the static UI component and (ii) the empty portion reserved by the runtime UI component; and before determining the one or more context-specific UI components, transmitting, to the client device, a partial response comprising the partial representation of the web page, wherein reception of the partial response is configured to cause the client device to display a partial rendering of the web page comprising the static UI component and the empty portion, and wherein reception of the response comprising the context-specific representation of the web page is configured to cause the client device to display a complete rendering of the web page that includes the empty portion replaced by the one or more context-specific UI components.
9 . The method of claim 1 , wherein determining the one or more context-specific UI components comprises: executing a script contained in a respective context-specific UI component of the one or more context-specific UI components, wherein execution of the script is configured to obtain context-specific data that corresponds to the runtime parameter value and is responsive to the request, and wherein the context-specific representation of the web page is generated based on the context-specific data.
10 . The method of claim 1 , wherein determining the one or more context-specific UI components comprises: executing a script contained in a respective context-specific UI component of the one or more context-specific UI components, wherein execution of the script is configured to modify, based on the runtime parameter value, one or more properties of a corresponding UI component template on which the respective context-specific UI component is based, and wherein the context-specific representation of the web page is generated based on the one or more properties as modified by the execution of the script.
11 . The method of claim 1 , further comprising: determining, based on the request, that the web page comprises the runtime UI component, wherein the runtime parameter value is determined based on determining that the web page comprises the runtime UI component.
12 . The method of claim 1 , wherein: the web page comprises a plurality of instantiations of the runtime UI component; each respective instantiation of the runtime UI component of the plurality of instantiations is configured to reserve a corresponding empty portion of the web page to be populated by corresponding UI components generated at runtime; and determining the one or more context-specific UI components comprises determining, for each respective instantiation of the runtime UI component of the plurality of instantiations and based on the runtime parameter value, corresponding one or more context-specific UI components to populate the corresponding empty portion of the web page.
13 . The method of claim 1 , wherein the runtime parameter value comprises one or more of: (i) a parameter value associated with a user of the client device, (ii) a parameter value associated with the client device, or (iii) a parameter value associated with a server device that received the request for the web page.
14 . The method of claim 1 , wherein generating the context-specific representation of the web page comprises: determining an area occupied by the one or more context-specific UI components; and adjusting a size of the empty portion of the web page based on the area to fit the one or more context-specific UI components.
15 . The method of claim 1 , wherein the runtime UI component is generated by a process comprising: selecting, from the plurality of UI component templates, a particular UI component template; displaying a visual representation of modifiable values of metadata that defines the particular UI component template; and receiving a modification of one or more of the modifiable values of the metadata.
16 . The method of claim 15 , wherein receiving the modification comprises: receiving a definition of a condition under which the particular UI component template is to be included in the empty portion of the web page, wherein the condition identifies a particular runtime parameter value that triggers inclusion of the particular UI component template in the empty portion of the web page.
17 . A system comprising a processor configured to perform operations comprising: receiving, from a client device, a request for a web page, wherein the web page comprises a runtime user interface (UI) component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime; determining a runtime parameter value associated with the request, wherein the runtime parameter value represents a web page sequence of one or more web pages viewed using the client device prior to reception of the request for the web page; determining, based on the runtime parameter value and a plurality of UI component templates, one or more context-specific UI components to populate the empty portion of the web page reserved by the runtime UI component, wherein determining the one or more context-specific UI components comprises determining the one or more context-specific UI components based on the web page sequence, and wherein different web page sequences viewed using the client device prior to reception of the request for the web page cause determination of different context-specific UI components; generating a context-specific representation of the web page based on the one or more context-specific UI components; and transmitting, to the client device, a response comprising the context-specific representation of the web page.
18 . The system of claim 17 , wherein determining the one or more context-specific UI components based on the web page sequence comprises: determining, based on the web page sequence, one or more previously-viewed context-specific UI components that have been displayed using a previous instantiation of the runtime UI component as part of the one or more web pages; and determining the one or more context-specific UI components based on the one or more previously-viewed context-specific UI components.
19 . The system of claim 17 , wherein determining the one or more context-specific UI components comprises: obtaining metadata that defines a runtime behavior of the runtime UI component; selecting, from the plurality of UI component templates, one or more UI component templates that the metadata indicates correspond to the runtime parameter value; and updating one or more fields of the selected one or more UI component templates based on data responsive to the request.
20 . An article of manufacture including a non-transitory computer-readable medium, having stored thereon program instructions that, upon execution by a computing system, cause the computing system to perform operations comprising: receiving, from a client device, a request for a web page, wherein the web page comprises a runtime user interface (UI) component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime; determining a runtime parameter value associated with the request, wherein the runtime parameter value represents a web page sequence of one or more web pages viewed using the client device prior to reception of the request for the web page; determining, based on the runtime parameter value and a plurality of UI component templates, one or more context-specific UI components to populate the empty portion of the web page reserved by the runtime UI component, wherein determining the one or more context-specific UI components comprises determining the one or more context-specific UI components based on the web page sequence, and wherein different web page sequences viewed using the client device prior to reception of the request for the web page cause determination of different context-specific UI components; generating a context-specific representation of the web page based on the one or more context-specific UI components; and transmitting, to the client device, a response comprising the context-specific representation of the web page.

Description

CROSS-REFERENCE TO RELATED APPLICATIONS This application is a continuation of and claims priority to U.S. patent application Ser. No. 17/878,642, filed Aug. 1, 2022, issued as U.S. Pat. No. 12,056,473, and titled “Low-Code/No-Code Layer for Interactive Application Development,” which is hereby incorporated by reference as if fully set forth in this description. BACKGROUND Developing a web page may involve familiarity and/or experience with using hypertext markup language (HTML), JAVASCRIPT®, and/or other web development technologies. Thus, individuals unfamiliar with such technologies might be unable to develop web pages without first learning to use the requisite programming languages and associated development systems. Additionally, even for individuals familiar with such technologies, the web page development process may take a significant amount of time, especially when a different web page is developed from scratch for each new use case. Further, web pages developed by different programmers may lack consistency (e.g., visually and/or behaviorally) with one another, thus creating inconsistent user experiences within groups of related web pages. SUMMARY Development of a web page may be facilitated by including, in the web page, a runtime UI component that adds dynamic runtime behavior to the web page. The runtime UI component may reserve an empty portion of the web page to be populated by UI components generated at runtime. While static UI components of the web page may remain the same or similar across different requests for the web page, the UI components generated to populate the empty portion of the web page may be context-specific and may thus vary across the different requests for the web page. These context-specific UI components may be generated based on parameter values associated with a specific request for the web page. The parameter values may identify attributes of a user requesting the web page (resulting in user-specific UI components), attributes of a client device requesting the web page (resulting in device-specific UI components), and/or attributes of a server generating the web page (resulting in server-specific UI components). Runtime behavior of the runtime UI component may be defined by configuring modifiable portions of metadata that defines the runtime UI component. The modifiable portions of the metadata may be configurable using a runtime UI component editor that (i) displays and allows for editing of the modifiable portions of the metadata and (ii) hides and prevents editing of non-modifiable portions of the metadata. Thus, the runtime UI component editor may allow users to experiment with different behaviors of the runtime UI component without concern for misconfiguring and/or breaking the web page. The runtime UI component may be reused across different web pages, either with the same metadata (resulting in the same or similar runtime behavior across different web pages) or different metadata (resulting in page-specific runtime behavior). The runtime UI component editor may allow UI component templates to be used to define different possible combinations of context-specific UI components, hierarchies thereof, and/or behaviors thereof, each of which may depend on specific parameter values present at runtime. Specifically, a plurality of different UI component templates may be added to the runtime UI component, and each of these UI component templates may be associated with corresponding modifiable and non-modifiable metadata portions. Each respective UI component template may be defined as a parent, child, and/or sibling of other UI component templates. Additionally, the runtime appearance, runtime content, runtime behavior, and/or other runtime aspects of each respective UI component template may be conditioned on one or more runtime parameter values. Accordingly, a first example embodiment may involve a system that includes persistent storage containing (i) a plurality of predefined UI component templates and (ii) a representation of a web page that comprises a runtime UI component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime. The system may also include one or more processors configured to perform operations. The operations may include receiving, from a client device, a request for the web page, and determining, based on the request, that the web page comprises the runtime UI component. The operations may also include, based on determining that the web page comprises the runtime UI component, determining a plurality of runtime parameter values associated with the request. The operations may additionally include determining, based on the plurality of runtime parameter values and the plurality of predefined UI component templates, one or more context-specific UI components to populate the empty portion of the web page reserved by the runtime UI component. The operations may further include generating a context-s