React components can be connected to the Appsmith platform using the Widget Development APIs and registered to be available for use by Appsmith developers.
React 组件可以使用 Widget 开发 API 连接到 Appsmith 平台，并注册为 Appsmith 开发人员可用。

• In the above video, we can view a quick walk through on the basics of the Widget Development API.
  在上面的视频中，我们可以快速了解 Widget Development API 的基础知识。
• In the following, we dive into the details of the features available to widget developers.
  在接下来的内容中，我们将深入探讨可供小部件开发人员使用的功能细节。

Appsmith developers: Users who use the Appsmith platform to build apps for their consumers
Appsmith 开发者：使用 Appsmith 平台为其消费者构建应用程序的用户

Widget developers: Developers who create widgets that are then available to the Appsmith developers to use.
小部件开发人员：创建小部件的开发人员，然后可供 Appsmith 开发人员使用。

Entities: Building blocks of an Appsmith application. These are Widgets, Queries, APIs, appsmith.store and JS Objects.
实体：Appsmith 应用程序的构建块。这些是小部件、查询、API、 appsmith.store 和 JS 对象。

Widgets: Entities in the Appsmith Ecosystem. These are UI building blocks, similar to components in any other design system, used in Appsmith to build UI.
小部件：Appsmith 生态系统中的实体。这些是 UI 构建块，类似于任何其他设计系统中的组件，在 Appsmith 中用于构建 UI。

• Appsmith developers can configure widget properties and event handlers while building an Appsmith application.
  Appsmith 开发人员可以在构建 Appsmith 应用程序时配置小部件属性和事件处理程序。
• Widget developers can decide which properties and events are exposed to Appsmith developers via the Appsmith platform.
  小部件开发人员可以通过 Appsmith 平台决定向 Appsmith 开发人员公开哪些属性和事件。

These are the values that define the state of a Widget. If an Appsmith developer expects to update the state of Widget1 using data from other entities, they will need to bind the other entity as a property of Widget1.
这些是定义 Widget 状态的值。如果 Appsmith 开发人员希望使用来自其他实体的数据更新 Widget1 的状态，他们将需要将其他实体作为 Widget1 的属性 bind 。

For example, the Text Widget has a property text. This defines the displayed text in a Text Widget. If an Appsmith developer expects the value from an Input widget to be displayed in Text Widget, the Input widget’s text property would have to be bound with the Text widgets’ text property.
例如，文本小部件具有属性 text 。这定义了文本小部件中显示的文本。如果 Appsmith 开发人员希望从输入小部件中显示的值显示在文本小部件中，则输入小部件的文本属性必须为 bound ，并且文本小部件的 text 属性。

{{ Input1.text }}

Example 例子

bindings.mov

Here, Input1 is the name of the Input widget. text is the property of the Input widget, which contains the value we’d like to display in the Text widget. {{ }} allows the platform to evaluate the content within the brackets. This means that we can write JS code within {{ }} if we’d like to manipulate the entity properties. For example,
这里， Input1 是输入小部件的名称。 text 是输入小部件的属性，其中包含我们想要在文本小部件中显示的值。 {{ }} 允许平台 evaluate 括号内的内容。这意味着我们可以在 {{ }} 中编写 JS 代码，如果我们想要操作实体属性。例如，

{{ Input1.text.toLowerCase() }}

We can read more about bindings here.
我们可以在这里阅读更多关于 bindings 的信息。

Many widgets are interactive. These widget interactions can be used to trigger workflows in web applications. This is what separates static web pages from web applications. For example, a Button widget has an interaction of click. Hence, the onClick action trigger is exposed, whose handler can be configured by the Appsmith developer.
许多小部件是互动的。这些小部件互动可以用来触发网络应用程序中的工作流程。这就是静态网页与网络应用程序的区别。例如，按钮小部件具有点击交互。因此， onClick 操作触发器被暴露出来，其处理程序可以由 Appsmith 开发人员配置。

As an example, let’s say we’d like to show a message at the click of a button widget. We can configure it like so: {{ showAlert("My message", "info") }} Here, showAlert is an action provided by the Appsmith platform. “My Message”, is a string that will be displayed in the alert. “info” is a showAlert specific parameter, which describes the type of message.
作为一个例子，假设我们想要在单击按钮小部件时显示一条消息。我们可以配置它如下： {{ showAlert("My message", "info") }} 这里， showAlert 是由 Appsmith 平台提供的一个动作。“我的消息”是将显示在警报中的字符串。“info”是一个 showAlert 特定参数，描述了消息的类型。

Example 例子

actionTriggers.mov

More on the platform provided action triggers can be found here
有关平台提供的操作触发器的更多信息可以在这里找到

We can also, bind entity properties here. For example,
我们还可以在这里 bind 实体属性。例如，

