A low-code property editor registration method
By defining the description structure of the attribute panel in the low-code development tool and establishing the mapping relationship between the attribute model and the page model attribute, the problem of poor scalability of the attribute panel in the existing technology is solved, and dynamic creation of the attribute panel and flexibility are improved. .
Patent Information
- Application Number
- CN202411345769.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-26
- Publication Date
- 2025-02-14
- Estimated Expiration
- 2044-09-26
AI Technical Summary
In the existing low-code development tools, the page editor attribute panel has poor scalability. Users need to modify the underlying code to add new attributes or adjust the rules for linkage between attributes, resulting in increased system complexity and reduced flexibility and openness.
By defining the description structure of the attribute panel, using JSON format to describe the basic and advanced information of each attribute, it supports adding and modifying attribute configuration without changing the underlying code. Establish a mapping relationship between the attribute model and the page model attributes, and support dynamic adjustments at runtime. Based on these description structures and mapping relationships, a property configuration object is created, and the visibility and read-only nature of properties are dynamically controlled by loading the property value converter, creating property value access objects, and parsing object expressions.
It realizes dynamic creation of attribute panels, so that users can expand attributes and adjust attribute linkage rules without modifying code, improving the openness and flexibility of attribute panels, and simplifying management and maintenance.
Smart Images

