Page orchestration method and apparatus, and medium and device

Abstract

Provided in the embodiments of the present disclosure are a page orchestration method and apparatus, and a medium and a device. A server of a low-code platform defines data and a first function, wherein the first function is used for updating the data. A specific embodiment of the page orchestration method comprises: on the basis of a UI module that is selected by a user and is used for constructing a target page, displaying a configuration interface for the UI module; and sending to a server a relationship association request inputted by the user by means of the configuration interface for the UI module, such that the server establishes and stores association relationships on the basis of the relationship association request, wherein the association relationships comprise a first association relationship between data and a first attribute of a first UI module of the target page, and a second association relationship between a first function and an event of a second UI module of the target page, the second association relationship is used for instructing the execution of the first function when the user triggers the event by means of the second UI module, so as to update the data, and the first association relationship is used for instructing the updating of the first attribute of the first UI module after the data is updated.

Description

Page layout methods, devices, media and equipment

[0001] This application claims priority to Chinese Patent Application No. 202410666585.4, filed on May 27, 2024, the disclosure of which is incorporated herein by reference in its entirety. Technical Field

[0002] This disclosure relates to a page layout method, apparatus, medium, and device. Background Technology

[0003] Low-code platforms are development platforms that use a graphical interface to allow developers to create applications through simple drag-and-drop and selection operations, eliminating the need for tedious programming. In recent years, low-code platforms have gained widespread use, leading to the emergence of various building platforms. For example, developers can easily build pages visually using these platforms, significantly lowering the barrier to entry and simplifying the page development process. In practical applications, developers can often build static page layouts quite well using low-code platforms. However, to fully implement a page according to business requirements, issues such as data control and business logic orchestration still need to be addressed. Summary of the Invention

[0004] The embodiments of this disclosure describe a page arrangement method and apparatus that can realize data control, business logic arrangement, etc. in page generation, thereby simplifying the page generation process and improving page generation efficiency.

[0005] According to the first aspect, a page arrangement method is provided, executed by a client of the aforementioned low-code platform. The server of the low-code platform predefines data and a first function, the first function being used to update the data. The method includes: displaying a configuration interface for the UI module based on a user-selected UI module used to construct the target page; sending a relationship association request input by the user through the UI module's configuration interface to the server, so that the server can establish and store various association relationships based on the relationship association request, wherein the association relationship includes a first association relationship between the data and a first attribute of a first UI module of the target page, and a second association relationship between the first function and an event of a second UI module of the target page; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data has been updated.

[0006] In one embodiment, the target page operates by: receiving operation information from a user using the target page regarding the second UI module; generating the event based on the operation information; in response to the generation of the event, executing the first function according to the second association relationship and updating the data; and in response to the update of the data, updating the first attribute of the first UI module according to the first association relationship. Through this implementation, business logic processing, data control, and other functionalities are achieved during the operation of the target page.

[0007] In one embodiment, displaying a configuration interface for a UI component selected by the user for constructing a target page includes: displaying a first configuration interface for a first UI module selected by the user for constructing the target page, wherein the first configuration interface is used to configure a first attribute of the first UI module; and sending a relationship association request input by the user through the configuration interface of the UI module to the server includes: receiving first reference relationship information for the first attribute of the first UI module input by the user through the first configuration interface, wherein the first reference relationship information includes a reference identifier and an identifier of the data; and sending a first relationship association request to the server based on the first reference relationship information, so that the server can establish and store a first association relationship between the data and the first attribute of the first UI module based on the first relationship association request. Thus, the user can input first reference relationship information through the first configuration interface corresponding to the first UI module, and the server can establish a first association relationship between the data and the first attribute of the first UI module based on the first reference relationship information.

[0008] In one embodiment, the server-side of the low-code platform further predefines a second function, which is used to obtain the latest updated data and perform calculations. Furthermore, the association relationships established and stored by the server-side include a third association relationship between the second function and the second attribute of the third UI module of the target page. This third association relationship is used to update the second attribute of the third UI module based on the execution result of the second function. Therefore, the attributes of the UI module can be updated by executing the second function after the data is updated.

[0009] In one embodiment, the first UI module includes a display UI module, the first attribute of the display UI module includes a display attribute, and the first association is used to instruct the display UI module to retrieve and display the latest updated value of the data when it is displayed on the target page. Thus, the display UI module can display the latest updated data.

[0010] In one embodiment, the second UI module includes a button UI module, and the events of the second UI module include click events. The second association is used to instruct the execution of the first function to update the data in response to a click event generated when a user clicks the button UI module on the target page. Thus, the first function can be executed when the button UI module is clicked.

[0011] In one embodiment, the third UI module includes a button UI module, the second attribute of the button UI module includes a disabled attribute, the second function is used to compare the data with a preset value, and determine whether to disable the button UI module based on the comparison result; the third association is used to update the disabled attribute of the button UI module according to the execution result of the second function. Therefore, the second function can be used to determine whether the button UI module is disabled.

