Method and system for configuring custom button on target function page

Abstract

The embodiment of the invention discloses a method and a system for configuring a custom button on a target function page. The method comprises 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 the button configuration driving data of the target function page through the configuration page, and storing the assembled configuration driving data in a configuration database in an isolated manner according to tenants; and hijacking 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 based on the assembled driving data, obtaining the tenant information of the target function page. Dynamically rendering page layout and button function logic. According to the embodiment of the invention, integration of the original driving data and the button configuration driving data can be realized, and finally configuration of the custom button on the target function page is realized.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a method and system for configuring a custom button on a target function page. Background Art

[0002] With the advent of the digital age, all enterprises are promoting digital transformation. Reducing costs and increasing efficiency have become the main goals of internal R&D in various enterprises. Reducing development costs, improving development efficiency and code quality, and shortening project delivery cycles are the visions of various R&D teams today. Traditional web front-end development requires a lot of development time and resources, and there are too many repeated developments and reinventing the wheel. To solve this pain point, low-code development platforms have emerged with the unremitting efforts of R&D teams of major enterprises, promoting the continuous upgrading of low-code technology.

[0003] However, due to the different needs and scenarios of the low-code development platforms currently produced by various manufacturers, there are also great differences in the platforms produced, and they cannot meet the secondary development capabilities of historical pages.

[0004] Application Contents

[0005] The purpose of the embodiments of the present application is to provide a method and system for configuring a custom button on a target function page to solve the defect that the prior art cannot meet the secondary development capabilities of historical pages.

[0006] In order to solve the above technical problems, this application is implemented as follows:

[0007] In a first aspect, a method for configuring a custom button on a target function page is provided, comprising the following steps:

[0008] Sending a communication request to the parasitic middle layer component through a configuration page, receiving original driver data and tenant information of the target function page from the parasitic middle layer component, wherein the configuration page is embedded in the target function page through an iframe, and the parasitic middle layer component is parasitic in the target function page;

[0009] Obtaining customized button configuration driver data in a customized button designer, assembling the original driver data of the target function page and the button configuration driver data through the configuration page, and saving the assembled configuration driver data in a configuration database by tenant isolation;

[0010] The original driver data and tenant information of the target function page are hijacked through the parasitic middle layer component, and 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 based on the assembled driver data, the page layout and button function logic are dynamically rendered.

[0011] In a second aspect, a system for configuring a custom button on a target function page is provided, comprising:

[0012] A transceiver module, used to send a communication request to the parasitic middle layer component through a configuration page, and receive the original driver data and tenant information of the target function page from the parasitic middle layer component, wherein the configuration page is embedded in the target function page through an iframe, and the parasitic middle layer component is parasitic in the target function page;

[0013] An acquisition module, used to acquire the customized button configuration drive data in the customized button designer, assemble the original drive data of the target function page and the button configuration drive data through the configuration page, and save the assembled configuration drive data into the configuration database by tenant isolation;

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

[0015] The embodiment of the present application obtains the driving data of the function page through the configuration page, expands and configures the driving data, realizes the integration of the original driving data and the button configuration driving data, and finally realizes the configuration of the custom button on the target function page. It covers a relatively rich range of scenarios, can complete the function expansion under different requirements, and has the advantages of iterative upgrade with zero code, no version release, and configure-is-you-get. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 It is a flow chart of a method for configuring a custom button on a target function page provided by an embodiment of the present application;

[0017] Figure 2 is a schematic diagram of the interaction of page-driven data provided by an embodiment of the present application;

[0018] Figure 3 It is a flowchart of customizing buttons on a configuration page provided in an embodiment of the present application;

[0019] Figure 4This is a schematic diagram of the form global Object update provided by the embodiment of the present application;

[0020] Figure 5 It is a schematic diagram of the composition structure of the function page provided in the embodiment of the present application;

[0021] Figure 6 is a schematic diagram of a parser that parses drive data provided by an embodiment of the present application;

