A method and system for configuring a custom button on a target function page

Abstract

The embodiment of the application discloses a method and system for configuring a custom button on a target function page, the method comprising the following steps: receiving original driving data and tenant information of the target function page from a parasitic intermediate layer component; assembling the original driving data and button configuration driving data of the target function page through a configuration page, and saving the assembled configuration driving data to a configuration database according to tenant isolation; hijacking the original driving data and tenant information of the target function page through the parasitic intermediate layer component, calling button configuration driving data corresponding to the tenant information from the configuration database, comparing and assembling the original driving data and the button configuration driving data, and dynamically rendering page layout and button function logic based on the assembled driving data. The embodiment of the application can integrate the original driving data and the button configuration driving data, and finally configure a custom button on the target function page.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and specifically relates to a method and system for configuring custom buttons on a target function page. Background Technology

[0002] With the advent of the digital age, enterprises are driving digital transformation, and cost reduction and efficiency improvement have become the main goals of internal R&D. Lowering development costs, improving development efficiency and code quality, and shortening project delivery cycles are the current visions of R&D teams. Traditional web front-end development requires a significant amount of development time and resources, resulting in excessive duplication of development and reinventing the wheel. To address this pain point, low-code development platforms have emerged thanks to the tireless efforts of R&D teams across various enterprises, promoting the continuous upgrading of low-code technology.

[0003] However, due to differences in their respective needs and scenarios, the low-code development platforms of various vendors currently produce platforms that vary greatly and cannot meet the requirements for secondary development of historical pages.

[0004] Application content

[0005] The purpose of this application is to provide a method and system for configuring custom buttons on a target function page, so as to solve the deficiency of the prior art in that it cannot meet the secondary development capabilities of historical pages.

[0006] To solve the above-mentioned technical problems, this application is implemented as follows:

[0007] Firstly, a method for configuring custom buttons on a target function page is provided, including the following steps:

[0008] The configuration page sends a communication request to the parasitic middleware component and receives the original driver data and tenant information of the target function page from the parasitic middleware component. The configuration page is embedded in the target function page via an iframe, and the parasitic middleware component is parasitic in the target function page.

[0009] In the custom button designer, obtain custom button configuration driver data. Then, assemble the original driver data of the target function page and the button configuration driver data through the configuration page. Finally, save the assembled configuration driver data to the configuration database in tenant isolation.

[0010] The parasitic intermediate layer component hijacks the original driver data and tenant information of the target function page, retrieves the button configuration driver data corresponding to the tenant information from the configuration database, compares and assembles the original driver data and the button configuration driver data, and dynamically renders the page layout and button function logic based on the assembled driver data.

[0011] Secondly, a system for configuring custom buttons on a target function page is provided, including:

[0012] The transceiver module is used to send communication requests to the parasitic middleware component through the configuration page, and to receive the original driver data and tenant information of the target function page from the parasitic middleware component. The configuration page is embedded in the target function page through an iframe, and the parasitic middleware component is parasitic in the target function page.

[0013] The acquisition module is used to acquire custom button configuration driver data in the custom button designer, assemble the original driver data of the target function page and the button configuration driver data through the configuration page, and save the assembled configuration driver data to the configuration database in tenant isolation.

[0014] The rendering module is used to hijack the original driving data and tenant information of the target function page through the parasitic intermediate layer component, call the button configuration driving data corresponding to the tenant information from the configuration database, compare and assemble the original driving data and the button configuration driving data, and dynamically render the page layout and button function logic based on the assembled driving data.

[0015] This application embodiment obtains the driving data of the function page through the configuration page, expands the configuration of the driving data, integrates the original driving data and the button configuration driving data, and finally realizes the configuration of custom buttons on the target function page. It covers a wide range of scenarios, can complete the functional expansion under different needs, and has the advantages of zero code for iterative upgrades, no release, and WYSIWYG configuration. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating a method for configuring custom buttons on a target function page, as provided in an embodiment of this application.

[0017] Figure 2 This is a schematic diagram of the interaction of page-driven data provided in the embodiments of this application;

[0018] Figure 3 This is a flowchart illustrating the custom buttons on the configuration page provided in an embodiment of this application;

[0019] Figure 4This is a schematic diagram of the global object update principle provided in the embodiments of this application;

[0020] Figure 5 This is a schematic diagram of the composition structure of the functional pages provided in the embodiments of this application;

[0021] Figure 6 This is a schematic diagram of the parser parsing driver data provided in an embodiment of this application;

[0022] Figure 7 This is a schematic diagram of the functional page rendering and interaction process provided in the embodiments of this application;

[0023] Figure 8 This is a schematic diagram of the structure of a system for configuring custom buttons on a target function page, as provided in an embodiment of this application. Detailed Implementation