[0012] According to the second aspect, a page arrangement method is provided, executed by a server corresponding to the aforementioned low-code platform. The server predefines data and a first function, the first function being used to update the data. The method includes: receiving a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; establishing and storing a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.

[0013] According to a third aspect, a page arrangement apparatus is provided, deployed on a client of the aforementioned low-code platform. The server of the low-code platform predefines data and a first function, the first function being used to update the data. The apparatus includes: a display unit configured to display a configuration interface for a UI module selected by the user for constructing a target page; and a sending unit configured to send a relationship association request input by the user through the configuration interface of the UI module to the server, so that the server can establish and store various relationships based on the relationship association request. The relationships include a first association between the data and a first attribute of a first UI module of the target page, and a second association between the first function and an event of a second UI module of the target page. The second association is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; the first association is used to instruct the updating of the first attribute of the first UI module after the data has been updated.

[0014] According to the fourth aspect, a page arrangement apparatus is provided, deployed on a server corresponding to the aforementioned low-code platform. The server predefines data and a first function, the first function being used to update the data. The apparatus includes: a receiving unit configured to receive a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; and a storage unit configured to establish and store a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data has been updated.

[0015] According to a fifth aspect, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the method described in any one of the first or second aspects.

[0016] According to a sixth aspect, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed in a computer, causes the computer to perform the method described in either the first or second aspect.

[0017] According to a seventh aspect, an electronic device is provided, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method described in either the first aspect or the second aspect. Attached Figure Description

[0018] Figure 1 illustrates a schematic diagram of an application scenario in which the embodiments of this disclosure can be applied;

[0019] Figure 2 shows a flowchart of a page layout method according to one embodiment;

[0020] Figure 3 illustrates a diagram of calling data and functions through a global interface set;

[0021] Figure 4 illustrates a user inputting reference relationship information through the configuration interface;

[0022] Figure 5 shows a flowchart of a page layout method according to yet another embodiment;

[0023] Figure 6 shows a schematic block diagram of a page layout apparatus according to one embodiment;

[0024] Figure 7 shows a schematic block diagram of a page layout apparatus according to yet another embodiment; and

[0025] Figure 8 shows a schematic diagram of the structure of an electronic device suitable for implementing embodiments of the present disclosure. Detailed Implementation

[0026] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0027] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0028] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0029] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0030] The technical solutions provided in this disclosure will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the relevant invention and not intended to limit the invention. Furthermore, it should be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. It should be noted that, unless otherwise specified, the embodiments and features described in these embodiments can be combined with each other.

[0031] As mentioned earlier, page generation is not limited to building a static page layout. To fully realize a page development according to business needs, issues such as data control and business logic orchestration also need to be addressed.

[0032] Therefore, this disclosure provides a page arrangement method that can realize data control, business logic arrangement, etc. in the generated page. Figure 1 shows a schematic diagram of an application scenario in which this disclosure embodiment can be applied. As shown in Figure 1, the server 101 of the low-code platform predefines data (Data) and a first function (Method). The first function (Method) can perform business logic arrangement to update the value of data (Data). Users can select UI (User Interface) modules for building the target page through the client 102 of the low-code platform. The client 102 can display a configuration interface for the UI module selected by the user, so that the user can configure the selected UI module in the configuration interface. Afterwards, the client 102 can send the relationship association request entered by the user through the configuration interface of the UI module to the server 101, so that the server 101 can establish and store various relationships according to the relationship information. In this example, the UI modules of the target page selected by the user may include a display UI module and a button UI module for displaying information. The association can include a first association between data (Data) and the display attributes of the UI module, and a second association between a first function (Method) and the click event of the button UI module. Therefore, when a user on the target page triggers a click operation through the button UI module on the target page, the first function (Method) can be executed according to the second association. The first function (Method) can perform business logic processing to update the value of data (Data). In response to the update of data (Data), the display attributes of the UI module can be updated according to the first association; that is, the data (Data) displayed by the UI module on the target page can be updated.

[0033] Referring again to Figure 2, which illustrates a flowchart of a page arrangement method according to one embodiment, this method can be executed by a client on a low-code platform. As shown in Figure 2, the page arrangement method may include the following steps 201 and 202, specifically:

[0034] Step 201: Based on the UI module selected by the user for building the target page, display the configuration interface for the UI module.

[0035] In this embodiment, "user" refers to a developer who develops pages through a low-code platform. Typically, a low-code platform can include a client and a server. The client is the part where the user directly interacts with the low-code platform, including the user interface. The server provides backend services to the client. The server can predefine data (Data) and a first function. For example, the user can predefine data (Data) and the first function through the client, which are then stored by the server. Here, data (Data) can be used to express the data state of the application to which the page belongs, such as rendering data, interaction state, application configuration, business data, etc. Data (Data) can have responsive characteristics, meaning that when data (Data) changes, the state of UI modules associated with it will be updated. The first function can also be called a Method, which can orchestrate business logic to update the value of data (Data). Furthermore, the first function can also retrieve remote data via HTTP requests. Additionally, the server of the low-code platform can predefine a second function, which can be used to retrieve the latest updated data for computation. In this example, the second function can also be called Computed. As an example, the computation in the second function can refer to various pre-defined computational logics.

