Define properties

Example

1. Define the properties in the component's specs.js file:

   export default {
     "properties": [{
       "identifier": "temperature",
       "defaultValue": 26,
       "text": "Temperature",
       "type": "text",
     }],
     "services": [],
     "events": []
   };

   A property where the type (type) is text, the Chinese name of the property (text) is Temperature, the default value (defaultValue) is %26;, and the unique component identifier (identifier) is temperature.

2. Develop the render method in the index.tsx entry file:

   render(): JSX.Element {
       const { temperature } = this.props;
       return (
           <div>
               Current temperature is: {temperature}
           </div>
       );
   }

3. Run the following commands to start the component's application:

   cd <project_name>
   # Install dependencies
   bnpm install
   # Start the application
   npm run start

   In the component entry file index.tsx, from this.props, you use the unique identifier identifier to obtain the tempature property value and display it on the page:

   The component preview canvas displays Current temperature is: 26. This confirms that the component successfully retrieved the property value from this.propstemperature and rendered it to the page. In the Style panel on the right, you can configure coordinates, size, angle, component name, visibility, opacity, and the Temperature parameter.

Key concepts

When property settings include the options, visible, or linkage fields, and these fields are passed as a function, the following two terms apply:

• Configured value: The value of a property in its input field when no data source is configured. When using functions for options, visible, or linkage, this value is passed as the props parameter.
• Runtime value: The value a property receives from a configured data source. When using functions for options, visible, or linkage, this value is passed as the propValues parameter.

To pass options, visible, or linkage as a function, use the following format:

function({ props, propValues }) {
  ...
}

For details about the parameters that each function supports, see Property list.

Property list

The properties setting,"properties": [{"props1":"","props12":"",...},{},...], is an array of objects. Each object, {"props1":"","props12":"",...}, defines a single property. The following table lists the configurable fields for each property object.