[0024] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0025] This application relates to low-code development technology. Low-code development involves using JSON objects to describe page layout and content through a series of configurations, and then using a parser system to parse and process the JSON data to dynamically render the functional pages designed by the user. Low-code development platforms typically use a designer and a parser in combination. The designer is responsible for assembling page configuration information into JSON objects using various configuration items to complete the description of the page content. Content components (e.g., input boxes, dropdowns, checkboxes, tables, grids, etc.) are dragged and dropped onto the canvas, and then customized to achieve different functions in different scenarios. The parser is responsible for parsing the JSON page description generated by the designer, dynamically rendering the content components, and parsing the personalized configuration attributes to accurately render the different usage scenarios of the content components. Finally, it parses the layout description in the JSON description data to assemble and render the page content components according to the described layout.

[0026] Currently, mainstream low-code development platforms (such as LowCode and vForm) are basically data-driven models with extended fields or custom form components. Through complex and diverse configuration options, they allow for rich customization of pages and configuration of JavaScript enhancements. However, these low-code platforms also have various shortcomings:

[0027] 1. It cannot be better integrated with the existing platform, and it cannot perform secondary configuration upgrades on the original functional modules.

[0028] 2. The ability to customize buttons is weak, making it difficult to configure buttons for different functional scenarios more flexibly.

[0029] 3. Unable to control button permissions.

[0030] In addition, most B2B management platforms are almost all top-down table style with CRUD functions. These projects have a lot of repetitive development of similar logic, resulting in a large accumulation of meaningless code and seriously affecting development efficiency.

[0031] To address the above issues, this application embodiment combines existing web capabilities and, based on the Vue architecture, designs a set of low-code development components that can be parasitized by host components. This application embodiment includes a designer component and a parser component, which work together to achieve flexible configuration of form interactions and custom function buttons. At the same time, it can add new functions with zero code, without the need for a release process, and can be configured and refreshed at any time for immediate use.

[0032] Specifically, the technical problem to be solved by this application is how to design an intermediate layer component based on the parser structure of the historical page, which supports adding custom buttons to the historical page in a configuration manner, thereby realizing the customization and extension of the historical page. This application design, based on the existing top-to-bottom table parser of the electronic ticket system's historical page, provides an extensible parser enhancement component. The original page parser component (SearchAndTable) of the historical page is replaced with a parser enhancement component (SearchAndTableExtension). Simultaneously, the target functional page to be configured is embedded in the page designer via an iframe. A parent-child page communication protocol is encapsulated using JavaScript's native postMessage, allowing the designer to obtain the historical configuration JSON data of the target page. This enables the configuration of custom function buttons, query items, table items, and the display and sorting control of buttons on the functional page. The newly generated configuration data is merged with the historical configuration data and finally stored as a JSON object in the database to achieve zero-code extension of functional buttons on the functional page and store configuration and operation records. The SearchAndTableExtension component loads the configuration JSON data from the database and dynamically renders the page layout and button function logic.

[0033] This application's embodiments include the following capabilities:

[0034] 1. Based on the parent-child component communication channel encapsulated by postMessage, the configuration page is nested in an iframe to extract the original configuration data of the function page.

[0035] 2. The intermediate layer parser component resides in the host function page, completing the upward transmission of the page's original configuration data and the dynamic rendering of custom buttons / forms.

[0036] 3. Custom button business attribute configuration for multiple scenarios.

[0037] 4. Drag and drop to configure table, form layout and control types.

[0038] 5. Rich configuration of custom tables and form business attributes, as well as JavaScript enhancement capabilities, can meet the requirements of complex use cases.

[0039] 6. Control data source binding enables CRUD (Create, Read, Update, Delete) operations on the list.

[0040] 7. Configuration data is stored in the database. The parser obtains the configuration data through the interface and dynamically updates the rendered page. New features can be developed without a release process; the configuration takes effect immediately.

[0041] 8. Use tenant ID as an identifier to achieve multi-tenant configuration data isolation and enable multi-tenant customization and expansion capabilities.

[0042] The following description, in conjunction with the accompanying drawings, details a method for configuring custom buttons on a target function page, through specific embodiments and application scenarios.

[0043] like Figure 1 The diagram shown is a flowchart of a method for configuring custom buttons on a target function page according to an embodiment of this application. The method includes the following steps:

[0044] Step 101: Send a communication request to the parasitic intermediate layer component through the configuration page, and receive the original driver data and tenant information of the target function page from the parasitic intermediate layer component. The configuration page is embedded in the target function page through an iframe, and the parasitic intermediate layer component is parasitic in the target function page.

[0045] Step 102: Obtain custom button configuration driver data in the custom button designer, assemble the original driver data of the target function page and the button configuration driver data through the configuration page, and save the assembled configuration driver data to the configuration database in tenant isolation.