[0036] As an example, predefined Data, Computed, and Method attributes can be called directly, or the interfaces corresponding to Data, Computed, and Method can be centralized into a global interface set before being called. For instance, first, a reference relationship is created for each Data, Computed, and Method attribute. This reference relationship can include the correspondence between the interface corresponding to the data (or function) and the identifier of that data (or function). These reference relationships are then stored in a global interface set for the UI module to call. Figure 3 illustrates this process of calling data and functions through a global interface set. In this example, predefined Data attributes could include 100Data, 101Data, 102Data, 103Data, etc.; predefined Computed attributes could include 200Computed, 201Computed, etc.; and predefined Method attributes could include 300Method, 301Method, etc.

[0037] Users can select UI modules for building target pages through the low-code platform's client. These UI modules can refer to HTML UI components, such as buttons, input fields, text boxes, dropdown menus, radio buttons, checkboxes, etc. As an example, the client's user interface can display various UI modules. Users can select these modules by dragging, clicking, or double-clicking. The selected UI modules are then displayed in a preset page layout area. Users can then select UI modules again in the layout area for configuration. The client can then display a configuration interface for the selected UI module. Through this interface, users can configure various information about the UI module, such as its properties and events. UI module properties can include various attributes, such as display attributes, copyability, links, and text styles.

[0038] Step 202: Send the relationship association request entered by the user through the configuration interface of the UI module to the server so that the server can establish and store each relationship according to the relationship association request.

[0039] In this embodiment, users can configure various information about the UI module through its configuration interface. For example, predefined data and functions can be configured for the UI module's attributes and events. Here, the configurations related to the predefined data and functions can be presented as relationship association requests. The client can then send the user-input relationship association requests to the server, allowing the server to establish and store the various relationships based on these requests.

[0040] Here, the association can include a first association between data and a first attribute of a first UI module of the target page, and a second association between a first function and an event of a second UI module of the target page. The second association can be used to instruct the execution of the first function to update the data when a user of the target page triggers an event through the second UI module. The first association can be used to instruct the updating of the first attribute of the first UI module after the data has been updated.

[0041] In some implementations, different UI modules can correspond to different configuration interfaces. Step 201 above can specifically include the following: based on the first UI module selected by the user for constructing the target page, displaying a first configuration interface for the first UI module, which can be used to configure the first attribute of the first UI module. Based on this, step 202 above can include steps 1) and 2), specifically:

[0042] Step 1) Receive the first reference relationship information of the first attribute of the first UI module, which is input by the user through the first configuration interface.

[0043] In this implementation, the first reference relationship information may include a reference identifier and a data identifier. The reference identifier can be used to indicate a reference to predefined data or a function, and the data identifier can be used to uniquely identify the data. In this example, the first reference relationship information may indicate that the first property of the first UI module references predefined data. As an example, the reference identifier can be represented using various symbols, such as {{}}, #, [[]], etc. Taking the predefined data identifier as Data and the reference identifier as {{}} as an example, the first reference relationship information can be represented as {{Data}}.

[0044] Figure 4 illustrates a user inputting reference information through a configuration interface. In the example shown in Figure 4, the target page is a music playback page, and the currently playing song is "xxx" sung by Zhang San. The target page also includes a text box 401, which is used to display lyrics. After the user selects the text box 401, a configuration interface 402 for the text box 401 can be displayed. The configuration interface 402 can be used to configure various attributes of the text box 401. In this example, configurable attributes may include text display, whether it is copyable, links, icons, code, various text styles, whether it is hidden, etc. In this example, assuming the reference identifier is {{}}, and data.11 is the predefined lyrics corresponding to "xxx", for example, the user can predefine data.11 through the client, and then the server will store it. Taking text display as an example, by entering {{data.11}} in the corresponding area 4021, {{data.11}} becomes a reference relationship for the input in text box 401. This reference relationship information can be used to establish the association between data.11 and the text display attributes of text box 401. Therefore, when displayed on the target page, lyrics can be displayed in text box 401.

[0045] Step 2) Based on the first reference relationship information, send a first relationship association request to the server so that the server can establish and store the first association relationship between the data and the first attribute of the first UI module according to the first relationship association request.

[0046] Therefore, users can input first reference relationship information through the first configuration interface corresponding to the first UI module, and the server can establish a first association relationship between the data and the first attribute of the first UI module based on the first reference relationship information.