[0022] Figure 7 It is a schematic diagram of the function page rendering and interaction process provided by the embodiment of the present application;

[0023] Figure 8 It is a structural diagram of a system for configuring a custom button on a target function page provided in an embodiment of the present application. DETAILED DESCRIPTION

[0024] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0025] The embodiments of the present application involve low-code development technology. The so-called low-code development is to describe the page layout and content in the form of json objects through a series of configurations, and then cooperate with a set of parser systems to parse and process the json data, and dynamically render the functional page that the user wants to design. Usually, the low-code development platform is used in combination with a designer + parser. The designer is responsible for assembling the page configuration information in the form of json objects through various configuration items for the expected page content, completing the description of the page content, and dragging content components (for example: input boxes, drop-down boxes, check boxes, tables, grids and other basic material components) to the canvas, and then personalizing the content components to achieve different functions in different scenarios. The parser is responsible for parsing the page description json produced 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, and completes the assembly and rendering of the page content components according to the described layout.

[0026] At present, the mainstream low-code development platforms in the market (such as low code and vForm) are basically extended fields or custom form components of data-driven models. Through complex and diverse configuration items, rich personalized customization and js enhancement capability configuration can be performed on the page. However, various low-code platform products currently have various defects:

[0027] 1. It is not possible to better integrate with the existing platform and to perform secondary configuration upgrades on the original functional modules.

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

[0029] 3. Unable to perform button permission control.

[0030] In addition, most ToB management platforms are almost all in the top-down query style, with add, delete, modify and query functions. Such projects have a large number of repeated developments of similar logic, resulting in a large amount of meaningless code accumulation, which seriously affects development efficiency.

[0031] In response to the above problems, the embodiment of the present application combines existing web capabilities and, based on the vue architecture, designs a set of middle-layer low-code development components that can parasitize on host components. The embodiment of the present application includes a designer component and a parser component, which cooperate with each other to realize flexible configuration of form interactions and custom function buttons. At the same time, new functions can be added with zero code, without the need for a release process, and can be configured and refreshed at any time for use.

[0032] Specifically, the technical problem to be solved by the embodiment of the present application is how to design a middle-layer component based on the parser structure of the historical page, support adding custom buttons on the historical page in a configuration manner, and thus realize customized extension of the historical page. The embodiment of the present application designs a parser enhancement component that supports scalability based on the existing upper-lookup and lower-table parser of the historical page of the electronic ticket system, replaces the original page parser component (SearchAndTable) of the historical page with a parser enhancement component (SearchAndTableExtension), and at the same time, embeds the target function page that needs to be configured through iframe in the page designer. By using js native postMessage to encapsulate a set of parent-child page communication protocols, the historical configuration json data of the target page can be obtained in the designer page, so as to configure the custom function button of the function page, query items, table items and button display and sort control, merge the newly generated configuration data with the historical configuration data, and finally store it in the database as a json object to realize the zero-code extension function button of the function page and store configuration records and operation records. The SearchAndTableExtension component loads the configuration json data in the database and dynamically renders the page layout and button function logic.

[0033] The present application embodiment includes the following capabilities:

[0034] 1. Based on the parent-child component communication channel encapsulated by postMessage, the configuration page iframe nests the function page to complete the extraction of the original configuration data of the function page.

[0035] 2. The middle-layer parser component is parasitic in the host function page, completing the upward transmission of the original configuration data of the page and the dynamic rendering of custom buttons / forms.

[0036] 3.Configure custom button business attributes for multiple scenarios.

[0037] 4. Drag and drop to configure tables, form layouts, and control types.

[0038] 5. Rich custom tables, form business attribute configuration and js enhancement capabilities can meet the requirements of complex usage scenarios.

[0039] 6. Control data source binding can realize CRUD (add, check, modify, delete) operations on the list.

[0040] 7. The configuration data is stored in the database. The parser obtains the configuration data through the interface and dynamically updates the rendering page. The development of new features does not require a release process, and the configuration takes effect immediately.