[0046] The original driving data includes query items, table items, and function buttons; the button configuration driving data includes basic button attributes, button type, button interaction attributes, button API attributes, and button callback events. The button type is a basic button, an import / upload button, and an export / download button. The button interaction attributes are custom direct execution buttons, custom confirmation box buttons, and custom form interaction buttons.

[0047] In this embodiment, after receiving the raw driving data of the target function page from the parasitic intermediate layer component, a configuration pop-up window can be displayed through the configuration page. In the configuration pop-up window, information on the display, hiding or sorting of the user-configured query items, table items, and original function buttons of the target page, as well as custom button configuration information, can be obtained.

[0048] Accordingly, the original driver data of the target function page and the button configuration driver data can be compared and assembled according to the latest display and hidden order through the configuration page.

[0049] Step 103: By hijacking the original driver data and tenant information of the target function page through the parasitic intermediate layer component, the button configuration driver data corresponding to the tenant information is called from the configuration database, the original driver data and the button configuration driver data are compared and assembled, and the page layout and button function logic are dynamically rendered based on the assembled driver data.

[0050] Specifically, it can be determined whether the button is an existing button on the target function page or a custom button. If it is an existing button, the execution logic of the existing button on the target function page is executed, rendering the interactive page and calling the API. If it is a custom button, the type of the custom button is determined. If the custom button is an upload or import button, the upload or import form parser is used, and according to the configured attributes, the custom import file interaction is rendered, calling the API interface in the configuration to complete the upload or import operation. If the custom button is a download or export button, the download or export button configuration data is parsed, the download or export logic is executed, and the API interface in the configuration is called to complete the download / export operation. If the custom button is a regular button, the interaction method of the regular button is determined. If the interaction method is direct... If the interaction method is confirmation, the API and input parameter configuration in the configuration are parsed, and the API is directly called to complete the operation. If the interaction method is confirmation, the confirmation box parser parses the confirmation text, API interface, and input parameter configuration in the configuration, renders the confirmation box, and calls the API to complete the operation after the user clicks "OK". If the interaction method is form interaction, the form attributes, custom unit components, API interface, and input parameter configuration in the configuration are parsed through a custom form parser, and pop-ups, drawers, forms, and unit components are dynamically rendered. After the user completes the form data entry and clicks "Submit", the input parameters are assembled and the API is called to complete the operation. It is determined whether the button operation interacts with the form. If the table refresh is configured, the table data refresh logic is executed to complete the form's add, delete, modify, query, and custom function operations.

[0051] The target function page contains its own global data, methods, imported components for handling custom function button interactions, and the parasitic intermediate layer component. This parasitic intermediate layer component integrates a SearchAndTable component, built-in data processing logic, a built-in custom button interaction parser component, and a custom form parser. The assembled driving data includes a query area, a table area, and a button area. Each query area, table area, and button area corresponds to a different area parser component. Each area parser component parses the configuration data for its respective area, recursively iterates through the field key to parse the component type or button type, and renders the corresponding component or button.

[0052] In this embodiment, before hijacking the original driver data and tenant information of the target function page through the parasitic intermediate layer component, the page resources of the target function page can be loaded, the page lifecycle function can be executed, the original driver data of the target function page can be obtained, and the parasitic intermediate layer component can be loaded.

[0053] This application embodiment obtains the driving data of the function page through the configuration page, expands the configuration of the driving data, integrates the original driving data and the button configuration driving data, and finally realizes the configuration of custom buttons on the target function page. It covers a wide range of scenarios, can complete the functional expansion under different needs, and has the advantages of zero code for iterative upgrades, no release, and WYSIWYG configuration.

[0054] In this embodiment, the design principle of the component includes: SearchAndTableExtension.vue (a parasitic middleware component) is parasitic within a specific functional page. The component encapsulates a set of postMessage-based communication events and registers with the window in the DOM tree to listen for messages sent by the parent page; such as... Figure 2 As shown, the configuration page nests specific functional pages within an iframe and sends a postMessage communication request to the child page to obtain the source data for the original driver rendering of the child functional page. Upon receiving the request, SearchAndTableExtension.vue sends the driver source data to the parent page via postMessage, thus passing the original driver data of the child functional page to the configuration page. This allows for operations such as displaying / hiding columns, query conditions, and buttons on the functional page, sorting, and modifying button names. It also adds custom buttons and custom form configurations, configuring button actions, APIs, and other related settings for custom buttons, and saves the configuration data in the database. The SearchAndTableExtension.vue component has a built-in logic to determine whether the current host page has had its driver data modified by the configuration page. If the condition is met, it automatically calls the interface to retrieve the configuration data from the database, assembles the configuration data with the original driver source data of the host page, and dynamically renders the page based on the assembled source data. This iterative functionality can be implemented through page configuration without requiring coding or release processes.