[0047] Furthermore, for the second UI module used to build the target page, the low-code platform client can display a second configuration interface for the second UI module selected by the user. This second configuration interface can be used to configure predetermined events for the second UI module. Then, the client can receive second reference relationship information for the predetermined events of the second UI module, input by the user through the second configuration interface. This second reference relationship information may include a reference identifier and an identifier for a first function. The reference identifier can be used to indicate a reference to predefined data or a function, and the identifier for the first function can be used to uniquely identify the first function. In this example, the second reference relationship information can indicate that the predetermined events of the second UI module reference a predefined first function. Then, the client can send a second relationship association request to the server based on the second reference relationship information, so that the server can establish and store the second association relationship between the first function and the predetermined events of the second UI module based on the second relationship association request.

[0048] In some implementations, the server-side of the aforementioned low-code platform can also predefine a second function, which can be used to retrieve the latest updated data and perform calculations. In this example, the second function can also be called `Computed`. As an example, the calculations in the second function can refer to various pre-defined computational logics. Based on this, the association relationships established and stored by the server according to the relational association request can also include a third association relationship between the second function and the second attribute of the third UI module of the target page. The third association relationship can be used to update the second attribute of the third UI module according to the execution result of the second function. Thus, after the data is updated, the attributes of the UI module can be updated by executing the second function.

[0049] In some implementations, the first UI module may include a display UI module. Here, a display UI module can refer to various UI modules capable of displaying information, such as labels, text boxes, text areas, buttons, etc. The first attribute of the display UI module may include a display attribute, which can refer to attributes that display information. In this case, the first association is used to instruct the displayer to retrieve and display the latest updated value of the data when the aforementioned display UI module is displayed on the target page.

[0050] In some implementations, the second UI module may include a button UI module, and the events of the second UI module may include click events, such as single-click events, double-click events, etc. In this case, the second association can be used to instruct the execution of the first function to update the data in response to a click event generated when the user clicks the button UI module on the target page.

[0051] In some implementations, the third UI module may include the button UI module. It's understood that the first, second, and third UI modules can be the same module or different modules; this is not limited here. The second attribute of the button UI module may include a disable attribute, which indicates whether the button UI module is disabled. The second function can be used to compare data with preset values ​​and determine whether to disable the button UI module based on the comparison result. In this case, the third association can be used to update the disable attribute of the button UI module according to the execution result of the second function.

[0052] For example, suppose you want to create an application on a target page that can accumulate numbers. This application can include a text box UI module and a button UI module. The text box UI module can be used to display the accumulated result, and the button UI module can be clicked by the user. Each time the user clicks the button, the number in the text box increases by 1, until the accumulated result equals a predetermined value, at which point the button is disabled.

[0053] To implement this application on the target page, you can predefine a data set named `Data`, a first function, and a second function. In this example, the data set `Data` can be named `count`, and its initial value is 0. The first function can be named `onAdd`, and its content can be `count.setValue(count+1)`, where `count.setValue(count+1)` updates the value of `count` to `count+1`. The second function can be named `disabled`, and its content can be `return count>=2`, where `return count>=2` returns a boolean value (true or false), indicating whether the variable `count` is greater than or equal to 2.

[0054] To facilitate invocation, during the target page creation phase, a reference relationship can be created for the predefined data (Data), the first function, and the second function. These reference relationships can be stored in a global interface collection. This global interface collection can be used to manage predefined data and functions, so that they can be invoked after being associated with UI module properties or events. Then, the following three association relationships (a), b), and c) are established, specifically:

[0055] a) For the display properties of the text box UI module, enter {{count}} to establish the association between count and the display properties of the text box UI module.

[0056] b) For click events of the button UI module, such as the onClick event, establish the association between onAdd and the click event of the button UI module.

[0057] c) For the disabled attribute of the button UI module, enter {{disabled}} to establish the association between disabled and the disabled attribute of the button UI module.

[0058] During the operation phase of the target page, users can operate the target page through the following steps (1)-(6):

[0059] Step (1): The user clicks the button UI module, triggering the button UI module's click event. Based on the pre-established association between onAdd and the button UI module's click event, onAdd can be executed, and the content of onAdd is count.setValue(count+1). Since the current count is 0, count+1=1, and the execution result is count.setValue(1). In response to the execution result of onAdd, the following operations a, b, and c are executed:

[0060] a. Based on the execution result of onAdd, update the data count to 1;

[0061] b. After the data count is updated, the disabled function is executed. The disabled function can obtain the latest updated count for calculation. The content of the disabled function is return count>=2. Therefore, the result of the update disabled function is false.

[0062] c. After the data count is updated, update the display properties of the text box UI module according to the pre-established association between count and the display properties of the text box UI module.

[0063] In step (2), after the text box UI module is updated, the display property will reread count, so the content displayed by the text box UI module is 1.

[0064] Step (3): After the button UI module is updated, the disabled attribute of the button UI module will reread the calculation result of the disabled function. At this time, the calculation result of disabled is false, so the button UI module is not disabled.