[0041] 8. Using tenant ID as identifier, realize multi-tenant configuration data isolation and realize multi-tenant customization and expansion capabilities.

[0042] In the following, in combination with the accompanying drawings, a method for configuring a custom button on a target function page provided by an embodiment of the present application is described in detail through specific embodiments and application scenarios.

[0043] like Figure 1 As shown, it is a flow chart of a method for configuring a custom button on a target function page provided by an embodiment of the present application, and the method includes the following steps:

[0044] Step 101, sending a communication request to the parasitic middle layer component through the configuration page, receiving the original driver data and tenant information of the target function page from the parasitic middle layer component, the configuration page is embedded in the target function page through iframe, and the parasitic middle layer component is parasitic in the target function page.

[0045] Step 102, obtain the customized button configuration driver data in the customized 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 into the configuration database by tenant isolation.

[0046] Among them, the original driving data includes query items, table items and function buttons; the button configuration driving data includes button basic attributes, button types, button interaction attributes, button API attributes and button callback events, the button types are basic buttons, import / upload buttons, export / download buttons, and 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 original driving data of the target function page from the parasitic middle layer component, a configuration pop-up window can also be popped up through the configuration page to obtain the user-configured query items, table items, display, hiding or sorting information of the original function buttons of the target page and custom button configuration information.

[0048] Correspondingly, the original driving data of the target function page and the button configuration driving data can be compared and assembled according to the latest display and sequence through the configuration page.

[0049] Step 103, hijacking the original driver data and tenant information of the target function page through the parasitic middle layer component, calling the button configuration driver data corresponding to the tenant information from the configuration database, comparing and assembling the original driver data with the button configuration driver data, and dynamically rendering the page layout and button function logic based on the assembled driver data.

[0050] Specifically, it can be determined whether the button is an owned button of the target function page or a custom button. If it is an owned button, the button execution logic 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 to render the custom import file interactive call to the API interface in the configuration according to the configured properties 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 to call the API interface in the configuration to complete the download / export operation; if the custom button is an ordinary button, the interaction mode of the ordinary button is determined. If the interaction mode 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 mode 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 the user calls the API to complete the operation after clicking OK; if the interaction mode is form interaction, the form attributes, custom unit components, API interface and input parameter configuration in the configuration are parsed by the custom form parser, and pop-up windows, drawers, forms and unit components are dynamically rendered. After the user completes the form data entry and clicks Submit, the input parameters are assembled to call the API to complete the operation; determine whether to interact with the form after the button operation is completed, and if a refresh form is configured, execute the form data refresh logic to complete the form's add, delete, modify, query and custom function operations.

[0051] Among them, the target function page contains its own global data, methods, the introduced components for processing the interaction of its own function buttons and the parasitic middle layer components, and the parasitic middle layer components integrate the SearchAndTable component, built-in data processing logic, built-in custom button interaction parser component and custom form parser. The assembled driver data includes the query area, table area and button area. The query area, table area and button area correspond to different regional parser components respectively. Each regional parser component parses the configuration data of its own area, recursively traverses 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 middle layer component, the page resources of the target function page can also be loaded, the page life cycle function can be executed, the original driver data of the target function page can be obtained, and the parasitic middle layer component can be loaded.

[0053] The embodiment of the present application obtains the driving data of the function page through the configuration page, expands and configures the driving data, realizes the integration of the original driving data and the button configuration driving data, and finally realizes the configuration of the custom button on the target function page. It covers a relatively rich range of scenarios, can complete the function expansion under different requirements, and has the advantages of iterative upgrade with zero code, no version release, and configure-is-you-get.