[0055] The configuration page is embedded into the target function page via an iframe. The target function page imports the SearchAndTableExtension component, passing in the page configuration data for data-driven rendering of the page to look up the table. The SearchAndTableExtension component has a built-in ability to register a message channel with the window (using the postMessage method) to complete the status judgment between the configuration page and the target function page, the transmission of source data, and the transmission of logged-in tenant information. At the same time, the SearchAndTableExtension component has built-in custom button handling capabilities, data hijacking and data assembly capabilities, as well as a dynamic form parser (form interaction capabilities in button interaction methods, submitting forms to call business APIs, usually used for logic such as adding / editing / viewing / file uploading). Finally, the configuration data is stored in the configuration database with the route address of the target function page and the logged-in tenant ID as identifiers, and multi-tenant data isolation is achieved.

[0056] Specifically, such as Figure 3 The diagram shows the process for configuring custom buttons on a page, including the following steps:

[0057] Step 1: Enter the configuration platform and nest the target platform within an iframe.

[0058] Step 2: Log in to the target platform, select the target function page, and then click the configuration page button for the configuration platform.

[0059] Step 3: After clicking the configuration page button, the configuration client will determine whether the route of the target page is in the whitelist route. The whitelist route is a collection of functional pages that introduce the SearchAndTableExtension component to the target platform.

[0060] Step 4: When the target page is a whitelisted page, the configuration end will send a postMessage request to SearchAndTableExtension to request the original driving data (query items, table items, function buttons) of the target page and the new message of the target platform login tenant.

[0061] Step 5: After receiving the request from the configuration page to obtain the driver source data and tenant information, SearchAndTableExtension intercepts the original driver data and tenant information from the host page and passes the data to the configuration page via postMessage.

[0062] Step 6: After receiving the raw driver data from the target function page, the configuration page will pop up a page configuration pop-up window. In the pop-up window, you can configure the display / hide and sorting of query items, table items, and the raw function buttons of the target page.

[0063] Step 7: Add a custom button. In the custom button designer, configure the button's basic properties, button type (basic button, import / upload button, export / download button), button interaction properties (custom direct execution button, custom confirmation button, custom form interaction button), button API properties, and button callback events.

[0064] Step 8: The configuration page compares and assembles the original driver data and custom configuration data of the target function page according to the latest visibility and order, and saves them in the configuration database in a tenant-isolated manner.

[0065] For a more detailed explanation of the button properties that need to be configured when configuring a custom button in step seven, see below:

[0066] Location attribute:

[0067] Table toolbar buttons: Buttons for performing operations on the entire table, such as: add, batch delete, import, export, etc.;

[0068] In-row operation buttons: Buttons for operating on individual rows of data in the table, such as: edit, delete single row, view, disable / enable, etc.

[0069] Button properties:

[0070] Button Name: The text displayed on the button;

[0071] Button type: The classification of button functions. Options include: custom basic button, custom export button, and custom import button (only handles full table import operations).

[0072] Interface type: The category of the interface being called, with options including: regular interface, upload interface (import, upload operation), and download interface (export, download operation);

[0073] Parameter source: Parameters passed when calling the interface. Optional options: primary key of selected row, all data of selected row, selected query conditions (only configurable for table tool buttons), none.

[0074] Interaction methods: Clicking the button triggers the page's interactive action, with options including: direct execution (clicking the button directly calls the API), execution after confirmation (a confirmation dialog box pops up, and the API is called after confirmation), and form interaction (a custom form template pops up, and the API is called after submitting the form data).

[0075] Form templates: Form templates that need to be selected when the interaction method is form interaction;

[0076] Post-operation action: The action to be performed after the button successfully calls the API. Optional: Refresh the table. Confirmation message: The interaction method is to provide confirmation information when the operation is performed.

[0077] Button operation code: The resource identifier of the button when implementing button access control;

[0078] When designing custom form interactive buttons, you first need to configure the custom interactive form. The custom interactive form designer is a draggable canvas based on vueDraggable that implements form components and layout design. You can drag and drop the corresponding basic unit components (input, select, datepicker, textarea, switch, checkbox, radio, inputnumber, etc.) and layout components (row) to design the form interactive page as needed. The designer's basic unit component configuration data utilizes the lodash plugin's defaultsDeep method to automatically append default values, ensuring backward compatibility of configuration data during designer and parser component version upgrades. Clicking on a basic unit component in the canvas allows you to modify the unit component. The system configures attributes, and a configuration pop-up dynamically renders the configuration information of the corresponding component based on the unit component type. After design, the form configuration data is stored in the database, generating a unique form ID and form name. When customizing the form interaction button, the designed form is selected, and the form ID is bound to the button. When the page parser parses the custom button, it retrieves the form configuration data from the database based on the form ID. The custom form parser parses the configuration data and dynamically renders the form component and layout. When the form interaction is submitted, the global form object is obtained (the form field keys are traversed to assemble the object and injected into the global variable of the form parser). The form input data is used as the request parameter to call the API interface configured for the button to implement the button interaction logic. After the API call is successful, the configured callback event is executed to complete the data interaction with the table component.