[0065] In step (4), the user clicks the button UI module again, triggering the button UI module's click event, which executes onAdd. The content of onAdd is count.setValue(count+1). At this time, count is 1, therefore, count+1=2, and the execution result is count.setValue(2). In response to the execution result of onAdd, the following operations a, b, and c are executed:

[0066] a. Based on the execution result of onAdd, update the data count to 2.

[0067] b. After the data count is updated, the disabled function is executed. The content of the disabled function is return count>=2, thus updating the result of the disabled operation to true.

[0068] c. After the data count is updated, update the text box UI module.

[0069] In step (5), after the text box UI module is updated, the display property will reread count, so the content displayed by the text box UI module is 2.

[0070] In step (6), after the button UI module is updated, the disabled attribute of the button UI module will reread the calculation result of the disabled function. At this time, the calculation result of the disabled function is true, so the button UI module is disabled and cannot be clicked.

[0071] In some implementations, the target page constructed based on the method shown in Figure 2 can be run through the following steps S1-S4, specifically:

[0072] Step S1: Receive operation information from the user using the target page regarding the second UI module.

[0073] In this implementation, the target page constructed based on the method shown in Figure 2 may include a first UI module and a second UI module. Users of the target page can interact with the second UI module on the target page to obtain operation information.

[0074] Step S2: Generate an event based on the operation information.

[0075] In this implementation, events for the second UI module can be generated based on the user's operation information on the second UI module on the target page.

[0076] Step S3: In response to the generation of the event, execute the first function according to the second association relationship to update the data.

[0077] In this implementation, the second association is the association between the first function and the events of the second UI module of the target page. Therefore, when generating events based on operation information, the first function can be executed according to the second association to update the data.

[0078] Step S4: In response to the data update, update the first attribute of the first UI module according to the first association relationship.

[0079] In this implementation, the first association relationship is the association between data and the first attribute of the first UI module of the target page. Therefore, when updating data in step S3, the first attribute of the first UI module of the target page can be updated according to the first association relationship. This implementation achieves business logic processing, data control, and more during the operation of the target page. For example, taking a text box as the first UI module, a display attribute as the first attribute of the first UI module, a button as the second UI module, a click event as the event of the second UI module, and a click operation as the operation information for the button, a user can click the button on the target page. Then, based on the operation information of the user's click operation on the button, a click event for the button is generated. After the click event for the button is generated, the first function is executed according to the association relationship between the first function in the second association relationship and the button's click event, updating the data. After the data is updated, the data displayed in the text box can be updated according to the association relationship between the data and the display attribute of the text box in the first association relationship to display the latest data.

[0080] Reviewing the above process, in the embodiments disclosed herein, the server corresponding to the low-code platform can predefine data and a first function, which can be used to update the data. The client corresponding to the low-code platform can display a configuration interface for the UI module selected by the user for building the target page. Then, the client can send the relationship association request entered by the user through the configuration interface of the UI module to the server, so that the server can establish and store each relationship according to the relationship association request. Here, the relationship can include a first relationship between data and a first attribute of a first UI module of the target page, and a second relationship between the first function and an event of a second UI module of the target page. In this way, when a user of the target page triggers an event through the second UI module, the first function can be executed according to the second relationship to update the data. In response to the data update, the first attribute of the first UI module can be updated according to the first relationship. Thus, by predefining data and functions and establishing relationships, data control, business logic orchestration, etc., in the target page can be realized, thereby simplifying the page generation process and improving page generation efficiency.

[0081] Referring again to Figure 5, Figure 5 shows a flowchart of a page arrangement method according to yet another embodiment. This method can be executed via a server-side application corresponding to a low-code platform. As shown in Figure 5, this page arrangement method may include the following steps 501 and 502, specifically:

[0082] Step 501: Receive relationship association requests sent by the client through the configuration interface of the UI module.

[0083] In this embodiment, the low-code platform may include a client and a server. The client is the part where the user directly interacts with the low-code platform, including the user interface. The server can provide backend services to the client. The server may predefine data (Data) and a first function. The user can select a UI module for building a target page through the client of the low-code platform. The client can display a configuration interface for the selected UI module. The user can configure various information of the UI module through the configuration interface. For example, predefined data, functions, etc., can be configured for the UI module's attributes and events. Here, the configuration related to the predefined data and functions can be used as a relationship association request. Then, the client can send the relationship association request input by the user to the server. Here, the relationship association request may include a first request for associating data with a first attribute of the first UI module, and a second request for associating the first function with an event of the second UI module.

[0084] Step 502: Establish and store the first association and the second association based on the first request and the second request.