[0054] In the embodiment of the present application, the design principle of the component includes: SearchAndTableExtension.vue (parasitic middle layer component) is parasitic on the specific function page, a set of postMessage-based communication events are encapsulated in the component, and the window of the DOM tree is registered to listen to the messages sent by the parent page; Figure 2 As shown, the configuration page nests a specific function page through iframe, and sends a postMessage communication request to the child page to obtain the source data of the original driver rendering of the child function page; after receiving the request, SearchAndTableExtension.vue will send the driver source data to the parent page through postMessage, so as to transparently transmit the original driver data of the child function page to the configuration end page, so as to perform display and hide control, sorting control, button name modification and other operations on the table list, query conditions and buttons of the function page, and add custom buttons and custom form configurations, perform button actions, API and other related configurations for custom buttons, and save the configuration data in the database. The SearchAndTableExtension.vue component has a built-in judgment logic to determine whether the current host page has been modified by the configuration end. If the conditions are met, the interface will be automatically called to obtain the configuration data in the database, and the configuration data will be assembled with the original driver source data of the host page, and the page will be dynamically rendered according to the assembled source data, so that the iteration function can be realized through page configuration without coding and version release process.

[0055] Among them, the configuration page is embedded in the target function page through iframe. The target function page introduces the SearchAndTableExtension component, and the page configuration data is passed in for data-driven rendering to query the table below. The SearchAndTableExtension component has a built-in ability to register a message channel to the window (postMessage method) to complete the status judgment of the configuration page and the target function page, source data transmission and login tenant information transmission. At the same time, the SearchAndTableExtension component has built-in custom button processing capabilities, data hijacking and data assembly capabilities, and a dynamic form parser (form interaction capabilities in button interaction methods, submitting forms to call business APIs, usually used for adding / editing / viewing / file uploading and other logic). The final configuration data will be stored in the configuration database with the routing address of the target function page and the login tenant id as identifiers, and multi-tenant data isolation will be achieved.

[0056] Specifically, Figure 3 As shown in the figure, the process of customizing buttons on the configuration page includes the following steps:

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

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

[0059] Step 3: After clicking the configuration page button, the configuration end 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 whitelist page, the configuration end sends a postMessage to SearchAndTableExtension to request the original driver data of the target page (query items, table items, function buttons) and new messages of the tenant logged in to the target platform.

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

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

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

[0064] Step 8: The configuration page compares and assembles the original driver data of the target function page and the customized configuration data according to the latest visibility and order, and saves them in the configuration database by tenant isolation.

[0065] In more detail, the detailed description of the button properties that need to be configured when configuring the custom button in step 7 is as follows:

[0066] Location attributes:

[0067] Table toolbar buttons: buttons for operating the entire table, such as adding, batch deleting, importing, exporting, etc.;

[0068] Table row operation buttons: buttons for operating a single row of data in the table, such as edit, delete, view, disable and 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, custom import button (only for whole table import operations);

[0072] Interface type: the classification of the calling interface, options: common interface, upload interface (import, upload operation), download interface (export, download operation);

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

[0074] Interaction mode: click the interactive action on the button page, options: direct execution (click the button to directly call the interface), execution after confirmation (a confirmation dialog pops up, and the interface is called after confirmation), form interaction (a custom form template pops up, and the interface is called after the form data is submitted);

[0075] Form template: The form template that needs to be selected when the interaction mode is form interaction;

[0076] Action to be executed after operation: The action to be executed after the button successfully calls the interface. Optional items: Refresh the table. Confirmation information: The confirmation information when the interaction mode is executed after confirmation.

[0077] Button operation code: the resource identifier of the button when doing button permission control;

[0078] Among them, when designing a custom form interaction button, you need to configure the custom interaction form first. The custom interaction form designer is a form component and layout design implemented based on the draggable canvas implemented by vueDraggable. Push and drag the corresponding basic unit components (input, select, datepicker, textarea, switch, checkbox, radio, inputnumber, etc.) and layout components (row), and design the form interaction page as needed. The basic unit component configuration data of the designer uses the defaultsDeep method of the lodash plug-in to automatically append the default value configuration capability to ensure that the configuration data is always backward compatible during the version upgrade of the designer component and the parser component. Click the basic unit component in the canvas to modify the unit component. Perform property configuration, configure the pop-up window to dynamically render the configuration information of the corresponding component according to the unit component type. After the design is completed, the form configuration data will be stored in the database and a unique form id and form name will be generated. When customizing the form interaction button, select the designed form and bind the form id to the button. When the page parser parses the custom button, it will obtain the form configuration data from the database according to the form id. The custom form parser parses the configuration data to dynamically render the form component and layout. When the form interaction is submitted, the form global Object will be obtained (the form field key will be traversed to assemble the object and injected into the form parser global variable). The form input data is used as the request input parameter, and the button configuration API interface is called 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 As shown, it is a schematic diagram of the form global Object update principle provided in the embodiment of the present application, and the data update technology of the custom pop-up form includes:

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