{{ showAlert(Text1.text, "info") }}

Here, Text1.text is the text property of a Text widget named Text1.
这里， Text1.text 是名为 Text1 的 Text 小部件的 text 属性。

We can also use JS here. {{ showAlert(Text1.text.toLowerCase(), "info") }}
我们也可以在这里使用 JS。 {{ showAlert(Text1.text.toLowerCase(), "info") }}

Now that we’ve seen how an Appsmith developer configures a widget, let's take a look at how a widget is developed
既然我们已经看到了 Appsmith 开发人员如何配置小部件，让我们来看看小部件是如何开发的

Widget code resides in the src/widgets folder of the Appsmith codebase. Each widget has its own folder. As shown in the screenshot above, widget folders contain the following files and folders -
小部件代码位于 Appsmith 代码库的 src/widgets 文件夹中。每个小部件都有自己的文件夹。如上图所示，小部件文件夹包含以下文件和文件夹 -

index.ts

• This file contains the configuration for a widget.
  此文件包含小部件的配置。

constants.tsx

• This file contains the constants which will be used in the widget and its components.
  该文件包含了小部件及其组件中将使用的常量。

icon.svg

• This is the SVG file for the icon representing the widget.
  这是代表小部件的图标的 SVG 文件。

widget/index.tsx

• This contains the widget code, which utilises the Widget development API and lets the Appsmith platform know how to render a widget.
  这包含了小部件代码，它利用小部件开发 API，并让 Appsmith 平台知道如何渲染小部件。

component/index.tsx

• This contains the core component which is rendered on the main canvas.
  这包含了在主画布上呈现的核心组件。

Canvas: A canvas is a special type of widget, in the Appsmith platform, within which widgets can be placed by the Appsmith developer. For example, a Container Widget contains a Canvas Widget, this allows us to place other widgets within a container widget.
画布：画布是 Appsmith 平台中的一种特殊类型的小部件，开发人员可以在其中放置小部件。例如，容器小部件包含一个画布小部件，这使我们可以在容器小部件中放置其他小部件。

canvas.mov 画布.mov

We can generate the folder structure using this command from the CLI -
我们可以使用此命令从 CLI 生成文件夹结构 -

cd app/client && yarn generate:widget

For a widget to be listed by the Appsmith application, it has to be registered with the Appsmith platform. This can be done by calling registerWidget with the details of the widget in the registerWidgets function.
要使小部件在 Appsmith 应用程序中列出，必须在 Appsmith 平台上注册。这可以通过在 registerWidgets 函数中调用 registerWidget 并提供小部件的详细信息来完成。

• registerWidget (required, void): Appsmith utility function used to register a widget.
  registerWidget （必填，空）：Appsmith 实用函数，用于注册小部件。

Arguments: 参数：

• Widget : A class which extends BaseWidget
Widget ：扩展 BaseWidget 的类

• config : Widget configuration (CONFIG described below)
  config ：小部件配置（如下所述 CONFIG ）

This exports the widget configuration as an object usually named CONFIG. The default export has to be the widget itself. An example is shown here
这将小部件配置导出为一个通常命名为 CONFIG 的对象。默认导出必须是小部件本身。这里显示了一个示例。

• type (required): Widget.getWidgetType(), where Widget is the default import from the widget/index.tsx
type （必填）： Widget.getWidgetType() ，其中 Widget 是从 widget/index.tsx 默认导入的
• name (required): The display name of this widget. This can contain spaces.
  name （必填）：此小部件的显示名称。这可以包含空格。
• iconSVG (required): IconSVG, where IconSVG is the import from the ./icon.svg
iconSVG （必填）： IconSVG ，其中 IconSVG 是从 ./icon.svg 导入的
• needsMeta (optional): true, if this widget stores temporary values. For example, a user input value or state.
  needsMeta （可选）： true ，如果此小部件存储临时值。例如，用户输入值或状态。
• isDeprecated (optional): This property indicates whether the widget is deprecated. If set to true, it means the widget is no longer recommended for use, and developers should consider using the specified replacement widget.
  isDeprecated （可选）：此属性指示小部件是否已弃用。如果设置为 true ，则意味着不再建议使用该小部件，开发人员应考虑使用指定的替代小部件。
• isCanvas (optional): true, if this widget contains a Canvas within itself, to allow for widgets to be placed within.
  isCanvas （可选）： true ，如果此小部件本身包含一个画布，以便在其中放置小部件。
• properties (required):  properties （必填）:

    derived: Widget.getDerivedPropertiesMap(),
    default: Widget.getDefaultPropertiesMap(),
    meta: Widget.getMetaPropertiesMap(),
    config: Widget.getPropertyPaneConfig(),