[0085] In this embodiment, the server can establish a first association between data (Data) and a first attribute of a first UI module on the target page based on a first request, and establish a second association between a first function and an event of a second UI module on the target page based on a second request. Therefore, the second association can be used to instruct the execution of the first function to update the data when a user triggers an event through the second UI module on the target page. The first association can be used to instruct the updating of the first attribute of the first UI module after the data has been updated. Specifically, since the second association records the association between the first function and a target event of the second UI module on the target page, this second association can specifically include: calling the first function when it is determined that the target event has occurred. The first association also records the association between data (Data) and a first attribute of the first UI module on the target page, and this first association can specifically include: changing the first attribute when it is determined that Data meets a preset condition. Therefore, when a user triggers an event through the second UI module on the target page, the first function can be called and executed according to the second association, and the execution of the first function can update the data. After the data is updated, the first attribute of the first UI module can be updated according to the first association.

[0086] In some implementations, the target page constructed based on the method shown in Figure 5 can be run in the following ways:

[0087] First, receive operation information from the user using the target page regarding the second UI module.

[0088] Secondly, events are generated based on the operation information.

[0089] Then, in response to the generation of the event, the first function is executed according to the second association to update the data.

[0090] Finally, in response to data updates, the first property of the first UI module is updated based on the first association.

[0091] In some implementations, the server-side of the low-code platform can predefine a second function, which can be used to perform operations on data. The relationship association request can also include a third request to associate the second function with a second attribute of a third UI module. Furthermore, the page arrangement method described above can also include: establishing and storing a third association based on the third request. For example, a third association between the second function and a second attribute of a third UI module of the target page can be established based on the third request. This third association can be used to update the second attribute of the third UI module according to the execution result of the second function.

[0092] According to another embodiment, a page orchestration apparatus is provided. This page orchestration apparatus can be deployed on a client side of a low-code platform. The server side of the low-code platform predefines data and a first function, the first function being used to update the data.

[0093] Figure 6 shows a schematic block diagram of a page arrangement apparatus according to one embodiment. The apparatus shown in Figure 6 is used to perform the method shown in Figure 2. As shown in Figure 6, the page arrangement apparatus 600 includes: a display unit 601 configured to display a configuration interface for a UI module selected by a user for constructing a target page; and a sending unit 602 configured to send a relationship association request input by the user through the configuration interface of the UI module to a server, so that the server can establish and store various association relationships according to the relationship association request, wherein the association relationship includes a first association relationship between the data and a first attribute of a first UI module of the target page, and a second association relationship between the first function and an event of a second UI module of the target page; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.

[0094] In some optional implementations of this embodiment, the target page operates in the following manner: receiving operation information of the user using the target page on the second UI module; generating the event based on the operation information; in response to the generation of the event, executing the first function according to the second association relationship and updating the data; and in response to the update of the data, updating the first attribute of the first UI module according to the first association relationship.

[0095] In some optional implementations of this embodiment, the display unit 601 is further configured to: display a first configuration interface for the first UI module selected by the user for constructing the target page, wherein the first configuration interface is used to configure the first attribute of the first UI module; the sending unit 602 is further configured to: receive first reference relationship information for the first attribute of the first UI module input by the user through the first configuration interface, wherein the first reference relationship information includes a reference identifier and an identifier of the data; and send a first relationship association request to the server according to the first reference relationship information, so that the server can establish and store the first association relationship between the data and the first attribute of the first UI module according to the first relationship association request.

[0096] In some optional implementations of this embodiment, the server of the low-code platform further predefines a second function, which is used to obtain the latest updated data and perform calculations; and the association relationship established and stored by the server also includes: a third association relationship between the second function and the second attribute of the third UI module of the target page; the third association relationship is used to update the second attribute of the third UI module according to the execution result of the second function.

[0097] In some optional implementations of this embodiment, the first UI module includes a display UI module, the first attribute of the display UI module includes a display attribute, and the first association is used to indicate that the latest updated value of the data is obtained and displayed when the display UI module is displayed on the target page.

[0098] In some optional implementations of this embodiment, the second UI module includes a button UI module, the events of the second UI module include click events, and the second association is used to instruct the execution of the first function to update the data in response to a click event generated when the user clicks the button UI module on the target page.

[0099] In some optional implementations of this embodiment, the third UI module includes a button UI module, the second attribute of the button UI module includes a disabled attribute, the second function is used to compare the data with a preset value and determine whether to disable the button UI module based on the comparison result; the third association is used to update the disabled attribute of the button UI module according to the execution result of the second function.

[0100] The above-described apparatus embodiments correspond to the method embodiments, and detailed descriptions can be found in the description of the method embodiments section, which will not be repeated here. The apparatus embodiments are derived based on the corresponding method embodiments and have the same technical effects as the corresponding method embodiments; detailed descriptions can be found in the corresponding method embodiments.

[0101] According to another embodiment, yet another page orchestration apparatus is provided. This page orchestration apparatus can be deployed on a server-side low-code platform. The server-side predefines data and a first function, the first function being used to update the data.