Figure CN118860357B_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of computer technology, and specifically relates to a low-code property editor registration method. Background Art
[0002] With the development of information technology, low-code development platforms are favored by more and more enterprises because of their ability to quickly build applications. Such platforms usually provide a visual interface, allowing non-professional programmers to design and deploy applications through simple drag-and-drop operations. As an important part of the low-code development platform, the main function of the page editor is to describe the structure of the page through models and use the property panel to edit the properties of these models, thereby realizing visual page construction.
[0003] The page editors in existing low-code development tools mainly use a fixed editor mode, which presets fixed editors for different models and their attributes, and implements the linkage between attributes through pre-written code. Although this method simplifies the page construction process to a certain extent, its inherent limitation is poor scalability. Specifically, if you need to add new attributes or change the rules for the linkage between attributes, you must modify the underlying code, which undoubtedly increases the complexity of the system, reduces the flexibility and openness of the system, and makes it difficult for the page editor to adapt to changing needs. Summary of the invention
[0004] This application provides a low-code property editor registration method to solve the problem of poor scalability of page editor property panels in existing low-code development tools.
[0005] The technical solution adopted in this application is:
[0006] The present application embodiment provides a low-code property editor registration method, including:
[0007] Define the description structure of the property panel, describe the basic and advanced information of each property in JSON format, and support adding and modifying property configuration without changing the underlying code;
[0008] Establishing a mapping relationship between the attribute model and the page model attributes, supporting dynamic adjustment at runtime, so that users can generate corresponding attribute panels according to different page models;
[0009] Based on the description structure of the property panel, a property configuration object is created by obtaining the default value of the page model property and traversing the description structure, and the property description in the reference structure is identified and loaded, and the visibility and read-only of the property are dynamically controlled by loading the property value converter, creating the property value access object and parsing the object expression;
[0010] The generated property configuration object is converted into a UI component and rendered into the property panel, ensuring that the property panel can display the value, visibility and read-only status of the property according to the configuration and interact with the page model in real time.
[0011] A low-code property editor registration method provided by the present application also includes the following additional technical features: the description structure of the property panel is defined, and the basic information and advanced information of each property are described in JSON format, supporting the addition and modification of property configurations without changing the underlying code. Specifically, the basic information and advanced information of each property of the description structure of the property panel are described in a JSON structure, and the basic information includes the property name, type, description and default value, and the advanced information includes display conditions, read-only conditions and value conversion logic; the extensible description structure supports adding new properties or modifying the configuration of existing properties without modifying the underlying code.
[0012] According to an embodiment of the present application, the mapping relationship between the attribute model and the page model attribute is established to support dynamic adjustment at runtime, so that the user can generate the corresponding attribute panel according to different page models, specifically:
[0013] Each attribute in the page model can correspond to one of the attribute models, and the mapping relationship supports dynamic adjustment during operation. Users can generate corresponding attribute panels based on different page models. This enables users to adapt to page models in different scenarios by configuring mapping rules without changing the underlying implementation, thereby generating attribute panels that meet the needs.
[0014] According to an embodiment of the present application, the description structure based on the property panel creates a property configuration object by obtaining the default value of the page model property and traversing the description structure, and at the same time identifies and loads the property description in the reference structure, and dynamically controls the visibility and read-only nature of the property by loading the property value converter, creating the property value access object and parsing the object expression, specifically:
[0015] Initialize each property configuration object according to the default value defined in the description structure;
[0016] Identify the reference structure, load the reference type property panel description structure and create the property configuration object; when there is a reference in the property description structure, the program will identify the reference and load the corresponding property structure. The reference points to a predefined property structure or template to avoid repeated definitions. Use the service to parse the current reference, then integrate the reference properties and the original structure through functions, and check and integrate the information in the original architecture to ensure the integrity and consistency of the property configuration.
[0017] According to one embodiment of the present application, the loading of the attribute value converter is specifically: the attribute configuration object loads the corresponding value converter to correctly convert the attribute value between the model and the attribute panel, first traverses the attribute description structure, extracts the configuration information of each attribute, and initializes the configuration object.
[0018] According to one embodiment of the present application, the creation of the attribute value access object is specifically as follows: the creation of the attribute value access object is responsible for obtaining and setting the attribute value, that is, loading the corresponding value converter for each attribute and associating it with the value converter method, converting the value in the panel into a format accepted by the model, and updating the attribute value in the model.
[0019] According to an embodiment of the present application, the parsed object expression is specifically as follows: the structure of the object expression is a conditional expression tree defined in JSON format, which determines whether a certain attribute is visible and read-only under preset conditions by specifying the relationship between the attribute and its value;
[0020] The parse execution object expression method interprets the execution object expression and returns the evaluation result.
[0021] The behavior of the property in the property panel is determined by the returned evaluation result.
[0022] According to an embodiment of the present application, the structure of the object expression includes: basic conditions, compound conditions and nested conditions; the basic condition is to check whether the value of a certain attribute is equal to, different from, contains or does not contain a certain value;
[0023] The compound condition is to combine multiple conditions using logical operators;
[0024] The nested conditions form more complex conditional logic; the nested structure is used to describe the parent-child relationship and the relationship between sibling nodes.
[0025] A computer-readable storage medium having a program stored thereon, which, when executed by a processor, implements the steps in the low-code property editor registration method.
[0026] An electronic device includes a memory, a processor, and a program stored in the memory and executable on the processor. When the processor executes the program, the steps in the low-code property editor registration method are implemented.
[0027] Due to the adoption of the above technical solution, the beneficial effects achieved by this application are as follows:
[0028] This application solves the problem of poor scalability of page editor attribute panels in existing low-code development tools by defining the attribute panel description structure, establishing a mapping relationship between attribute models and page model attributes, creating attribute configuration objects, and rendering attribute configuration objects as attribute panels. It implements dynamic creation of attribute panels and allows users to extend attributes and adjust attribute linkage rules without modifying code. This application not only improves the openness and flexibility of attribute panels, but also simplifies the management and maintenance of attribute panels. BRIEF DESCRIPTION OF THE DRAWINGS
[0029] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:
[0030] Figure 1 A flowchart of a low-code property editor registration method provided for an embodiment of the present application. DETAILED DESCRIPTION
[0031] In order to more clearly illustrate the overall concept of the present application, a detailed description is given below in an illustrative manner in conjunction with the accompanying drawings.
[0032] In the following description, many specific details are set forth to facilitate a full understanding of the present application. However, the present application may also be implemented in other ways different from those described herein. Therefore, the protection scope of the present application is not limited by the specific embodiments disclosed below. It should be noted that the embodiments of the present application and the features in each embodiment may be combined with each other without conflict.
[0033] In the present application, unless otherwise clearly specified and limited, a first feature "above" or "below" a second feature may be that the first and second features are in direct contact, or the first and second features are in indirect contact through an intermediate medium. In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in an appropriate manner in any one or more embodiments or examples.
[0034] Example 1
[0035] like Figure 1 As shown, a low-code property editor registration method includes:
[0036] Step S100, define the description structure of the property panel, describe the basic information and advanced information of each property in JSON format, and support adding and modifying property configuration without changing the underlying code.
[0037] Specifically, defining the property panel description structure means creating a flexible configuration template that describes each property in the property editor in detail. This description structure uses JSON format and covers basic information about the property (such as name, type, default value) as well as more advanced information (such as display conditions, read-only conditions, value conversion logic, etc.). This description structure is extensible, which means that new properties can be added or the configuration of existing properties can be modified without modifying the underlying code. In this way, the description structure of the property panel provides enough flexibility and support to enable the system to be extended and adjusted without directly changing the code.
[0038] For example, when defining the description structure of the property panel, you can use JSON format to describe the basic and advanced information of each property, so that you can add or modify property configurations without changing the underlying code. Taking a checkbox component as an example, its JSON structure may contain the following content:
[0039] {
[0040] "title": "checkbox", / / component name
[0041] "description": "A Farris Component", / / Component description
[0042] "type": "object", / / component type
[0043] "categories": {
[0044] "basic": { / / Basic properties
[0045] "description": "Basic information", / / Property description
[0046] "title": "Basic Information", / / attribute name
[0047] "properties": {
[0048] "id": { / / component id attribute
[0049] "description": "Component ID", / / Property description
[0050] "title": "Logo", / / attribute name
[0051] "type": "string", / / attribute type
[0052] "readonly": true / / Read-only
[0053] },
[0054] "type": { / / component type attribute
[0055] "description": "Component type", / / property description
[0056] "title": "Control Type", / / attribute name
[0057] "type": "select" / / Select type
[0058] }
[0059] }
[0060] }
[0061] }
[0062] }
[0063] The above JSON structure describes the properties of a checkbox component, including basic information such as the component name, description, type, and more advanced information such as whether the property is read-only. With such a description structure, when you need to add new properties to the property panel or adjust existing property configurations, you only need to modify the JSON file without touching the underlying code, thereby improving the flexibility and scalability of the property panel.
[0064] Furthermore, the richness of the description structure can be enhanced: in addition to basic information, more advanced attributes can be added, such as attribute validation rules, internationalization support, etc., to make the description structure more comprehensive and able to adapt to more diverse application scenarios.
[0065] Furthermore, performance can be optimized: research on how to increase the speed of generating attribute configuration objects and reduce the computational overhead when creating and updating attribute configurations to improve the system's responsiveness.
[0066] Furthermore, security can be enhanced: security verification of attribute configuration can be implemented to prevent illegal data input, ensure that only legal data can affect the model, and improve the security of the system.
[0067] Furthermore, version control can be added: develop a version control system to manage the change history of property configuration, allowing users to track and roll back configurations to any historical version for easy management and auditing.
[0068] Furthermore, you can also integrate automated testing: create automated test cases for property configuration to ensure that the property panel functions normally after each configuration modification, reducing the workload of manual testing.
[0069] Furthermore, the user interaction experience can be enhanced: the user interface design of the property panel can be improved to make it more intuitive and easy to use. At the same time, auxiliary functions such as help documents and sample codes can be integrated to help users better understand and use property configurations.
[0070] Furthermore, it can also support multi-language environments: Taking into account internationalization requirements, it can support multi-language environments so that the property panel can automatically switch the display language according to the user's language preference.
[0071] Furthermore, a plug-in ecosystem can be developed: third-party developers are encouraged to develop plug-ins for the property panel to enrich its functionality, form an open ecosystem, and promote community sharing and innovation.
[0072] Furthermore, you can also implement continuous integration and continuous deployment (CI / CD): establish a continuous integration and continuous deployment process to ensure that each time the property configuration is updated, it can be automatically tested, packaged and deployed to speed up development iterations.
[0073] Step S200: Establish a mapping relationship between the attribute model and the page model attributes, support dynamic adjustment during runtime, and enable the user to generate the corresponding attribute panel according to different page models.
[0074] Specifically, establishing a mapping relationship between the attribute model and the page model attributes means creating a mechanism within the system so that each attribute in the page model can correspond to an attribute model, and the two are linked through this mapping relationship. This mechanism supports dynamic adjustment of mapping rules at runtime, allowing users to generate corresponding attribute panels based on different page models. This flexibility allows users to adapt to page models in different scenarios by adjusting the mapping configuration without changing the underlying code, and then generate attribute panels that meet their needs.
[0075] For example, to establish a mapping relationship between the property model and the page model property, suppose there is a page model that contains a property called showReminder, which is displayed as "Enable Reminder" in the property panel. This mapping relationship allows the property panel to dynamically adjust according to the specific situation of the page model.
[0076] For example, in the page model, showReminder may be a Boolean variable that controls whether to display reminder information on the interface. Through the mapping relationship, a switch component can be provided for the showReminder property in the property panel, and the user can directly enable or disable the function in the property panel. The mapping relationship is not limited to one-to-one attribute mapping, but can also be a complex mapping of many-to-one or many-to-many, supporting dynamic adjustment of mapping rules according to user operations at runtime.
[0077] In this way, users can generate corresponding property panel configurations according to the characteristics of different page models. For example, if the page model needs to display a checkbox component, and the component has basic attributes such as id and type, then these attributes can be mapped to the corresponding controls on the property panel through mapping relationships, and users can easily configure the values of these attributes in the property panel without directly writing code.
[0078] Furthermore, the intelligence of mapping rules can be enhanced: more intelligent algorithms can be developed to automatically detect the mapping relationship between page models and attribute models, reduce the workload of manual configuration, and automatically handle complex mapping logic.
[0079] Furthermore, the complexity of the mapping rules can be increased: the mapping rules can be allowed to support more complex conditional judgment logic, such as dynamically adjusting the mapping rules based on user roles, time conditions or other contextual information, thereby achieving more personalized page display.
[0080] Furthermore, a user-friendly configuration interface can be developed: a visual configuration interface is provided so that users can more intuitively manage the mapping relationship between attributes and page models in a graphical way, thereby reducing the difficulty of configuration.
[0081] Furthermore, a version control system can be integrated: a version control mechanism can be introduced to record historical changes in mapping relationships, facilitate tracking of modification records, support version rollback functions, and ensure data security.
[0082] Furthermore, data validation can be strengthened: when establishing and adjusting mapping relationships, a data validation mechanism can be added to ensure the consistency and correctness of attribute configuration and prevent problems caused by configuration errors.
[0083] Furthermore, cross-platform compatibility can be achieved: ensuring that the mapping relationship establishment and adjustment mechanism can maintain consistent performance on different operating systems and devices, thereby enhancing the system's cross-platform capabilities.
[0084] Furthermore, a plug-in extension mechanism can be developed: allowing third-party plug-ins to extend the management function of mapping relationships, add new mapping types or provide more advanced mapping options, enriching the functionality and scalability of the system.
[0085] Step S300, based on the description structure of the property panel, create a property configuration object by obtaining the default value of the page model property and traversing the description structure, and at the same time identify and load the property description in the reference structure, and dynamically control the visibility and read-only nature of the property by loading the property value converter, creating the property value access object and parsing the object expression.
[0086] Specifically, based on the description structure of the property panel, the system first obtains the default value of the page model attribute and traverses the entire description structure to create a property configuration object. During the traversal process, if a reference structure (i.e., the $ref field) is encountered, the system will identify these references and load the referenced property description structure to ensure that all associated property information is correctly integrated into the current property configuration object. Next, the system will load the property value converter to provide the necessary conversion logic for the property configuration object to ensure that the correct property value format is passed between the property panel and the page model. In addition, the system creates a property value access object to achieve the acquisition and setting of property values, and adapts these values to the format required by the page model. Finally, the system dynamically controls the visibility and read-only nature of the property by parsing the object expression, and adjusts the display status of the property in the property panel in real time according to the result of the conditional expression.
[0087] For example, the process of creating a property configuration object based on the structure described in the property panel can be explained with a specific example. Suppose there is a form component, and its basic properties, such as ID, type, etc., need to be configured in the property panel.
[0088] First, the system obtains the default values of the attributes related to the form component in the page model. For example, the default value of id may be "form1" and the default value of type may be "text".
[0089] Then, the system traverses the property panel description structure and creates a property configuration object. Here, it is assumed that the JSON structure of the form component is as follows:
[0090] {
[0091] "title": "Form Component",
[0092] "description": "Component for handling form data",
[0093] "type": "object",
[0094] "properties": {
[0095] "id": {
[0096] "description": "Unique identifier for the component",
[0097] "title": "Identifier",
[0098] "type": "string",
[0099] "readonly": true
[0100] },
[0101] "type": {
[0102] "description": "Type of input field",
[0103] "title": "Input Type",
[0104] "type": "select",
[0105] "options": ["text", "number", "date"]
[0106] }
[0107] }
[0108] }
[0109] When creating a configuration object, if there is a reference ($ref field) in the JSON structure, the system will identify and load the property description in the referenced structure. For example, the type field may reference another description structure that defines all possible input types. The system will resolve the reference and integrate the relevant information into the current property configuration object.
[0110] Next, the system loads the attribute value converter, which is to ensure that the attribute value is correctly converted between the attribute panel and the page model. For example, if the type attribute is displayed as a drop-down list in the attribute panel and stored as a string in the page model, a converter is needed to handle this conversion.
[0111] Then, create an attribute value access object to get and set the attribute value. For example, if the user selects "number" as the type in the attribute panel, the attribute value access object will convert this value into a format acceptable to the page model and update the type attribute value in the model.
[0112] Finally, dynamically control the visibility and read-only of properties by parsing object expressions. For example, if the id property is set to read-only, this can be achieved through the object expression {"readonly": true}. Similarly, if a certain condition is met, some properties can be made invisible, such as {"visible": false}.
[0113] Through the above steps, the system can create a suitable property configuration object according to the property panel description structure and dynamically adjust the property behavior as needed.
[0114] Furthermore, the details of the description structure can be enhanced: more details can be added to the description structure, such as attribute validation rules, internationalization support, etc., to make the description structure more comprehensive and adaptable to more application scenarios.
[0115] Furthermore, loading performance can be optimized: studying how to load attribute descriptions in reference structures faster, reducing loading time and improving system response speed.
[0116] Furthermore, security checks can be strengthened: security checks on attribute value converters and attribute value access objects can be added to prevent the input of illegal data and ensure the security of the system.
[0117] Furthermore, you can also add version control functions: develop a version control system to record the change history of property configurations, making it easier for users to track and roll back to previous configuration versions.
[0118] Furthermore, you can also introduce automated testing: create automated test cases for property configuration to ensure that the property panel still functions normally after each configuration modification.
[0119] Furthermore, data persistence can be enhanced: a data persistence mechanism can be developed to ensure that attribute configurations can be stably stored and restored after the system is restarted, thereby ensuring data consistency and persistence.
[0120] Furthermore, API support can be provided: providing API interfaces for external systems, allowing other systems to obtain or modify attribute configurations through APIs, and enhancing system interoperability.
[0121] Furthermore, the error handling mechanism can be enhanced: a more complete error handling mechanism can be added so that when errors occur in attribute configuration, they can be discovered in time and clear error prompts can be given to help users solve the problems.
[0122] Step S400: Convert the generated property configuration object into a UI component and render it into the property panel, ensuring that the property panel can display the value, visibility and read-only status of the property according to the configuration and interact with the page model in real time.
[0123] Specifically, the process of converting the generated property configuration object into a UI component and rendering it into the property panel means mapping each property defined in the property configuration object to a specific user interface element, such as an input box, a drop-down list, or a switch. This process ensures that the property panel can display the properties according to the property value, visibility, and read-only state set in the property configuration object, and that these properties can interact with the page model in real time.
[0124] Specifically, when a property configuration object is created, the system generates corresponding UI components based on the information in the configuration object and renders these components into the property panel. For example, if the configuration object indicates that a property should be displayed as a text input box and the property is read-only, you will see a non-editable text box in the property panel, showing the current value of the property. Similarly, if the configuration indicates that a property should be visible, the property will be displayed in the property panel; conversely, if the configuration indicates that the property should be invisible, the property will not appear in the panel.
[0125] In addition, these UI components not only display the current state of the property, but also allow users to interact. For example, users can modify the value of non-read-only properties, and these changes will be reflected in the page model in real time. In this way, the property panel becomes a bridge between user operations and the page model, allowing users to adjust properties through an intuitive interface, and these adjustments will take effect immediately and affect the state of the page model.
[0126] For example, the process of converting the generated property configuration object into a UI component and rendering it into the property panel can be explained with a specific example. Suppose we have a checkbox component whose property configuration is described by a JSON structure, which contains some basic information such as the component identifier (id), type (type), etc.
[0127] When the property configuration object is created, the system will generate corresponding UI components based on the information in this object and render them into the property panel. For example, for a checkbox component, its JSON structure may be as follows:
[0128] {
[0129] "title": "checkbox",
[0130] "description": "A Farris Component",
[0131] "type": "object",
[0132] "properties": {
[0133] "id": {
[0134] "description": "Component identification",
[0135] "title": "Logo",
[0136] "type": "string",
[0137] "readonly": true
[0138] },
[0139] "type": {
[0140] "description": "Component type",
[0141] "title": "Control Type",
[0142] "type": "select",
[0143] "options": ["checkbox"]
[0144] }
[0145] }
[0146] }
[0147] In this example, the id attribute is set to read-only, while the type attribute is a selectable type, which only limits the checkbox option.
[0148] Next, the system will create the corresponding UI component based on the above JSON structure. For the id attribute, since it is read-only, the system will render a read-only input box in the property panel to display the current value of the attribute, which cannot be modified by the user. For the type attribute, the system will generate a drop-down list (select), and the user can select a value from the provided options.
[0149] After these UI components are rendered on the property panel, users can see the relevant properties of the checkbox component and edit them according to the actual situation. For example, users can select the value of the type attribute, but cannot modify the id attribute. All changes will be reflected in the page model in real time, that is, every valid input on the property panel will synchronously update the value of the corresponding attribute in the page model.
[0150] In this way, the property panel not only shows the current state of the property (such as value, visibility, and read-only), but also allows users to interact with it, thus achieving real-time interaction between the property panel and the page model.
[0151] In this way, the property panel becomes a key component that dynamically displays property status and communicates bidirectionally with the page model, greatly improving the flexibility and ease of use of low-code development tools.
[0152] Furthermore, the style and interaction of UI components can be enhanced: richer style options and interactive effects such as color, font, animation, etc. can be provided for UI components to improve user experience.
[0153] Furthermore, a data validation mechanism may be added: a data validation mechanism may be added to the property panel to ensure that the data input by the user complies with a predetermined format and range, thereby improving data quality.
[0154] Furthermore, it is also possible to support multi-language and internationalization: enable the property panel to support multi-language environments, allowing users to select different language displays as needed to meet globalization needs.
[0155] Furthermore, a version control system can be integrated: a version control mechanism can be introduced for property configuration to record the change history of each property configuration, making it easier for users to track and roll back to the previous configuration version.
[0156] A low-code property editor registration method provided by the present application also includes the following additional technical features: the description structure of the property panel is defined, and the basic information and advanced information of each property are described in JSON format, supporting the addition and modification of property configurations without changing the underlying code. Specifically, the basic information and advanced information of each property of the description structure of the property panel are described in a JSON structure, and the basic information includes the property name, type, description and default value, and the advanced information includes display conditions, read-only conditions and value conversion logic; the extensible description structure supports adding new properties or modifying the configuration of existing properties without modifying the underlying code.
[0157] Specifically, defining the description structure of the property panel means creating a flexible configuration template that describes the basic and advanced information of each property in the property editor in detail. This description structure organizes information in JSON format to ensure that the basic information (such as property name, type, description, and default value) and advanced information (such as display conditions, read-only conditions, and value conversion logic) of each property are accurately recorded.
[0158] Specifically, the basic information of each attribute is described through a JSON structure, including but not limited to the name, type, description, and default value of the attribute. For example, an attribute may be described as an input box of string type with a default value of "default_value". Advanced information involves more complex logic, such as under what conditions the attribute is displayed, when it is in a read-only state, and how to convert attribute values in different scenarios. For example, an attribute may only be displayed when the value of another attribute is a specific value, or become read-only when certain conditions are met.
[0159] Through this extensible description structure, the system supports adding new properties or modifying the configuration of existing properties without modifying the underlying code. This means that when you need to add new properties or change the behavior of existing properties, you only need to update the JSON description file to implement the required functional changes without directly modifying the underlying code logic. This design approach greatly improves the flexibility and maintainability of the property panel.
[0160] In some embodiments of the present application, the mapping relationship between the attribute model and the page model attribute is established to support dynamic adjustment at runtime, so that the user can generate the corresponding attribute panel according to different page models, specifically:
[0161] Each attribute in the page model can correspond to one of the attribute models, and the mapping relationship supports dynamic adjustment during operation. Users can generate corresponding attribute panels based on different page models. This enables users to adapt to page models in different scenarios by configuring mapping rules without changing the underlying implementation, thereby generating attribute panels that meet the needs.
[0162] Specifically, establishing a mapping relationship between the attribute model and the page model attributes means creating a mechanism within the system so that each attribute in the page model can correspond to an attribute model. Through this mapping relationship, the system supports dynamic adjustment of mapping rules during operation, allowing users to generate corresponding attribute panels based on different page models.
[0163] Specifically, when a user needs to configure a property panel for a page model, the system will map the properties in the page model to the corresponding property model according to the pre-set mapping rules. This mapping relationship is dynamic and can be adjusted at runtime, which means that even during system operation, users can adjust the mapping method of properties as needed to adapt to different page models.
[0164] For example, the showReminder property in the page model is displayed as "Enable reminder" in the property panel. Users can generate corresponding property panels based on different page models without modifying the underlying implementation logic. Users only need to configure the mapping rules, and the system can dynamically generate property panels that meet the requirements based on these rules.
[0165] In this way, users can adapt to page models in different scenarios through simple configuration without changing the underlying implementation of the system, and then generate property panels that meet their needs. This method not only simplifies the management and maintenance of the property panel, but also enhances the flexibility and scalability of the system.
[0166] In some embodiments of the present application, the description structure based on the property panel creates a property configuration object by obtaining the default value of the page model property and traversing the description structure, and identifies and loads the property description in the reference structure, and dynamically controls the visibility and read-only of the property by loading the property value converter, creating the property value access object and parsing the object expression, specifically:
[0167] Initialize each property configuration object according to the default value defined in the description structure;
[0168] Identify the reference structure, load the reference type property panel description structure and create the property configuration object; when there is a reference in the property description structure, the program will identify the reference and load the corresponding property structure. The reference points to a predefined property structure or template to avoid repeated definitions. Use the service to parse the current reference, then integrate the reference properties and the original structure through functions, and check and integrate the information in the original architecture to ensure the integrity and consistency of the property configuration.
[0169] Specifically, the description structure based on the property panel creates a property configuration object by obtaining the default value of the page model property and traversing the description structure, and identifies and loads the property description in the reference structure, and dynamically controls the visibility and read-only of the property by loading the property value converter, creating the property value access object and parsing the object expression, specifically:
[0170] Initialize each property configuration object according to the default value defined in the description structure;
[0171] Identify the reference structure, load the reference type property panel description structure and create the property configuration object; when there is a reference in the property description structure, the program will identify the reference and load the corresponding property structure. The reference points to a predefined property structure or template to avoid repeated definitions. Use the service to parse the current reference, then integrate the reference properties and the original structure through functions, and check and integrate the information in the original architecture to ensure the integrity and consistency of the property configuration.
[0172] In some embodiments of the present application, the loading of the attribute value converter is specifically: the attribute configuration object loads the corresponding value converter to correctly convert the attribute value between the model and the attribute panel, first traverses the attribute description structure, extracts the configuration information of each attribute, and initializes the configuration object.
[0173] Specifically,
[0174] The process of loading the attribute value converter means that the attribute configuration object needs to load the corresponding value converter to ensure the correct conversion of attribute values between the model and the attribute panel. The specific steps are as follows:
[0175] First, the system will traverse the attribute description structure, extract the configuration information of each attribute, and initialize the configuration object accordingly. This means that the system will read each attribute defined in the description structure one by one, and create the corresponding attribute configuration object based on the configuration information of these attributes (such as type, default value, etc.).
[0176] When the configuration object is initialized, the system loads the corresponding value converter for each property configuration. The role of the value converter is to convert the property value between the model and the property panel to ensure that the property value is in the correct format when it is transmitted between the two. For example, if a date picker is displayed in the property panel and a date string is stored in the page model, a value converter is required to ensure that the property value is in the correct format when displayed and saved.
[0177] Through this process, the system ensures that the property configuration object has the correct value conversion logic so that the property values can be correctly exchanged between the model and the property panel.
[0178] In some embodiments of the present application, the creation of the attribute value access object is specifically as follows: the creation of the attribute value access object is responsible for obtaining and setting the attribute value, that is, loading the corresponding value converter for each attribute and associating it with the value converter method, converting the value in the panel into a format accepted by the model, and updating the attribute value in the model.
[0179] Specifically, creating an attribute value access object means creating a dedicated object for each attribute, which is responsible for getting and setting the attribute value. Specifically, this involves loading the corresponding value converter for each attribute and associating these value converters with the attribute value access object, thereby ensuring that the value in the property panel can be converted into a format acceptable to the model, and finally updating the attribute value in the model.
[0180] For example, when a user changes the value of a property in the property panel, the property value access object captures the change and uses the corresponding value converter to convert the value in the panel into a data format suitable for the page model. Then, the property value access object applies the converted value to the page model and updates the corresponding property value in the model.
[0181] This process ensures that user input on the property panel is correctly reflected in the page model, maintaining data consistency and integrity. In this way, the system can automatically handle the conversion logic of property values in different environments, so that user interface operations can seamlessly affect the model state.
[0182] In some embodiments of the present application, the parsed object expression is specifically as follows: the structure of the object expression is a conditional expression tree defined in JSON format, which determines whether a certain attribute is visible and read-only under preset conditions by specifying the relationship between the attribute and its value;
[0183] The parse execution object expression method interprets the execution object expression and returns the evaluation result.
[0184] The behavior of the property in the property panel is determined by the returned evaluation result.
[0185] In some embodiments of the present application, the structure of the object expression includes: basic conditions, compound conditions and nested conditions; the basic condition is to check whether the value of a certain attribute is equal to, different from, contains or does not contain a certain value;
[0186] The compound condition is to combine multiple conditions using logical operators;
[0187] The nested conditions form more complex conditional logic; the nested structure is used to describe the parent-child relationship and the relationship between sibling nodes.
[0188] Specifically, the structure of an object expression is a conditional expression tree defined in JSON format, which determines whether a property is visible or read-only under preset conditions by specifying the relationship between the property and its value. Object expressions consist of basic conditions, compound conditions, and nested conditions, and each condition has its specific application scenario.
[0189] Basic conditions
[0190] Basic conditions are used to check if the value of a property is equal to, different from, contains, or does not contain a value. For example, if the value of the property controlSource is equal to light, then the expression {"controlSource": {"equal": "light"}} is true.
[0191] Compound conditions
[0192] Compound conditions combine multiple conditions using the logical operators allOf and anyOf. For example, when all the conditions in allOf are met, the overall condition is true; and when any of the conditions in anyOf are met, the overall condition is also true. Compound conditions allow more complex logical combinations, such as:
[0193] {
[0194] "allOf": [
[0195] {
[0196] "sibling": 0,
[0197] "parent": {
[0198] "f-page-main": true
[0199] }
[0200] } ]
[0202] }
[0203] This expression means that the overall condition is true when all sub-conditions are met.
[0204] {
[0205] "anyOf": [
[0206] {
[0207] "children": {
[0208] "length": {
[0209] "equal": 1
[0210] }
[0211] }
[0212] },
[0213] {
[0214] "children": {
[0215] "scroll-spy": false
[0216] }
[0217] } ]
[0219] }
[0220] This expression means that as long as at least one of the sub-conditions is met, the overall condition is true.
[0221] Nested Conditions
[0222] Nested conditions allow for more complex conditional logic, and are often used to describe parent-child relationships, relationships between sibling nodes, etc. Nested conditions can contain other conditional expressions to form multi-level logical judgments.
[0223] Interpret and execute object expressions
[0224] The methods that interpret and execute object expressions are responsible for parsing and evaluating these expressions to determine the state of a property in the panel (such as visibility, read-only, etc.). This process can be divided into several steps: parsing expressions, evaluating conditions, and returning results.
[0225] Parsing Expressions
[0226] Parsing expressions reads the structure of an object expression and identifies the basic and compound conditions in it. For basic conditions, the system checks whether the current value of the property meets the condition defined in the expression; for compound conditions, the system recursively parses and evaluates each sub-condition.
[0227] Evaluation conditions
[0228] Evaluation conditions include basic condition evaluation and compound condition evaluation. Basic condition evaluation is to directly compare the current value of the attribute with the condition value in the expression; compound condition evaluation is that the allOf condition requires all sub-conditions to be true, and the anyOf condition only requires at least one sub-condition to be true.
[0229] Return results
[0230] Based on the evaluation result, the system will return a Boolean value indicating whether the condition is met. This Boolean value will determine the state of the property in the property panel, such as whether it is visible or read-only.
[0231] In this way, object expressions can dynamically control the visibility and read-only nature of properties in the Property Panel, allowing the Property Panel to dynamically adjust its behavior based on the context.
[0232] Example 2
[0233] Step 1: Define the property panel description structure.
[0234] Regarding the configuration of the property editor, taking the checkbox component as an example, its JSON structure is:
[0235] {
[0236] / / Component name
[0237] "title": "checkbox",
[0238] / / Component description
[0239] "description": "A Farris Component",
[0240] / / Component type
[0241] "type": "object",
[0242] / / Component classification
[0243] "categories": {
[0244] / / Basic properties
[0245] "basic": {
[0246] / / Property description
[0247] "description": "Basic Infomation",
[0248] / / Property name
[0249] "title": "Basic Information",
[0250] / / Component properties
[0251] "properties": {
[0252] / / Component id attribute
[0253] "id": {
[0254] / / Property description
[0255] "description": "Component identification",
[0256] / / Property name
[0257] "title": "Logo",
[0258] / / Attribute type
[0259] "type": "string",
[0260] / / Is it read-only?
[0261] "readonly": true
[0262] },
[0263] / / Component type attribute
[0264] "type": {
[0265] "description": "Component type",
[0266] "title": "Control Type",
[0267] "type": "select",
[0268] }
[0269] }
[0270] }
[0271] }
[0272] }
[0273] Step 2: Establish the mapping relationship between the attribute model and the page model attributes
[0274] Establish a mapping relationship, each page model attribute corresponds to an attribute model, and link the two through the mapping relationship. For example, the `showReminder` attribute in the page model is displayed as "Enable reminder" in the property panel. Support dynamic adjustment of mapping relationships at runtime.
[0275] Step 3: Create a property configuration object. This mainly includes: a. Get the default value of the model attribute and b. Traverse the property panel description structure to create a property configuration object.
[0276] Wherein, a. Obtaining the default value of the model attribute, that is, initializing each attribute configuration object according to the default value defined in the description structure. The present invention traverses each attribute in the attribute panel one by one through the resolveSchemaWithDefaultValue function and creates a corresponding configuration object for it.
[0277] b. traversing the property panel description structure and creating a property configuration object includes: 1) identifying a reference structure, loading a reference type property panel description structure and 2) creating a property configuration object.
[0278] 1) First, the present invention supports identifying reference structures and loading reference type attribute panel description structures. For reference type attributes, the present invention loads related attribute description structures through a reference mechanism. For example:
[0279] if (propertyCategory.$ref) {
[0280] return tryToResolveReference(categoryId, propertyCategory, rawSchema,schemaService) as ElementPropertyConfig;
[0281] }
[0282] The present invention uses the categoryId parameter to represent the unique identifier of the current property category, which is usually a string used to distinguish different property categories. The description structure of the current property category is represented by propertyCategory, which contains various property definitions and a `$ref` field that points to other property structures. The rawSchema attribute contains all property definitions and configurations of the current component model. `rawSchema` is used to provide context for the reference structure to ensure consistency between attributes. `schemaService` is a service object that provides methods for parsing and loading reference structures. Its main function is to parse the complete structure of the reference based on `$ref` and provide an access interface for the structure.
[0283] The function first checks whether `propertyCategory` contains a `$ref` field. If it does, it means that the property category is a reference type, pointing to a predefined property structure. Get a complete description of the reference structure by calling `schemaService.resolveSchemaByRef`. `schemaService` is the core tool responsible for resolving references. It will load the corresponding property structure according to the location pointed to by `$ref`. Finally, integrate the reference properties and the original structure. The resolved reference structure is further processed by the `getPropertyEntities` method, and the sub-properties in it are also included in the current property configuration object. During this process, the information in the original schema `rawSchema` is also checked and integrated to ensure the integrity and consistency of the property configuration.
[0284] 2) Secondly, create a property configuration object, including three key points: loading the property value converter, creating the property value access object and object expression.
[0285] Among them, loading the attribute value converter means loading the corresponding value converter for the attribute configuration object so as to correctly convert the attribute value between the model and the attribute panel. That is, traversing the attribute description structure, extracting the configuration information of each attribute, and initializing the configuration object.
[0286] Among them, creating an attribute value access object is responsible for getting and setting attribute values, that is, loading the corresponding value converter for each attribute and associating it with the value converter method. Convert the value in the panel to a format acceptable to the model and update the attribute value in the model.
[0287] Among them, the object expression is a mechanism unique to the present invention, which is used to dynamically control the visibility, read-only and other characteristics of the properties in the property panel.
[0288] In the present invention, the structure of an object expression is a conditional expression tree defined in JSON format, which determines whether a property is visible or read-only under preset conditions by specifying the relationship between the property and its value. Common object expression structures include the following forms:
[0289] A. Basic conditions: Check whether the value of an attribute is equal to, different from, contains, or does not contain a certain value. For example:
[0290] {
[0291] "controlSource": {
[0292] "equal": "light"
[0293] }
[0294] }
[0295] This expression means that if the value of the `controlSource` property is equal to `light`, the condition is true.
[0296] B. Compound conditions: Use logical operators `allOf` and `anyOf` to combine multiple conditions. For example:
[0297] {
[0298] "allOf": [
[0299] {
[0300] "sibling": 0,
[0301] "parent": {
[0302] "f-page-main": true
[0303] }
[0304] } ]
[0306] }
[0307] This expression means that when all the conditions in `allOf` are met, the overall condition is true.
[0308] {
[0309] "anyOf": [
[0310] {
[0311] "children": {
[0312] "length": {
[0313] "equal": 1
[0314] }
[0315] }
[0316] },
[0317] {
[0318] "children": {
[0319] "scroll-spy": false
[0320] }
[0321] } ]
[0323] }
[0324] This expression means that as long as one of the conditions in anyOf is met, the overall condition is true.
[0325] C. Nested conditions: Object expressions can be nested to form more complex conditional logic. Nested structures are usually used to describe parent-child relationships, relationships between sibling nodes, etc.
[0326] The methods that interpret and execute object expressions are responsible for parsing and evaluating these expressions to determine the state of a property in the panel (such as visibility, read-only, etc.). This process can be divided into several steps: parsing expressions, evaluating conditions, and returning results.
[0327] Parsing an expression means reading the structure of an object expression and identifying the basic and compound conditions in it. For example, for a basic condition, the system checks whether the current value of the attribute satisfies the condition defined in the expression; for a compound condition, the system recursively parses and evaluates each sub-condition.
[0328] Evaluation conditions include basic condition evaluation and compound condition evaluation. Basic condition evaluation directly compares the current value of the attribute with the condition value in the expression. For example, if the attribute value is `light` and the expression requires `equal:light`, the condition is true. Compound condition evaluation means that the `allOf` condition requires all sub-conditions to be true, and the `anyOf` condition only requires at least one sub-condition to be true.
[0329] Return result means that according to the evaluation result, the system will return a Boolean value to indicate whether the condition is met. This Boolean value will determine the state of the attribute in the panel.
[0330] In actual applications, object expressions can be used to dynamically control the behavior of the property panel. For example, when the value of a certain property changes, object expressions can be used to dynamically display or hide other related properties, or control whether they are editable. Through this mechanism, low-code development tools can provide a more intelligent and dynamic user interface, greatly improving user experience and development efficiency.
[0331] Step 4: Render the property configuration objects into the property panel. That is, convert all generated property configuration objects into actual UI components and render them into the property panel.
[0332] Example 3
[0333] A computer-readable storage medium having a program stored thereon, which, when executed by a processor, implements the steps in the low-code property editor registration method.
[0334] Example 4
[0335] An electronic device includes a memory, a processor, and a program stored in the memory and executable on the processor. When the processor executes the program, the steps in the low-code property editor registration method are implemented.
[0336] Anything not described in this application can be achieved by adopting or drawing on existing technologies.
[0337] The various embodiments in this specification are described in a progressive manner, and the same or similar parts between the various embodiments can be referenced to each other, and each embodiment focuses on the differences from other embodiments.
[0338] The above is only the embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the protection scope of the present application.
Claims
1. A low-code property editor registration method, characterized in that: include: Define the description structure of the property panel, describe the basic and advanced information of each property in JSON format, and support adding and modifying property configuration without changing the underlying code; Establishing a mapping relationship between the attribute model and the page model attributes, supporting dynamic adjustment at runtime, so that users can generate corresponding attribute panels according to different page models; Based on the description structure of the property panel, a property configuration object is created by obtaining the default value of the page model property and traversing the description structure, and the property description in the reference structure is identified and loaded, and the visibility and read-only of the property are dynamically controlled by loading the property value converter, creating the property value access object and parsing the object expression, specifically: initializing each property configuration object according to the default value defined in the description structure; Identify reference structures, load reference type attribute panel description structures, and create attribute configuration objects; when there is a reference in the attribute description structure, the program will identify the reference and load the corresponding attribute structure. The reference points to a predefined attribute structure or template to avoid duplicate definitions. Use services to resolve the current reference, then integrate the reference attributes and the original structure through functions, and check and integrate the information in the original structure to ensure the integrity and consistency of the attribute configuration; The generated property configuration object is converted into a UI component and rendered into the property panel, ensuring that the property panel can display the value, visibility and read-only status of the property according to the configuration and interact with the page model in real time.
2. The method according to claim 1, characterized in that The description structure of the defined property panel describes the basic information and advanced information of each property in JSON format, and supports adding and modifying property configuration without changing the underlying code. Specifically: the basic information and advanced information of each property of the description structure of the property panel are described in a JSON structure, the basic information includes the property name, type, description and default value, and the advanced information includes display conditions, read-only conditions and value conversion logic; the extensible description structure supports adding new properties or modifying the configuration of existing properties without modifying the underlying code.
3. The method according to claim 2, characterized in that The mapping relationship between the attribute model and the page model attributes is established to support dynamic adjustment at runtime, so that the user can generate the corresponding attribute panel according to different page models, specifically: Each attribute in the page model can correspond to one of the attribute models, and the mapping relationship supports dynamic adjustment during operation, and the user can generate the corresponding attribute panel according to different page models; This allows users to adapt to page models in different scenarios by configuring mapping rules without changing the underlying implementation, thereby generating the property panel that meets the requirements.
4. The method according to claim 1, characterized in that: The loading of the attribute value converter is specifically as follows: the attribute configuration object loads the corresponding value converter so as to correctly convert the attribute value between the model and the attribute panel, first traverses the attribute description structure, extracts the configuration information of each attribute, and initializes the configuration object.
5. The method according to claim 1, characterized in that The creation of the attribute value access object is specifically as follows: the creation of the attribute value access object is responsible for obtaining and setting the attribute value, that is, loading the corresponding value converter for each attribute, and associating it with the value converter method, converting the value in the panel into a format accepted by the model, and updating the attribute value in the model.
6. The method according to claim 1, characterized in that The parsed object expression is specifically: the structure of the object expression is a conditional expression tree defined in JSON format, which determines whether a certain attribute is visible and read-only under preset conditions by specifying the relationship between the attribute and its value; By parsing the execution object expression method, the execution object expression is interpreted and the evaluation result is returned; The behavior of the property in the property panel is determined by the returned evaluation result.
7. The method according to claim 6, characterized in that The structure of the object expression includes: basic conditions, compound conditions and nested conditions; the basic condition is to check whether the value of a certain attribute is equal to, different from, contains or does not contain a certain value; The compound condition is to combine multiple conditions using logical operators; The nested conditions form more complex conditional logic; the nested structure is used to describe the parent-child relationship and the relationship between sibling nodes.
8. A computer-readable storage medium having a program stored thereon, characterized in that: When the program is executed by a processor, it implements the steps in a low-code property editor registration method as described in any one of claims 1-7.
9. An electronic device comprising a memory, a processor, and a program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, it implements the steps in a low-code property editor registration method as described in any one of claims 1-7.
Citation Information
Patent Citations
Method and device for visually describing and dynamically controlling interface component attributes
CN117215585A
Cited By
Application log coding method and device and computer readable storage medium
US12517863B2