• defaults (required): The default properties of a widget. The platform provided common configurations:
  defaults （必填）：小部件的默认属性。平台提供了常见的配置：

This can have the rest of the default properties for the widget. Any property not defined here will default to undefined. Widget developers are expected to handle these properties accordingly. - rows (required): Number of rows occupied by default by this widget when placed on a canvas. - columns (required): Number of columns occupied by default by this widget when placed on a canvas. - widgetName (required): The auto-generate widget name prefix, for this type of widget. This cannot have spaces or special characters. - version (required): The version number of this type of widget. - blueprint (optional): The blueprint of the widget. - enhancements (optional): Enhancements that can be applied over widgets.
这可以具有小部件的其余默认属性。未在此处定义的任何属性将默认为 undefined 。小部件开发人员应相应处理这些属性。- rows （必填）：放置在画布上时此小部件默认占用的行数。- columns （必填）：放置在画布上时此小部件默认占用的列数。- widgetName （必填）：此类型小部件的自动生成小部件名称前缀。不能包含空格或特殊字符。- version （必填）：此类型小部件的版本号。- blueprint （可选）：小部件的蓝图。- enhancements （可选）：可应用于小部件的增强功能。

• All configurations can affect how the widget behaves. Misconfiguration can cause errors.
  所有配置都可以影响小部件的行为。配置错误可能会导致错误。
• Some constants and types are provided by the Appsmith platform. These can be imported from src/WidgetsProvider/constants. See more
  Appsmith 平台提供了一些常量和类型。这些可以从 src/WidgetsProvider/constants 导入。查看更多
• blueprint and enhancements are powerful features that can be used to create complex widgets. We have more information here.
  blueprint 和 enhancements 是强大的功能，可用于创建复杂的小部件。我们这里有更多信息。

The widget code must be all available in the widget folder. index.tsx should export the class which extends BaseWidget.
小部件代码必须全部在 widget 文件夹中可用。 index.tsx 应该导出扩展 BaseWidget 的类。