[0079] like Figure 4 The diagram shown illustrates the principle of global object update for a form according to an embodiment of this application. The data update technology for the custom pop-up form includes:

[0080] 1. The form parser obtains form configuration-driven data through the API.

[0081] 2. After obtaining the configuration driver data, iterate through the form field keys to obtain the component basic configuration data, component rendering business attribute configuration data, and field attribute configuration data corresponding to the form field key.

[0082] 3. Iterate through the form's key field attribute configuration data, assemble an Object according to the key's field type, parse the default value in the key's description data, set the value of objectKey, if there is no default value, set an empty value according to the field's data type, parse the JS enhancement configuration in the key field attribute configuration data, if JS enhancement is configured, parse the JS string based on the native JS new Function(jsString), execute the custom configuration logic, dynamically configure the key to the corresponding value, and inject the assembled Object into the global Object.

[0083] 4. Iterate through the basic configuration data of the components corresponding to the form field keys, parse the component types corresponding to the fields according to the component types in the description, parse the component rendering business attribute configuration data, set the custom behavior of the components, parse the layout configuration, and render the form page according to the preset layout.

[0084] 5. Mount the global Object to the corresponding field component according to the corresponding key, and use Vue's two-way binding principle to listen for changes in value and automatically update the global Object.

[0085] Furthermore, such as Figure 5 The diagram shown illustrates the structural composition of a functional page provided in this application embodiment. The functional page (xxx.vue) contains its own global data (variables declared in vue data), methods (methods declared in vuemethods, which handle the logic of its own functional buttons), and imported child components (components that handle the interaction of its own functional buttons). It also imports SearchAndTableExtension (parasitic middleware component). The SearchAndTableExtension component integrates the SearchAndTable component (a top-to-bottom table parser component that parses configuration data and renders query conditions, tables, and buttons), built-in data processing logic (encapsulated postMessage data interaction method, driver data acquisition method, new and old driver data comparison and splicing method, and custom button processing method), built-in custom button interaction parser component, and custom form parser.

[0086] The parser resides within the function page, hijacking the page's existing driver data and tenant information. It then retrieves the tenant's secondary custom configuration driver data from the database and assembles it into a new set of driver data by comparing the original and secondary configuration data. The driver data is divided into three areas: a query area, a table area, and a button area. Each area corresponds to a separate parser component. These components parse the configuration data for their respective area, recursively iterating through the key field to parse the component / button type and rendering the corresponding component / button. Figure 6 As shown. Subsequently, the query area, table area, and button area are assembled to form the overall ToB management page (query at the top, table at the bottom). Finally, based on user actions on the page, CRUD (create, read, update, delete) operations, import, export, and custom button configurations are performed on the page.

[0087] like Figure 7 The diagram illustrates the functional page rendering and interaction process provided in this application embodiment, including the following steps:

[0088] 1. Enter the function page (xxx.vue), load page resources, execute page lifecycle functions, and obtain the page's own driver configuration data.

[0089] 2. Load the SearchAndTableExtension component, call the API to pass in the currently logged-in tenant information to obtain the driver configuration data stored in the database by the tenant's custom configuration. Compare the page's own driver configuration data with the secondary configuration driver data, concatenate and sort them to assemble a brand new driver configuration data, and pass the configuration data to the SearchAndTableExtension component to render the top and bottom table and the button.

[0090] 3. Upon clicking a button, determine whether it's a built-in button from xxx.vue or a custom button configured separately. If it's a built-in button from xxx.vue, execute the button's logic, render the interactive page, and call the API. Otherwise, determine the custom button type, which is divided into three types (upload / import, download / export, and regular button). Upload / import buttons have a unique upload / import form parser. Based on the configured attributes, they render the custom import file interaction and call the configured API to complete the upload / import operation. Download / export buttons, upon clicking, parse the download / export button configuration data, execute the download / export logic, and call the configured API to complete the download. The export operation has three interaction methods for the regular buttons (direct execution, confirmation execution, and form interaction). Clicking the direct execution button parses the API and input parameter configurations in the settings and directly calls the API to complete the operation. Clicking the confirmation execution button triggers a confirmation dialog parser that parses the confirmation text, API interface, and input parameter configurations in the settings, renders the confirmation dialog, and the user clicks "OK" to complete the API operation. Clicking the form interaction button triggers a custom form parser that parses the form attributes, custom unit components, API interface, and input parameter configurations in the settings, dynamically rendering the pop-up / drawer, form, and unit components. After the user completes the form data entry and clicks "Submit," the input parameters are assembled to call the API to complete the operation.