[0081] 2. After obtaining the configuration driver data, traverse the form field key 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. Traverse the form key field attribute configuration data, assemble the Object according to the key field type, parse the default value in the key description data, set the value of objectKey, if there is no default value, set a null value according to the field 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 JS native new Function (jsString), execute the custom configuration logic, dynamically configure the key corresponding to the value, and inject the assembled Object into the global Object.

[0083] 4. Traverse the component basic configuration data corresponding to the form field key, parse the component type corresponding to the field according to the component type in the description, parse the component rendering business attribute configuration data, set the component custom behavior, parse the layout configuration, and render the form page according to the preset layout.

[0084] 5. Mount the global Object on the corresponding field component according to the corresponding key, use the vue two-way binding principle, monitor value changes, and automatically update the global Object.

[0085] Furthermore, if Figure 5 As shown, it is a schematic diagram of the composition structure of the function page provided in an embodiment of the present application. The function page (xxx.vue) contains its own global data (variables declared in vue data), methods (methods declared in vuemethods, processing the logic of its own function buttons), introduced sub-components childComponents (components that process the interaction of its own function buttons), and at the same time introduces SearchAndTableExtension (parasitic middle layer component). The SearchAndTableExtension component integrates the SearchAndTable component (upper query and lower table parser component, parses configuration data, 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, custom button processing method), built-in custom button interaction parser component, and custom form parser.

[0086] The parser is parasitic on the function page, hijacking the original driver data and tenant information of the function page, and calling the tenant's secondary custom configuration driver data from the database, and assembling the original driver data with the secondary configuration driver data into a new set of driver data. The driver data is divided into three areas: query area, table area, and button area. The three areas correspond to three regional parser components. The three parser components parse the configuration data of their respective areas, recursively traverse the field key to parse the component type / button type, and render the corresponding component / button, such as Figure 6 Then, assemble the query area, table area, and button area to form the overall ToB management page (upper query and lower table), and finally perform CRUD (create: create, read: view, update: update, delete: delete) addition, deletion, modification, query, import, export, and custom button configuration business events on the page according to the user's page operation actions.

[0087] like Figure 7 As shown, the functional page rendering and interaction process provided in the embodiment of the present application includes the following steps:

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

[0089] 2. Load the SearchAndTableExtension component, call the API to pass in the current logged-in tenant information to obtain the driver configuration data saved in the database by the tenant through the custom configuration on the configuration end, compare the page's own driver configuration data with the secondary configured driver data, splice and sort, assemble a new driver configuration data, and pass the configuration data to the SearchAndTableExtension component to render the upper and lower tables and buttons.

[0090] 3. Click the button to determine whether it is a button owned by xxx.vue or a custom button configured in the second time. If it is a button owned by xxx.vue, execute the button execution logic owned by the xxx.vue page, 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 ordinary button). The upload / import button has a unique upload / import form parser. According to the configured properties, it renders the custom import file interaction and calls the API interface in the configuration to complete the upload / import operation. After clicking the download / export button, parse the download / export button configuration data, execute the download / export logic and call the API interface in the configuration to complete the download / Export operation, ordinary buttons have three interaction modes (direct execution, confirmation execution, form interaction). After clicking the direct execution button, the API and input parameter configuration in the configuration are parsed, and the API is directly called to complete the operation. After clicking the confirmation execution button, the confirmation box parser parses the confirmation text, API interface and input parameter configuration in the configuration, renders the confirmation box, and the user clicks OK and then calls the API to complete the operation. After clicking the form interaction button, the custom form parser parses the form attributes, custom unit components, API interface and input parameter configuration in the configuration, dynamically renders pop-up windows / drawers, forms and unit components, and the user clicks Submit after completing the form data entry, assembles the input parameters and calls the API to complete the operation.