[0102] Figure 7 shows a schematic block diagram of a page arrangement apparatus according to yet another embodiment. The apparatus shown in Figure 7 is used to perform the method shown in Figure 5. As shown in Figure 7, the page arrangement apparatus 700 includes: a receiving unit 701 configured to receive a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; a storage unit 702 configured to establish and store a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.

[0103] In some optional implementations of this embodiment, the user's operation information on the second UI module using the target page is received; the event is generated based on the operation information; in response to the generation of the event, the first function is executed according to the second association relationship to update the data; in response to the update of the data, the first attribute of the first UI module is updated according to the first association relationship.

[0104] In some optional implementations of this embodiment, the server further predefines a second function, which is used to perform calculations on the data; the relationship association request also includes a third request for associating the second function with the second attribute of the third UI module; and the device further includes: an establishment and storage unit (not shown in the figure), configured to establish and store a third association relationship according to the third request; wherein the third association relationship is used to update the second attribute of the third UI module according to the execution result of the second function.

[0105] According to another embodiment, a computer-readable storage medium is also provided, on which a computer program is stored, which, when executed in a computer, causes the computer to perform the methods described in Figures 2 and 5.

[0106] According to another embodiment, an electronic device is also provided, including a memory and a processor, characterized in that the memory stores executable code, and when the processor executes the executable code, it implements the method described in FIG2 and FIG5.

[0107] The foregoing description describes specific embodiments of this disclosure; other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than those shown in the embodiments, and the desired result may still be achieved. Furthermore, the processes depicted in the drawings do not necessarily need to follow the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0108] Referring now to FIG8, a schematic diagram of the structure of an electronic device 800 suitable for implementing embodiments of the present disclosure is shown. The electronic device shown in FIG8 is merely an example and should not impose any limitation on the functionality and scope of use of embodiments of the present disclosure.

[0109] As shown in Figure 8, the electronic device 800 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage device 808 into a random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the electronic device 800. The processing device 801, ROM 802, and RAM 803 are interconnected via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0110] Typically, the following devices can be connected to I / O interface 805: input devices 806 including, for example, touchscreens, touchpads, keyboards, mice, etc.; output devices 807 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 808 including, for example, magnetic tapes, hard disks, etc.; and communication devices 809. Communication device 809 allows electronic device 800 to communicate wirelessly or wiredly with other devices to exchange data. Although FIG8 shows an electronic device 800 with various devices, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Each box shown in FIG8 may represent one device, or multiple devices may be represented as needed.

[0111] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 809, or installed from a storage device 808, or installed from a ROM 802. When the computer program is executed by a processing device 801, it performs the functions defined in the methods of embodiments of this disclosure.

[0112] This disclosure also provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, causes the computer to perform the methods provided in this disclosure.

[0113] It should be noted that the computer-readable medium described in the embodiments of this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In the embodiments of this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the embodiments of this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (Radio Frequency), etc., or any suitable combination thereof.

[0114] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: display a configuration interface for the UI module selected by the user for constructing the target page; send a relationship association request input by the user through the configuration interface of the UI module to a server, so that the server can establish and store various association relationships according to the relationship association request, wherein the association relationship includes a first association relationship between the aforementioned data and a first attribute of the first UI module of the target page, and a second association relationship between the aforementioned first function and an event of the second UI module of the target page; wherein the second association relationship is used to instruct the execution of the aforementioned first function to update the aforementioned data when the user triggers the aforementioned event through the aforementioned second UI module; and the first association relationship is used to instruct the updating of the aforementioned first attribute of the aforementioned first UI module after the aforementioned data has been updated.

[0115] Computer program code for performing the operations of embodiments of this disclosure can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on a user's computer, partially on a user's computer, as a standalone software package, partially on a user's computer and partially on a remote computer, or entirely on a remote computer or electronic device. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0116] The various embodiments in this disclosure are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments for storage media and computing devices are basically similar to the method embodiments, so they are described more simply; relevant parts can be referred to the descriptions of the method embodiments.

[0117] Those skilled in the art will recognize that the functions described in the embodiments of this disclosure in one or more of the foregoing examples can be implemented using hardware, software, firmware, or any combination thereof. When implemented in software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium.

[0118] The specific embodiments described above further illustrate the purpose, technical solutions, and beneficial effects of the embodiments of this disclosure. It should be understood that the above descriptions are merely specific embodiments of the present disclosure and are not intended to limit the scope of protection of this disclosure. Any modifications, equivalent substitutions, or improvements made based on the technical solutions of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A page layout method, executed by a client of a low-code platform, a server of the low-code platform being previously defined with data and a first function, the first function being used to update the data, wherein, The method includes: Based on the UI modules selected by the user for building the target page, a configuration interface for the UI modules is displayed; The relationship association request entered by the user through the configuration interface of the UI module is sent to the server, so that the server can establish and store each relationship according to the relationship association request. The relationship includes a first relationship between the data and a first attribute of a first UI module of the target page, and a second relationship between the first function and an event of a second UI module of the target page. The second relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; the first relationship is used to instruct the update of the first attribute of the first UI module after the data is updated.