[0091] 4. Parse the callback configuration data after execution in the button configuration data, determine whether the button operation interacts with the form after completion, and if the table refresh is configured, execute the table data refresh logic to complete the form's add, delete, modify, query, and customize functions.

[0092] In summary, this application's embodiments designed and implemented an intermediate layer component that resides within the host page, enabling secondary configuration development capabilities for the original page. This application's embodiments also include a parent-child page communication capability based on postMessage, resolving the sharing of driver data between the configuration end and the application end. Furthermore, this application's embodiments designed and implemented an algorithm for comparing, sorting, and assembling old and new driver data, enabling control over the visibility and order of page tables, query conditions, and buttons. This application's embodiments designed and implemented a draggable custom form designer based on vueDraggable, enabling one-to-one binding between data sources and components. This application's embodiments designed and implemented a complex, multi-scenario adaptable custom button configuration and parsing capability, fulfilling secondary development needs in various scenarios. This application's embodiments designed and implemented a set of form and button JavaScript enhancement capabilities, fulfilling requirements such as custom form value assignment. Finally, this application's embodiments designed and implemented a system that allows for zero-code secondary development of requirements through simple drag-and-drop configuration, without requiring a release and deployment process; it is ready to use immediately after configuration. This application embodiment designs and implements a multi-tenant configuration isolation scheme identified by tenant ID. The functional page includes basic functions (original page functions) + tenant-customized extended functions, so that different tenants have different functions on the same page.

[0093] Regarding the low-code development platforms currently popular in the market, this application embodiment enables secondary configuration development of existing functional pages. Mature low-code platforms in the market primarily build a completely new platform or page from scratch through drag-and-drop configuration, lacking the ability to modify and upgrade existing platform functional pages. This limits their use cases to entirely new system development or the need to reconstruct a completely new system identical to the existing one for subsequent iterations and upgrades. To address this pain point, this application embodiment encapsulates a parent-child page communication mechanism. The configuration end uses an iframe to nest the application end, obtaining application-side driver data and performing secondary configuration extensions. Through a series of algorithms including comparison, sorting, and assembly, the old and new driver configuration data are integrated, ultimately achieving secondary configuration capabilities for existing platforms. Furthermore, this application embodiment's custom button capabilities cover a wide range of scenarios, enabling functional expansion under different needs, achieving the advantages of zero-code, no release, and WYSIWYG configuration for iterative upgrades.

[0094] like Figure 8 The diagram shown is a structural schematic of a system for configuring custom buttons on a target function page, as provided in an embodiment of this application, including:

[0095] The transceiver module 810 is used to send communication requests to the parasitic intermediate layer component through the configuration page, and to receive the original driver data and tenant information of the target function page from the parasitic intermediate layer component. The configuration page is embedded in the target function page through an iframe, and the parasitic intermediate layer component is parasitic in the target function page.

[0096] The target function page contains its own global data, methods, imported components for handling the interaction of its own function buttons, and the parasitic intermediate layer component. The parasitic intermediate layer component integrates a SearchAndTable component, built-in data processing logic, a built-in custom button interaction parser component, and a custom form parser.

[0097] The acquisition module 820 is used to acquire custom button configuration driver data in the custom button designer, assemble the original driver data of the target function page and the button configuration driver data through the configuration page, and save the assembled configuration driver data to the configuration database in tenant isolation.

[0098] The original driving data includes query items, table items, and function buttons; the button configuration driving data includes basic button attributes, button type, button interaction attributes, button API attributes, and button callback events. The button type is a basic button, an import / upload button, and an export / download button. The button interaction attributes are custom direct execution buttons, custom confirmation box buttons, and custom form interaction buttons.

[0099] Specifically, the acquisition module 820 is used to compare and assemble the original driving data of the target function page and the button configuration driving data through the configuration page according to the latest display and hidden order.

[0100] The rendering module 830 is used to hijack the original driving data and tenant information of the target function page through the parasitic intermediate layer component, call the button configuration driving data corresponding to the tenant information from the configuration database, compare and assemble the original driving data and the button configuration driving data, and dynamically render the page layout and button function logic based on the assembled driving data.

[0101] The assembled driver data includes a query area, a table area, and a button area. The query area, the table area, and the button area correspond to different area parser components. Each area parser component parses the configuration data of its respective area, recursively traverses the field key to parse the component type or button type, and renders the corresponding component or button.