[0091] 4. Parse the callback configuration data in the button configuration data after the execution is completed, determine whether to interact with the form after the button operation is completed, and if the refresh form is configured, execute the form data refresh logic to complete the form's add, delete, modify, check, and customize function operations.

[0092] In summary, the embodiment of the present application designs and implements an intermediate layer component that parasitizes on the host page to realize the secondary configuration development capability for the original page. The embodiment of the present application has a set of parent-child page communication capabilities based on postMessage encapsulation to solve the sharing of driver data between the configuration end and the application end. The embodiment of the present application designs and implements a set of new and old driver data comparison, sorting, and assembly algorithms to realize the visibility and sequence control of page tables, query conditions, and buttons. The embodiment of the present application designs and implements a custom form designer based on vueDraggable draggable to realize the one-to-one binding capability between data sources and components. The embodiment of the present application designs and implements a set of complex, multi-scenario-adaptive custom button configuration and parsing capabilities to meet secondary development needs in multiple scenarios. The embodiment of the present application designs and implements a set of form and button js enhancement capabilities to meet requirements such as form custom assignment. The embodiment of the present application designs and implements a set of zero-code secondary development that can be completed by simple dragging and configuration, and there is no need to release a deployment process, and the configuration can be used. The embodiment of the present application designs and implements a multi-tenant configuration isolation solution identified by tenant ID. The function page includes basic functions (original functions of the page) + tenant customized extension functions, so that different tenants have different functions on the same page.

[0093] For the low-code development platform that is popular in the market today, the embodiment of the present application can achieve the secondary configuration development capability for the historical existing functional pages. The low-code platforms that are mature in the market basically complete the construction of a new platform or page from scratch by dragging and configuring, and do not have the ability to transform and upgrade the functional pages of the existing platform. This makes such low-code platforms only be used for the development of new systems, or to reconstruct a new system that is completely consistent with the existing system before continuing the subsequent iterative upgrades, which limits the use scenarios of such platforms. To solve this pain point, the embodiment of the present application encapsulates the parent-child page communication mechanism, and the configuration end uses iframe to nest the application end to complete the configuration end to obtain the application end driver data, thereby performing secondary expansion configuration on the driver data, and completing the integration of the new and old driver configuration data through a series of algorithms such as comparison, sorting, and assembly, and finally realizing the secondary configuration capability of the existing platform. At the same time, the custom button capability of the embodiment of the present application covers a relatively rich scenario, and can complete the functional expansion under different requirements, and can achieve the advantages of iterative upgrade zero code, no version release, and configuration is what you get.

[0094] like Figure 8 FIG. 1 is a schematic diagram of a system for configuring a custom button on a target function page provided by an embodiment of the present application, including:

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

[0096] Among them, the target function page contains its own global data, methods, introduced components for processing the interaction of its own function buttons and the parasitic middle layer component, and the parasitic middle layer component integrates the SearchAndTable component, built-in data processing logic, built-in custom button interaction parser component and custom form parser.

[0097] The acquisition module 820 is used to obtain the customized button configuration driver data in the customized 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 into the configuration database by tenant isolation.

[0098] Among them, 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 basic button, import / upload button, export / download button, and the button interaction attributes are custom direct execution button, custom confirmation box button and custom form interaction button.

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

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