2. The method of claim 1, wherein, The target page operates in the following way: Receive user operation information on the second UI module from the user using the target page; The event is generated based on the operation information; In response to the generation of the event, the first function is executed according to the second association relationship to update the data; In response to the update of the data, the first attribute of the first UI module is updated according to the first association relationship.

3. The method of claim 1 or 2, wherein, The configuration interface for the UI components selected by the user for constructing the target page is displayed, including: Based on the first UI module selected by the user for constructing the target page, a first configuration interface for the first UI module is displayed, wherein the first configuration interface is used to configure the first attribute of the first UI module; And, sending the relationship association request input by the user through the configuration interface of the UI module to the server includes: Receive the first reference relationship information for the first attribute of the first UI module input by the user through the first configuration interface, wherein the first reference relationship information includes a reference identifier and an identifier of the data; Based on the first reference relationship information, a first relationship association request is sent to the server so that the server can establish and store the first association relationship between the data and the first attribute of the first UI module according to the first relationship association request.

4. The method according to any one of claims 1-3, wherein, The server side of the low-code platform also predefines a second function, which is used to obtain the latest updated data and perform calculations. Furthermore, the association established and stored by the server also includes: the third association between the second function and the second attribute of the third UI module of the target page; The third association is used to update the second attribute of the third UI module according to the execution result of the second function.

5. The method according to any one of claims 1-4, wherein, The first UI module includes a display UI module, and the first attribute of the display UI module includes a display attribute. The first association is used to indicate that the latest updated value of the data is obtained and displayed when the display UI module is displayed on the target page.

6. The method according to any one of claims 1-5, wherein, The second UI module includes a button UI module, and the events of the second UI module include click events. The second association is used to instruct the execution of the first function to update the data in response to a click event generated when a user clicks the button UI module on the target page.

7. The method according to claim 4, wherein, The third UI module includes a button UI module, the second attribute of the button UI module includes a disable attribute, and the second function is used to compare the data with a preset value and determine whether to disable the button UI module based on the comparison result. The third association is used to update the disabled attribute of the button UI module according to the execution result of the second function.

8. A page layout method, executed by a server corresponding to the low-code platform, wherein the server predefines data and a first function, the first function being used to update the data, wherein... The method includes: The system receives a relationship association request sent by the client through the configuration interface of the UI module. The relationship association request includes a first request for associating the data with a first attribute of the first UI module, and a second request for associating the first function with an event of the second UI module. A first association and a second association are established and stored according to the first request and the second request; wherein the second association is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; the first association is used to instruct the updating of the first attribute of the first UI module after the data is updated.

9. The method according to claim 8, wherein, The target page operates in the following way: Receive user operation information on the second UI module from the user using the target page; The event is generated based on the operation information; In response to the generation of the event, the first function is executed according to the second association relationship to update the data; In response to the update of the data, the first attribute of the first UI module is updated according to the first association relationship.

10. The method according to claim 9, wherein, The server also predefines a second function, which is used to perform operations on the data; the relationship association request also includes a third request for associating the second function with a second attribute of a third UI module; and the method further includes: A third association is established and stored according to the third request; wherein the third association is used to update the second attribute of the third UI module according to the execution result of the second function.

11. A page layout device, deployed on a client side of the low-code platform, wherein the server side of the low-code platform predefines data and a first function, the first function being used to update the data, wherein... The device includes: The display unit is configured to display a configuration interface for the UI module selected by the user for building the target page. The sending unit is configured to send a relationship association request input by the user through the configuration interface of the UI module to the server, so that the server can establish and store each relationship association according to the relationship association request. The relationship association includes a first relationship association between the data and a first attribute of a first UI module of the target page, and a second relationship association between the first function and an event of a second UI module of the target page. The second relationship association is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module. The first relationship association is used to instruct the updating of the first attribute of the first UI module after the data is updated.

12. A page layout device, deployed on a server corresponding to the low-code platform, wherein the server predefines data and a first function, the first function being used to update the data, wherein... The device includes: The receiving unit is configured to receive a relationship association request sent by the client through the configuration interface of the UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of the first UI module, and a second request for associating the first function with an event of the second UI module. The storage unit is configured to establish and store a first association and a second association based on the first request and the second request; wherein the second association is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; and the first association is used to instruct the updating of the first attribute of the first UI module after the data is updated.

13. A computer-readable storage medium storing a computer program, wherein, When the computer program is executed in the computer, the computer is instructed to perform the page layout method according to any one of claims 1-10.

14. An electronic device comprising a memory and a processor, wherein, The memory stores executable code, and when the processor executes the executable code, it implements the page layout method according to any one of claims 1-10.

Images