[0102] Specifically, the rendering module 830 is used to determine whether the button is an existing button on the target function page or a custom button. If it is an existing button, the execution logic of the existing button on the target function page is executed, and the interactive page is rendered to call the API. If it is a custom button, the type of the custom button is determined. If the custom button is an upload or import button, the upload or import form parser is used, and according to the configured attributes, the custom import file interaction is rendered to call the API interface in the configuration to complete the upload or import operation. If the custom button is a download or export button, the download or export button configuration data is parsed, the download or export logic is executed, and the API interface in the configuration is called to complete the download / export operation. If the custom button is a regular button, the interaction method of the regular button is determined. If the interaction method is direct execution, the API and input parameter configuration in the configuration are parsed, and the API is directly called to complete the operation. If the interaction method is confirmation execution, the confirmation box parser parses the confirmation text, API interface, and input parameter configuration in the configuration, renders the confirmation box, and calls the API to complete the operation after the user clicks "OK". If the interaction method is form interaction, the form attributes, custom unit components, API interface, and input parameter configuration in the configuration are parsed through a custom form parser, and pop-ups, drawers, forms, and unit components are dynamically rendered. After the user completes the form data entry and clicks "Submit", the input parameters are assembled and the API is called to complete the operation. It is determined whether the button operation interacts with the form, and if the table refresh is configured, the table data refresh logic is executed to complete the form's add, delete, modify, query, and custom function operations.

[0103] The system also includes:

[0104] The configuration module is used to pop up a configuration pop-up window through the configuration page, and obtain information on the display, hiding or sorting of the user-configured query items, table items, original function buttons on the target page, and custom button configuration information in the configuration pop-up window.

[0105] The loading module is used to load the page resources of the target function page, execute the page lifecycle function, obtain the original driving data of the target function page, and load the parasitic intermediate layer component.

[0106] This application embodiment obtains the driving data of the function page through the configuration page, expands the configuration of the driving data, integrates the original driving data and the button configuration driving data, and finally realizes the configuration of custom buttons on the target function page. It covers a wide range of scenarios, can complete the functional expansion under different needs, and has the advantages of zero code for iterative upgrades, no release, and WYSIWYG configuration.

[0107] This application also provides a computer-readable storage medium storing a computer program. When executed by a processor, this computer program implements the various processes of the method embodiment described above for configuring custom buttons on a target function page, and achieves the same technical effect. To avoid repetition, it will not be described again here. The computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0108] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0109] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0110] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

Claims

1. A method for configuring custom buttons on a target function page, characterized in that, Includes the following steps: The configuration page sends a communication request to the parasitic middleware component and receives the original driver data and tenant information of the target function page from the parasitic middleware component. The configuration page is embedded in the target function page via an iframe, and the parasitic middleware component is parasitic in the target function page. In the custom button designer, obtain custom button configuration driver data. Then, assemble the original driver data of the target function page and the button configuration driver data through the configuration page. Finally, save the assembled configuration driver data to the configuration database in tenant isolation. The parasitic intermediate layer component hijacks the original driver data and tenant information of the target function page, retrieves the configuration driver data corresponding to the tenant information from the configuration database, compares and assembles the original driver data with the assembled configuration driver data, and dynamically renders the page layout and button function logic based on the assembled driver data. The logic for dynamically rendering the page layout and button functions based on the assembled driver data specifically includes: Determine whether the button is an existing button of the target function page or a custom button. If it is an existing button, execute the execution logic of the existing button of the target function page, render the interactive page, and call the API. If the button is a custom button, its type is determined. If it is an upload or import button, the upload or import form parser is used to render the custom import file interaction based on the configured attributes, and the API interface in the configuration is called to complete the upload or import operation. If the button is a download or export button, the download or export button configuration data is parsed, and the download or export logic is executed, calling the API interface in the configuration to complete the download / export operation. If the button is a regular button, its interaction method is determined. If the interaction method is direct execution, the API and input parameter configuration in the configuration are parsed, and the API is called directly to complete the operation. If the interaction method is confirmation execution, the confirmation box parser parses the confirmation text, API interface, and input parameter configuration in the configuration, renders the confirmation box, and calls the API to complete the operation after the user clicks "OK". If the interaction method is form interaction, the form attributes, custom unit components, API interface, and input parameter configuration in the configuration are parsed through the custom form parser, and pop-ups, drawers, forms, and unit components are dynamically rendered. After the user completes form data entry and clicks "Submit", the input parameters are assembled and the API is called to complete the operation. Determine whether the button operation interacts with the form after completion, and if the table is configured to refresh, execute the table data refresh logic to complete the form's add, delete, modify, query, and custom functions.

2. The method according to claim 1, characterized in that, The original driving data includes query items, table items, and function buttons; the button configuration driving data includes button basic attributes, button type, button interaction attributes, button API attributes, and button callback events. The button type is a basic button, an import / upload button, and an export / download button. The button interaction attributes are a custom direct execution button, a custom confirmation box button, and a custom form interaction button. After receiving the raw driver data of the target function page from the parasitic intermediate layer component, the method further includes: A configuration pop-up window appears on the configuration page, where the user-configured query items, table items, display, hiding or sorting of the original function buttons on the target page, and custom button configuration information are obtained. The assembly of the original driver data of the target function page and the button configuration driver data through the configuration page specifically includes: The configuration page compares and assembles the original driver data of the target function page and the button configuration driver data according to the latest visibility and order.