• getPropertyPaneConfig (required, [PropertyPaneConfig[]](#property-pane-configuration)): returns the property pane configuration
  getPropertyPaneConfig （必填， [PropertyPaneConfig[]](#property-pane-configuration) ）：返回属性窗格配置
• getPropertyPaneContentConfig (required, [PropertyPaneConfig[]](#property-pane-content-configuration)): returns the property pane content configuration
  getPropertyPaneContentConfig （必填， [PropertyPaneConfig[]](#property-pane-content-configuration) ）：返回属性窗格内容配置
• getPropertyPaneStyleConfig (required, [PropertyPaneConfig[]](#property-pane-style-configuration)): returns the property pane style configuration
  getPropertyPaneStyleConfig （必填， [PropertyPaneConfig[]](#property-pane-style-configuration) ）：返回属性窗格样式配置
• getDerivedPropertiesMap (optional, DerivedPropertiesMap): returns the map of properties which can be derived from other properties. We can see more details here
  getDerivedPropertiesMap （可选，DerivedPropertiesMap）：返回可以从其他属性派生的属性映射。我们可以在这里看到更多细节。
• getDefaultPropertiesMap (optional, object): returns the list of properties which by default takes the value of a default property
  getDefaultPropertiesMap （可选，对象）：返回默认情况下取默认属性值的属性列表
• getMetaPropertiesMap (optional, object): returns the properties which will be considered and stored as meta properties.
  getMetaPropertiesMap （可选，对象）：返回将被视为元属性并存储的属性。
• getWidgetType (required, string): returns a unique type for the widget.
  getWidgetType （必填，字符串）：返回小部件的唯一类型。

• executeAction (void): Executes an action. Typically, used to call the configured action triggers. Arguments:
  executeAction （void）：执行一个动作。通常用于调用配置的动作触发器。参数：

  • triggerPayload ExecuteTriggerPayload Note: undefined or null actions throws an error.
    triggerPayload ExecuteTriggerPayload 注意： undefined 或 null 操作会抛出错误。

• disableDrag (void): Prevents the widget from being dragged in the canvas. For example, the Table Widget disables widget drag when re-ordering columns using header drag. This allows for widgets to implement features without conflicting with the platform features.
  disableDrag （void）：防止小部件在画布中被拖动。例如，表格小部件在使用标题拖动重新排序列时禁用小部件拖动。这样可以使小部件实现功能而不会与平台功能冲突。

  • disable Argument which disables drag when true, enables when false.
    disable 参数在 true 时禁用拖动， false 时启用。

• updateWidgetProperty (void): Updates a single widget property
  updateWidgetProperty （void）：更新单个小部件属性

  • propertyPath: Path of the property to update
    propertyPath ：要更新的属性路径
  • propertyValue: Value to be set
    propertyValue ：要设置的值

• deleteWidgetProperty (void): Deletes a particular widget property
  deleteWidgetProperty （void）：删除特定的小部件属性

• batchUpdateProperty (void): Updates multiple properties. Arguments:
  batchUpdateProperty （void）：更新多个属性。参数：

  • updates: Argument type BatchUpdatePropertyPayload
    updates ：参数类型 BatchUpdatePropertyPayload
  • shouldReplay (boolean): If false, it will not be considered as a state to which an Appsmith developer can undo (cmd+z or ctrl+z). Default true.
    shouldReplay （布尔值）：如果 false ，则不会被视为 Appsmith 开发人员可以 undo （ cmd+z 或 ctrl+z ）的状态。默认 true 。

• resetChildMetaProperty (void): Resets all meta properties of children of this widget. Arguments:
  resetChildMetaProperty （void）：重置此小部件子级的所有元属性。参数：

  • widgetId: Current widgetId  widgetId ：当前 widgetId

• updateWidgetMetaProperty (void): Different from updateWidgetProperty, these updates are not persisted across refreshes. Meta properties are transient properties, typically, user input. Arguments:
  updateWidgetMetaProperty （void）：与 updateWidgetProperty 不同，这些更新不会在刷新后保留。元属性是瞬态属性，通常是用户输入。参数：

  • propertyPath (any, required): Property path to update
    propertyPath （任何，必需）：要更新的属性路径
  • propertyValue (any, required): Value of the property.
    propertyValue （任意，必填）：属性的值。
  • actionExecution (DebouncedExecuteActionPayload, optional): Action if any to execute along with property update,
    actionExecution （DebouncedExecuteActionPayload，可选）：与属性更新一起执行的任何操作

• getPageView (ReactNode, required ): Enhanced version of React.render. This should return the React component which needs to render on the canvas.
  getPageView （ReactNode，必需）：React.render 的增强版本。应返回需要在画布上渲染的 React 组件。

Derived properties are the ones that are computed from other properties of the widget. For example, the isValid property of a Rich Text Editor Widget can be computed using the isRequired and text properties. This widget’s text should be invalid if the widget is configured to require a value, and the text is empty. A simple JS conditional can help us assign a value to the isValid property.
派生属性是从小部件的其他属性计算出来的属性。例如，富文本编辑器小部件的 isValid 属性可以使用 isRequired 和 text 属性计算。如果小部件被配置为需要值，并且文本为空，则此小部件的文本应为无效。简单的 JS 条件可以帮助我们为 isValid 属性赋值。

{{ this.isRequired ? this.text && this.text.length : true }}

In this example, we have derived a new property from two (isRequired, text) existing properties.
在这个例子中，我们从两个现有属性（isRequired，text）中推导出了一个新属性。

Note: this keyword is the widget’s context. In this case, the Rich Text Editor Widget.
注意： this 关键字是小部件的上下文。在这种情况下，是富文本编辑器小部件。

Using the described mechanism, getDerivedPropertiesMap should return an object where the keys are the derived property names, and the values are strings with JS bindings to compute the derived property value.
使用所描述的机制， getDerivedPropertiesMap 应返回一个对象，其中键是派生属性名称，值是带有 JS 绑定的字符串，用于计算派生属性值。

Default properties are maps that define the default (configured in property panes) values of other properties. For example, in a Rich Text Editor Widget, the text property contains the user input content. However, it can also be configured to have a default starting value from the property pane. The property which is configured in the property pane is called defaultText. By using the getDefaultPropertiesMap API, widget developers can define how text gets its default value.
默认属性是定义其他属性的默认（在属性窗格中配置）值的映射。例如，在富文本编辑器小部件中， text 属性包含用户输入内容。但也可以配置为从属性窗格中具有默认起始值。在属性窗格中配置的属性称为 defaultText 。通过使用 getDefaultPropertiesMap API，小部件开发人员可以定义 text 如何获取其默认值。

  static getDefaultPropertiesMap(): Record<string, string> {
    return {
      text: "defaultText",
    };
  }

Note: When a new value of defaultText is provided, it overrides the text value.
注意：当提供一个新的 defaultText 值时，它会覆盖 text 的值。

Meta properties are properties whose values are transient and not persisted in the application. For example, the user-provided content (text property) in the Rich Text Editor Widget is not persisted. However, this content is stored in memory and can be used in bindings.
元属性是其值是瞬时的，不会在应用程序中持久化的属性。例如，富文本编辑器小部件中的用户提供的内容（文本属性）不会被持久化。但是，这些内容会被存储在内存中，并可以在绑定中使用。

We can configure these using the getMetaPropertiesMap API.
我们可以使用 getMetaPropertiesMap API 进行配置。

  static getMetaPropertiesMap(): Record<string, any> {
    return {
      text: undefined,
    };
  }

Note: The values provided must be undefined if this property is also used in other APIs like getDerivedPropertiesMap
注意：如果此属性也用于其他 API（如 getDerivedPropertiesMap ），则提供的值必须为 undefined

Property pane configuration defines the order of property controls, their validations, grouping, types, etc.
属性窗格配置定义了属性控件的顺序、验证、分组、类型等。

The type is `Array``.
类型是`Array`。

Example: 示例：

Property pane content configuration defines the settings related to the content and functionality of the widget, including the order of property controls, their validations, grouping, types, etc.
属性窗格内容配置定义了与小部件的内容和功能相关的设置，包括属性控件的顺序、验证、分组、类型等。

The type is `Array``.
类型是`Array`。

Example: 示例：

Property pane style configuration defines the settings related to the appearance and styling of the widget, including the order of property controls, their validations, grouping, types, etc.
属性窗格样式配置定义了与小部件外观和样式相关的设置，包括属性控件的顺序、验证、分组、类型等。

The type is `Array``.
类型是`Array`。

Example: 示例：

This object defines sections in the property pane.
此对象定义属性窗格中的部分。

• sectionName (required, string): Display name of the section
  sectionName （必填，字符串）：部分的显示名称

• children (required, PropertyPaneConfig[]): Usually, a list of property controls to show in this section. See PropertyPaneControlConfig
  children （必填， PropertyPaneConfig[] ）：通常，在此部分显示的属性控件列表。请参阅 PropertyPaneControlConfig

• hidden (optional, boolean): A function that defines if this section is hidden. Arguments: - props: The current widget properties
  hidden （可选，布尔值）：定义此部分是否隐藏的函数。参数：- props ：当前小部件属性

• propertyPath: The path relative to the widget to this section. If not in a panel, this is usually the widget itself.
  propertyPath ：相对于小部件到此部分的路径。如果不在面板中，通常是小部件本身。

This object defines the property control’s configurations
此对象定义了属性控件的配置

• label (required, string): Name of the property displayed to the Appsmith developer - propertyName (required, string): Property key with which to associate the value.
  label （必填，字符串）：显示给 Appsmith 开发者的属性名称 - propertyName （必填，字符串）：要关联值的属性键。

• helpText (optional, string): A description to help the Appsmith developer understand the property better. Shows up in a tooltip when hovering over the label.
  helpText （可选，字符串）：一个描述，帮助 Appsmith 开发者更好地理解属性。当鼠标悬停在标签上时显示在工具提示中。

• isJSconvertible (optional, boolean): Is the Appsmith developer allowed to use the JS button to allow bindings for this property.
  isJSconvertible （可选，布尔值）：Appsmith 开发者是否允许使用 JS 按钮为此属性添加绑定。

• controlType (required, ControlType): Type of the control.
  controlType （必填，控件类型）：控件的类型。

• panelConfig: (optional, PanelConfig: Does this property open a panel? If so, panel configurations must be defined here.
  panelConfig ：（可选，PanelConfig：此属性是否打开面板？如果是，则必须在此定义面板配置。

• isBindProperty (required, boolean): Can this property’s value be defined using bindings by an Appsmith developer
  isBindProperty （必填，布尔值）：Appsmith 开发人员是否可以使用绑定来定义此属性的值

• isTriggerProperty (required, boolean): true if this is an event handler that can trigger actions
  isTriggerProperty （必填，布尔值）：如果这是一个可以触发操作的事件处理程序，则为 true

• updateHook (optional, Array<{propertyPath: string; propertyValue: any}> | undefined): This function is used to define any other properties which need to be updated when this property is updated. This function executes before the new property value is stored and evaluated. All property updates returned from this function will be applied simultaneously along with the original property update.
  updateHook （可选， Array<{propertyPath: string; propertyValue: any}> | undefined ）：此功能用于定义在更新此属性时需要更新的任何其他属性。此功能在新属性值存储和评估之前执行。从此功能返回的所有属性更新将与原始属性更新同时应用。

  Arguments 论点

  • props (any): The widget’s properties.
    props （任何）：小部件的属性。

  • propertyName (string): The path to the widget property
    propertyName （字符串）：小部件属性的路径

  • propertyValue (any): The new value of the property the Appsmith developer is trying to apply. - The return value should be an array of objects or undefined. The keys of the object are described below.
    propertyValue （任何）：Appsmith 开发者试图应用的属性的新值。- 返回值应该是对象数组或 undefined 。对象的键如下所述。

  Return 返回

  • Type: Array<{propertyPath: string; propertyValue: any}> | undefined 类型: Array<{propertyPath: string; propertyValue: any}> | undefined

  • propertyPath: Path to the property which needs to be updated
    propertyPath ：需要更新的属性路径

  • propertyValue: Value of the property which needs to be updated.
    propertyValue ：需要更新的属性值。

• hidden (optional, boolean): A function that returns true if this property should be hidden.
  hidden （可选，布尔值）：如果应隐藏此属性，则返回 true 的函数。

  Arguments: 参数：

  • props: The current widget properties
    props ：当前小部件属性

  • propertyPath: The path relative to the widget to this property.
    propertyPath ：相对于小部件到此属性的路径。

• additionalAutoComplete (optional, nested object): A function that returns additional entries for the autocomplete in this property.
  additionalAutoComplete （可选，嵌套对象）：返回此属性自动完成的附加条目的函数。

  Arguments: 参数：

  • props: Current widget properties
    props ：当前小部件属性

  Return 返回

  • Type: Record<string, Record<string, unknown>> 类型: Record<string, Record<string, unknown>>

  • This returns an object which has keywords as keys and an object as value, whose keys will be used for auto-complete.
    这将返回一个对象，该对象的关键字作为键，值为对象，其键将用于自动完成。

• dependencies (required for updateHook and hidden, string[]): This lists the property paths which will be needed for computations in the hidden and updateHook functions. This is an optimisation that allows for a small subset of widget properties to be used for computations.
  dependencies （ updateHook 和 hidden 所需，字符串[]）：列出了在 hidden 和 updateHook 函数中进行计算所需的属性路径。这是一种优化，允许仅使用小部分小部件属性进行计算。

• validation (required, ValidationConfig): The configuration which defines how to validate this property.
  validation （必填，ValidationConfig）：定义如何验证此属性的配置。

• customJSControl (optional, ControlType): If we have a special control which we would like to show in place of the standard INPUT control.
  customJSControl （可选，控件类型）：如果我们有一个特殊的控件，我们想要显示在标准 INPUT 控件的位置。

This configuration helps in defining the details of properties shown in a panel.
此配置有助于定义面板中显示的属性细节。

• editableTitle (required, boolean): It defines if the title of the panel is editable.
  editableTitle （必填，布尔值）：它定义了面板标题是否可编辑。
• titlePropertyName (required, string): It defines the root path to the properties within the panel.
  titlePropertyName （必填，字符串）：它定义了面板内属性的根路径。
• children (required, PropertyPaneConfig[]): It configures the sections and controls show within the panel.
  children （必填，PropertyPaneConfig[]）：配置在面板内显示的部分和控件。
• [updateHook](#propertypanecontrolconfig)Example  [updateHook](#propertypanecontrolconfig) 例子

Properties can be required to be validated when an Appsmith developer is allowed to use bindings. It helps maintain the integrity of widgets. Widget developers can expect validated properties when validations are provided.
属性可以在允许 Appsmith 开发人员使用绑定时进行验证。这有助于维护小部件的完整性。当提供验证时，小部件开发人员可以期望验证属性。

• type (required, ValidationTypes): The type of validation to be performed.
  type （必填，ValidationTypes）：要执行的验证类型。

• params (required for some validation types, ValidationConfigParams): Parameters provided to help with the validation.
  params （某些验证类型所需，ValidationConfigParams）：提供的参数以帮助进行验证。

  • min(optional, number): Used to specify a minimum value for ValidationTypes.NUMBER
min （可选，数字）：用于指定 ValidationTypes.NUMBER 的最小值
  • max(optional, number): Used to specify a maximum value for ValidationTypes.NUMBER
max （可选，数字）：用于指定 ValidationTypes.NUMBER 的最大值
  • natural(optional, number): Used to validate a number as a natural number. Used with ValidationTypes.NUMBER
natural （可选，数字）：用于验证数字是否为自然数。与 ValidationTypes.NUMBER 一起使用
  • default(optional, unknown): Used to provide a default value to an invalid or undefined property value.
    default （可选，未知）：用于为无效或 undefined 属性值提供默认值。
  • unique(optional, boolean | string[]): Used to specify the paths in the property which need to be unique. See example.
    unique （可选，布尔值 | 字符串[]）：用于指定属性中需要唯一的路径。请参见示例。
  • required(optional, boolean): Specifies if the value of this property, is mandatory for the widget to function correctly.
    required （可选，布尔值）：指定此属性的值是否对小部件的正确功能是必需的。
  • regex(optional, RegExp): Regex to match text value in ValidationTypes.TEXT
regex （可选，RegExp）：用于匹配 ValidationTypes.TEXT 中文本值的正则表达式
  • allowedKeys(optional, Array<Record<string, unknown>>): Array of configurations for the allowed keys in ValidationTypes.OBJECT.
    allowedKeys （可选，Array>）： ValidationTypes.OBJECT 中允许键的配置数组。
    • name(required, string): Name of the key
      name （必填，字符串）：键的名称
    • type(required, ValidationTypes): The type of validation for the value of this key
      type （必填，ValidationTypes）：此键值的验证类型
    • params(optional, ValidationConfigParams): Parameters provided to help with the validation
      params （可选，ValidationConfigParams）：提供的参数，用于帮助验证
  • allowedValues(optional, unknown[]): An array containing the set of allowed values for ValidationTypes.ARRAY
allowedValues （可选，未知）：包含 ValidationTypes.ARRAY 允许值集合的数组
  • children(optional, ValidationConfig): Validation configuration for entries in ValidationTypes.OBJECT_ARRAY
children （可选，ValidationConfig）： ValidationTypes.OBJECT_ARRAY 中条目的验证配置
  • fn(optional, (value: unknown, props: any, _?: any, moment?: any) => ValidationResponse): The function used to validation in ValidationTypes.FUNCTION
fn （可选， (value: unknown, props: any, _?: any, moment?: any) => ValidationResponse ）：用于在 ValidationTypes.FUNCTION 中进行验证的函数
    • Arguments 论点
      • value(unknown): The current value of the property to validate
        value （未知）：要验证的属性的当前值
      • props(any): The properties of the current widget
        props （任何）：当前小部件的属性
      • _: The lodash library utility
        _ ：lodash 库实用程序
      • moment: The momentjs library utility
        moment ：momentjs 库实用程序
    • Return value  返回值
      • ValidationResponse: A specific format that the Appsmith platform uses to understand validation results.
        验证响应：Appsmith 平台用于理解验证结果的特定格式。
        • isValid(required, boolean): Specifies if the property value is valid
          isValid （必填，布尔值）：指定属性值是否有效
        • parsed(required, unknown): The value after validation. This could be the default or the original value or a formatted version of the original value.
          parsed （必填，未知）：验证后的值。这可能是默认值、原始值或原始值的格式化版本。
        • messages(optional, string[]): An array of messages used to describe how the validation has failed. This helps Appsmith developers identify and fix issues in property configurations
          messages （可选，字符串[]）：用于描述验证失败原因的消息数组。这有助于 Appsmith 开发人员识别和修复属性配置中的问题。
  • expected (required for ValidationTypes.FUNCTION, CodeEditorExpected): A structure that describes the expected type, example and autocomplete data type.
    expected （ ValidationTypes.FUNCTION 所需，CodeEditorExpected）：描述预期类型、示例和自动完成数据类型的结构。
    • type(required, string): The type of the property to be shown to the Appsmith developer
      type （必填，字符串）：要显示给 Appsmith 开发人员的属性类型
    • example(required, ExpectedValueExample): An example of the value expected for the property.
      example （必填，ExpectedValueExample）：属性期望值的示例。
    • autocompleteDataType(required, AutocompleteDataType): Describes how the auto-complete feature for this property should work.
      autocompleteDataType （必填，自动完成数据类型）：描述此属性的自动完成功能应如何工作。
  • strict (optional, boolean): If set to true, values in ValidationTypes.TEXT, will not be cast to a string before validating.
    strict （可选，布尔值）：如果设置为 true ，则在验证之前， ValidationTypes.TEXT 中的值不会被转换为字符串。
  • ignoreCase (optional, boolean): If set to true, keys will be matched while ignoring case in allowedKeys parameter of the ValidationTypes.OBJECT.
    ignoreCase （可选，布尔值）：如果设置为 true ，则在 ValidationTypes.OBJECT 的 allowedKeys 参数中匹配键时将忽略大小写。
  • ValidationTypes.FUNCTION is meant to be used sparingly, and as an escape hatch when the other ValidationTypes do not fit the requirements of validation.
    ValidationTypes.FUNCTION 应该节制使用，并且作为一种紧急逃生通道，当其他 ValidationTypes 不符合验证要求时。
  • All validations return a ValidationResponse
    所有验证返回 ValidationResponse

A widget blueprint is a configuration that can allow widget developers to describe the structure of widget's children and any modifications to their properties. This structure will be applied with this type of widget is placed on the canvas by an Appsmith developer.
一个小部件蓝图是一种配置，可以让小部件开发人员描述小部件子级的结构以及对其属性的任何修改。当 Appsmith 开发人员将此类型的小部件放置在画布上时，将应用此结构。

For example, a Form Widget by default contains a canvas within which there is a text widget and button widgets. This is configured in the widget configuration here
例如，默认情况下，表单小部件包含一个画布，其中包含文本小部件和按钮小部件。这是在此处的小部件配置中配置的。

A widget blueprint configuration can have two parts. view and operations
一个小部件蓝图配置可以有两个部分。 view 和 operations

Widget Blueprint View 小部件蓝图视图

view : (optional, Array<{ type, size, position, props }> ) This describes the children and their structure
view ：（可选， Array<{ type, size, position, props }> ）这描述了孩子们及其结构

• type (required, WidgetType): The type of the child widget.
  type （必填，WidgetType）：子部件的类型。
• size (required, { rows: number, cols: number }): The number of rows and columns to be occupied by the child widget.
  size （必填， { rows: number, cols: number } ）：子组件将占用的行数和列数。
• position (required, { top: number, left: number } ): The row (top) and column(left) offset of the child widget
  position （必填， { top: number, left: number } ）：子部件的行（顶部）和列（左侧）偏移量
• props (optional, Record<string, unknown>): List of properties to be applied to the child widget as default.
  props （可选， Record<string, unknown> ）：要应用于子部件的默认属性列表。

Note: If this child needs to have its own children created at the same time, the blueprint of such a child needs to be provided as the blueprint property in the props.
注意：如果这个孩子需要同时创建自己的孩子，那么这个孩子的蓝图需要作为 props 中的 blueprint 属性提供。

Note: As described earlier, only the widgets of type CANVAS_WIDGET can have children. Therefore, in most scenarios, the blueprint configuration will start with the CANVAS_WIDGET, other nested children will be configured in the blueprint prop of the CANVAS_WIDGET. Please refer to the Form Widget example.
注意：如前所述，只有类型为 CANVAS_WIDGET 的小部件才能有子元素。因此，在大多数情况下，蓝图配置将从 CANVAS_WIDGET 开始，其他嵌套子元素将在 CANVAS_WIDGET 的 blueprint 属性中配置。请参考表单小部件示例。

Note: The size of a CANVAS_WIDGET need not be defined, as this type of widget works independently and occupies all of the parent's size. As a result, the position will also be {top: 0, left:0}
注意： CANVAS_WIDGET 的 size 不需要定义，因为这种小部件可以独立工作并占据父级大小的所有空间。因此， position 也将是 {top: 0, left:0} 。

Widget Blueprint Operations
小部件蓝图操作

operations: (optional, BlueprintOperation[]) An array of operations to be performed to modify properties of the widget before they're shown on the canvas.
operations ：（可选， BlueprintOperation[] ）要执行的操作数组，用于在小部件显示在画布上之前修改其属性。

Type of BlueprintOperation:  BlueprintOperation 的类型：

{ type: BlueprintOperationType, fn: BlueprintOperationFunction }

BlueprintOperationType: These operations can be of three types:
BlueprintOperationType ：这些操作可以分为三种类型：

• The operations to modify properties BlueprintOperationTypes.MODIFY_PROPS
  修改属性的操作 BlueprintOperationTypes.MODIFY_PROPS
• The operations to add action trigger handlers BlueprintOperationTypes.ADD_ACTION
  添加操作触发处理程序的操作 BlueprintOperationTypes.ADD_ACTION
• The operations to be performed, if a child widget is added to this widget. BlueprintOperationTypes.CHILD_OPERATIONS
  要执行的操作，如果将子部件添加到此部件。 BlueprintOperationTypes.CHILD_OPERATIONS

• Some widgets like the Table Widget, which have complex derived properties use a separate file for the derived property functions. parseDerivedProperties.ts helps load the functions from the associated derived.js as strings to use in binding the derived properties.
  有些小部件，比如表格小部件，具有复杂的派生属性，使用单独的文件来存储派生属性函数。 parseDerivedProperties.ts 帮助从关联的 derived.js 中加载函数作为字符串，以便在绑定派生属性时使用。

• Some constants are available via the Appsmith platform for widget developers to use in building widgets, which use some standard components. source code
  一些常量可通过 Appsmith 平台供小部件开发人员使用，用于构建使用一些标准组件的小部件。源代码

• Similar to component constants, widget constants are separate sets of constants that widget developers can utilise.
  类似于组件常量，小部件常量是小部件开发人员可以利用的独立常量集。
• source1
• source2

• The Appsmith platform also provides utility functions to help develop widgets. source code
  Appsmith 平台还提供实用功能来帮助开发小部件。源代码

• A nice post by Hetu from the Appsmith team describes the evaluation logic in detail.
  Appsmith 团队的 Hetu 发布了一篇很好的帖子，详细描述了评估逻辑。

• componentDidMount and componentDidUpdate lifecycle methods are discouraged when creating a widget. Other methods like getDerivedPropertiesMap can help derive related values before render.
  componentDidMount 和 componentDidUpdate 生命周期方法在创建小部件时不鼓励使用。其他方法如 getDerivedPropertiesMap 可以帮助在渲染之前派生相关值。
• Lazy loading a widget’s component is a good idea in many scenarios, especially, if a new library is being used to create this component.
  懒加载小部件的组件在许多情况下都是一个好主意，特别是当使用新库来创建这个组件时。