[0101] Among them, the assembled driving 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 regional parser components respectively. Each regional parser component parses the configuration data of its own 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 specifically used to determine whether the button is an owned button of the target function page or a custom button. If it is an owned button, the button execution logic of the target function page is executed, and the rendering interaction page calls 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 to render the custom import file interactive call configuration API interface according to the configured properties 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 to call the API interface in the configuration to complete the download / export operation; if the custom button is an ordinary button, the interaction mode of the ordinary button is determined. If the interaction mode 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 mode 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 the user calls the api to complete the operation after clicking OK; if the interaction mode is form interaction, the form attributes, custom unit components, api interface and input parameter configuration in the configuration are parsed by the custom form parser, and pop-up windows, drawers, forms and unit components are dynamically rendered. After the user completes the form data entry and clicks submit, the input parameters are assembled to call the api to complete the operation; determine whether to interact with the form after the button operation is completed, and if a refresh form is configured, execute the form data refresh logic to complete the form's add, delete, modify, check and custom function operations.

[0103] The system further comprises:

[0104] The configuration module is used to pop up a configuration pop-up window through the configuration page, and obtain the display, hiding or sorting information of the user-configured query items, table items, original function buttons of 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 life cycle function, obtain the original drive data of the target function page, and load the parasitic middle layer component.

[0106] The embodiment of the present application obtains the driving data of the function page through the configuration page, expands and configures the driving data, realizes the integration of the original driving data and the button configuration driving data, and finally realizes the configuration of the custom button on the target function page. It covers a relatively rich range of scenarios, can complete the function expansion under different requirements, and has the advantages of iterative upgrade with zero code, no version release, and configure-is-you-get.

[0107] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, each process of the above-mentioned method embodiment for configuring a custom button on a target function page is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, 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 article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0109] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0110] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for configuring a custom button on a target function page, characterized in that: The following steps are involved: Sending a communication request to the parasitic middle layer component through a configuration page, receiving original driver data and tenant information of the target function page from the parasitic middle layer component, wherein the configuration page is embedded in the target function page through an iframe, and the parasitic middle layer component is parasitic in the target function page; Obtaining customized button configuration driver data in a customized button designer, assembling the original driver data of the target function page and the button configuration driver data through the configuration page, and saving the assembled configuration driver data in a configuration database by tenant isolation; The original driver data and tenant information of the target function page are hijacked through the parasitic middle layer component, and 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 based on the assembled driver data, the page layout and button function logic are dynamically rendered.

2. The method according to claim 1, characterized in that The original drive data includes query items, table items and function buttons; the button configuration drive data includes button basic attributes, button types, button interaction attributes, button API attributes and button callback events, the button types are basic buttons, import / upload buttons, export / download buttons, and the button interaction attributes are custom direct execution buttons, custom confirmation box buttons and custom form interaction buttons; After receiving the original driving data of the target function page from the parasitic middle layer component, the method further includes: A configuration pop-up window is popped up through the configuration page, and the query items, table items, display, hiding or sorting information of the original function buttons of the target page and the custom button configuration information configured by the user are obtained in the configuration pop-up window; The assembling of the original drive data of the target function page and the button configuration drive data through the configuration page specifically includes: The original drive data of the target function page and the button configuration drive data are compared and assembled according to the latest display and sequence through the configuration page.

3. The method according to claim 1, characterized in that The target function page contains its own global data, methods, the introduced components for processing the interaction of its own function buttons and the parasitic middle layer component, wherein the parasitic middle layer component integrates the SearchAndTable component, built-in data processing logic, built-in custom button interaction parser component and custom form parser; Before hijacking the original driver data and tenant information of the target function page through the parasitic middle layer component, the method further includes: The page resources of the target function page are loaded, the page life cycle function is executed, the original driver data of the target function page is acquired, and the parasitic middle layer component is loaded.