3. The method according to claim 1, characterized in that, The target function page contains its own global data, methods, imported components for handling the interaction of its own function buttons, and the parasitic intermediate layer component. The parasitic intermediate layer component integrates a SearchAndTable component, built-in data processing logic, a built-in custom button interaction parser component, and a custom form parser. Before hijacking the original driver data and tenant information of the target function page through the parasitic intermediate layer component, the method further includes: Load the page resources of the target function page, execute the page lifecycle function, obtain the original driving data of the target function page, and load the parasitic intermediate layer component.

4. The method according to claim 1, characterized in that, The assembled driver data includes a query area, a table area, and a button area. The query area, the table area, and the button area correspond to different area parser components. Each area parser component parses the configuration data of its respective area, recursively traverses the field key to parse the component type or button type, and renders the corresponding component or button.

5. A system for configuring custom buttons on a target function page, characterized in that, include: The transceiver module is used to send communication requests to the parasitic middleware component through the configuration page, and to receive the original driver data and tenant information of the target function page from the parasitic middleware component. The configuration page is embedded in the target function page through an iframe, and the parasitic middleware component is parasitic in the target function page. The acquisition module is used to acquire custom button configuration driver data in the custom button designer, assemble the original driver data of the target function page and the button configuration driver data through the configuration page, and save the assembled configuration driver data to the configuration database in tenant isolation. The rendering module is used to hijack the original driver data and tenant information of the target function page through the parasitic intermediate layer component, call the configuration driver data corresponding to the tenant information from the configuration database, compare and assemble the original driver data with the assembled configuration driver data, and dynamically render the page layout and button function logic based on the assembled driver data. The rendering module is specifically used to determine whether the button is an existing button of the target function page or a custom button. If it is an existing button, the execution logic of the existing button of the target function page is executed, and the interactive page is rendered to call the API. If it is a custom button, the type of the custom button is determined. If the custom button is an upload or import button, the upload or import form parser is used, and the custom import file interaction is rendered according to the configured attributes, calling the API interface in the configuration to complete the upload or import operation. If the custom button is a download or export button, the download or export button configuration data is parsed, and the download or export logic is executed, calling the API interface in the configuration to complete the download / export operation. If the custom button is a regular button, the interaction method of the regular button is determined. If the interaction method is direct execution, the API and input parameter configuration in the configuration are parsed, and the API is directly called to complete the operation. If the interaction method is confirmation, the confirmation box parser parses the confirmation text, API interface, and input parameter configuration in the configuration, renders the confirmation box, and calls the API to complete the operation after the user clicks "OK". If the interaction method is form interaction, the custom form parser parses the form attributes, custom unit components, API interface, and input parameter configuration in the configuration, dynamically renders the pop-up, drawer, form, and unit components, and assembles the input parameters to call the API to complete the operation after the user completes the form data entry and clicks "Submit". It determines whether the button operation interacts with the form, and if the table refresh is configured, executes the table data refresh logic to complete the form's add, delete, modify, query, and custom function operations.

6. The system according to claim 5, characterized in that, The original driving data includes query items, table items, and function buttons; the button configuration driving data includes button basic attributes, button type, button interaction attributes, button API attributes, and button callback events. The button type is a basic button, an import / upload button, and an export / download button. The button interaction attributes are a custom direct execution button, a custom confirmation box button, and a custom form interaction button. The system also includes: The configuration module is used to pop up a configuration pop-up window through the configuration page, and obtain information on the display, hiding or sorting of the user-configured query items, table items, original function buttons on the target page, and custom button configuration information in the configuration pop-up window; The acquisition module is specifically used to compare and assemble the original driver data of the target function page and the button configuration driver data through the configuration page, according to the latest display and hidden order.

7. The system according to claim 5, characterized in that, The target function page contains its own global data, methods, imported components for handling the interaction of its own function buttons, and the parasitic intermediate layer component. The parasitic intermediate layer component integrates a SearchAndTable component, built-in data processing logic, a built-in custom button interaction parser component, and a custom form parser. The system also includes: The loading module is used to load the page resources of the target function page, execute the page lifecycle function, obtain the original driving data of the target function page, and load the parasitic intermediate layer component.

8. The system according to claim 5, characterized in that, The assembled driver data includes a query area, a table area, and a button area. The query area, the table area, and the button area correspond to different area parser components. Each area parser component parses the configuration data of its respective area, recursively traverses the field key to parse the component type or button type, and renders the corresponding component or button.

Images