4. The method according to claim 1, characterized in that: The dynamic rendering of the page layout and button function logic based on the assembled driving data specifically includes: Determine whether the button is an owned button of the target function page or a custom button. If it is an owned button, execute the button execution logic of the target function page, render the interactive page and call the API; if it is a custom button, determine the type of the custom button. If the custom button is an upload or import button, use the upload or import form parser to render the custom import file interactive call to the API interface in the configuration according to the configured properties to complete the upload or import operation; if the custom button is a download or export button, parse the download or export button configuration data, execute the download or export logic to call the API interface in the configuration to complete the download / export operation; if the custom button is For a normal button, the interaction mode of the normal button is determined. If the interaction mode 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 mode 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 mode is form interaction, the form attributes, custom unit components, API interface and input parameter configuration in the configuration are parsed by the custom form parser, and the pop-up window, drawer, form and unit components are dynamically rendered. After the user completes the form data entry and clicks Submit, the input parameters are assembled to call the API to complete the operation; Determine whether to interact with the form after the button operation is completed, and if the refresh form is configured, execute the form data refresh logic to complete the form's add, delete, modify, query and custom function operations.

5. The method according to claim 1, characterized in that: The assembled driving 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 regional parser components respectively. Each regional parser component parses the configuration data of its own area, recursively traverses the field key to parse the component type or button type, and renders the corresponding component or button.

6. A system for configuring a custom button on a target function page, characterized in that: include: A transceiver module, used to send a communication request to the parasitic middle layer component through a configuration page, and receive the original driver data and tenant information of the target function page from the parasitic middle layer component, wherein the configuration page is embedded in the target function page through an iframe, and the parasitic middle layer component is parasitic in the target function page; An acquisition module, used to acquire the customized button configuration drive data in the customized button designer, assemble the original drive data of the target function page and the button configuration drive data through the configuration page, and save the assembled configuration drive data into the configuration database by tenant isolation; A rendering module is used to hijack the original driver data and tenant information of the target function page through the parasitic middle layer component, call the button configuration driver data corresponding to the tenant information from the configuration database, compare and assemble the original driver data with the button configuration driver data, and dynamically render the page layout and button function logic based on the assembled driver data.

7. The system according to claim 6, characterized in that The original drive data includes query items, table items and function buttons; the button configuration drive data includes button basic attributes, button types, button interaction attributes, button API attributes and button callback events, the button types are basic buttons, import / upload buttons, export / download buttons, and the button interaction attributes are custom direct execution buttons, custom confirmation box buttons and custom form interaction buttons; The system further comprises: A configuration module, which is used to pop up a configuration pop-up window through the configuration page, and obtain the query items, table items, display, hiding or sorting information of the original function buttons of the target page and the custom button configuration information configured by the user in the configuration pop-up window; The acquisition module is specifically used to compare and assemble the original drive data of the target function page and the button configuration drive data according to the latest display and sequence through the configuration page.

8. The system according to claim 6, characterized in that The target function page contains its own global data, methods, the introduced components for processing the interaction of its own function buttons and the parasitic middle layer component, wherein the parasitic middle layer component integrates the SearchAndTable component, built-in data processing logic, built-in custom button interaction parser component and custom form parser; The system further comprises: The loading module is used to load the page resources of the target function page, execute the page life cycle function, obtain the original drive data of the target function page, and load the parasitic middle layer component.

9. The system according to claim 6, characterized in that The rendering module is specifically used to determine whether the button is an owned button of the target function page or a custom button. If it is an owned button, the button execution logic owned by the target function page is executed to render the interactive page and 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 to render the custom import file according to the configured properties and interactively 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, and the download or export logic is executed to call the API interface in the configuration to complete the download / export operation; if the custom button is a normal button, the interaction mode of the normal button is determined. If the interaction mode 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 mode is direct execution, the API and input parameter configuration in the configuration are parsed, and the API is directly called to complete the operation; The method is to confirm the execution, then 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 by the custom form parser, and pop-up windows, drawers, forms and unit components are dynamically rendered. After the user completes the form data entry and clicks submit, the input parameters are assembled to call the api to complete the operation; determine whether to interact with the form after the button operation is completed, and if a refresh table is configured, execute the table data refresh logic to complete the form's add, delete, modify, query and custom function operations.

10. The system according to claim 6, characterized in that The assembled driving 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 regional parser components respectively. Each regional parser component parses the configuration data of its own area, recursively traverses the field key to parse the component type or button type, and renders the corresponding component or button.

Images