属性

了解触发器/动作中使用的不同类型的属性

属性用于在动作和触发器中收集用户信息，并显示给用户以供输入。以下是一些常用的属性：

基本属性

这些属性用于收集用户的基本信息。

短文本

该属性用于收集用户的短文本输入。

示例：

Property.ShortText({
  displayName: '名称',
  description: '请输入你的名称',
  required: true,
  defaultValue: '张三',
});

长文本

该属性用于收集用户的长文本输入。

示例：

Property.LongText({
  displayName: '描述',
  description: '请输入描述',
  required: false,
});

复选框

该属性提供一个复选框供用户选择或取消选择。

示例：

Property.Checkbox({
  displayName: '同意条款',
  description: '勾选此框表示同意条款',
  required: true,
  defaultValue: false,
});

Markdown

该属性向用户显示 Markdown 片段，适用于文档或说明。它包含一个 variant 选项来设置 Markdown 样式，使用 MarkdownVariant 枚举：

• BORDERLESS：简约无边框布局。
• INFO：显示信息性消息。
• WARNING：提醒用户注意警告信息。
• TIP：突出显示有用的提示或建议。

variant 的默认值为 INFO。

示例：

Property.MarkDown({
    value: '## 这是一个 markdown 片段',
    variant: MarkdownVariant.WARNING,
}),

日期时间

该属性用于收集用户的日期和时间。

示例：

Property.DateTime({
  displayName: '日期和时间',
  description: '请选择日期和时间',
  required: true,
  defaultValue: '2023-06-09T12:00:00Z',
});

数字

该属性用于收集用户的数字输入。

示例：

Property.Number({
  displayName: '数量',
  description: '请输入一个数字',
  required: true,
});

静态下拉

该属性提供一个包含预定义选项的下拉菜单。

示例：

Property.StaticDropdown({
  displayName: '国家',
  description: '请选择你的国家',
  required: true,
  options: {
    options: [
      {
        label: '选项一',
        value: '1',
      },
      {
        label: '选项二',
        value: '2',
      },
    ],
  },
});

静态多选下拉

该属性提供支持多选的下拉菜单。

示例：

Property.StaticMultiSelectDropdown({
  displayName: '颜色',
  description: '请选择一种或多种颜色',
  required: true,
  options: {
    options: [
      {
        label: '红色',
        value: 'red',
      },
      {
        label: '绿色',
        value: 'green',
      },
      {
        label: '蓝色',
        value: 'blue',
      },
    ],
  },
});

JSON

该属性用于收集用户的 JSON 数据。

示例：

Property.Json({
  displayName: '数据',
  description: '请输入 JSON 数据',
  required: true,
  defaultValue: { key: 'value' },
});

字典

该属性用于收集用户的键值对。

示例：

Property.Object({
  displayName: '选项',
  description: '请输入键值对',
  required: true,
  defaultValue: {
    key1: 'value1',
    key2: 'value2',
  },
});

文件

该属性用于收集用户提供的文件，可以通过 URL 提供或上传文件。

示例：

Property.File({
  displayName: '文件',
  description: '请上传文件',
  required: true,
});

字符串数组

该属性用于收集用户的字符串数组。

示例：

Property.Array({
  displayName: '标签',
  description: '请输入标签',
  required: false,
  defaultValue: ['tag1', 'tag2'],
});

对象数组

该属性用于收集用户的对象数组。

示例：

Property.Array({
  displayName: '字段',
  description: '请输入字段',
  properties: {
    fieldName: Property.ShortText({
      displayName: '字段名称',
      required: true,
    }),
    fieldType: Property.StaticDropdown({
      displayName: '字段类型',
      required: true,
      options: {
        options: [
          { label: 'TEXT', value: 'TEXT' },
          { label: 'NUMBER', value: 'NUMBER' },
        ],
      },
    }),
  },
  required: false,
  defaultValue: [],
});

动态数据属性

这些属性提供更高级的用户输入收集选项。

动态下拉

该属性允许根据用户输入动态加载选项。

示例：

Property.Dropdown({
  displayName: '选项',
  description: '请选择一个选项',
  required: true,
  auth: yourPieceAuth,
  refreshers: ['auth'],
  refreshOnSearch: false,
  options: async ({ auth }, { searchValue }) => {
    // searchValue 仅在 refreshOnSearch 为 true 时生效
    if (!auth) {
      return {
        disabled: true,
      };
    }
    return {
      options: [
        {
          label: '选项一',
          value: '1',
        },
        {
          label: '选项二',
          value: '2',
        },
      ],
    };
  },
});

多选动态下拉

该属性允许从动态加载的选项中进行多选。

示例：

Property.MultiSelectDropdown({
  displayName: '选项',
  description: '请选择一个或多个选项',
  required: true,
  refreshers: ['auth'],
  auth: yourPieceAuth,
  options: async ({ auth }) => {
    if (!auth) {
      return {
        disabled: true,
      };
    }
    return {
      options: [
        {
          label: '选项一',
          value: '1',
        },
        {
          label: '选项二',
          value: '2',
        },
      ],
    };
  },
});

动态属性

该属性用于根据 API 响应或用户输入动态构建表单。

示例：

import {
	httpClient,
	HttpMethod,
} from '@activepieces/pieces-common';


Property.DynamicProperties({
  description: '动态表单',
  displayName: '动态表单',
  required: true,
  refreshers: ['auth'],
  auth: yourPieceAuth,
  props: async ({auth}) => {
    const apiEndpoint = 'https://someapi.com';
    const response = await httpClient.sendRequest<{ values: [string[]][] }>({
        method: HttpMethod.GET,
        url: apiEndpoint ,
        // 你可以将 auth 值添加到请求头中
    });

    const properties = {
      prop1: Property.ShortText({
        displayName: '属性 1',
        description: '请输入属性 1',
        required: true,
      }),
      prop2: Property.Number({
        displayName: '属性 2',
        description: '请输入属性 2',
        required: false,
      }),
    };

    return properties;
  },
});

自定义属性（BETA）

这是一个允许你向前端注入 JS 代码并按需操作 DOM 的属性。在你嵌入 Activepieces 并希望与嵌入的 SaaS 通信时非常有用。 它有一个 code 属性，是一个接受对象参数的函数，该对象具有以下结构：

• 你可以在 code 属性函数的末尾返回一个清理函数，以删除你插入的任何监听器或 HTML 元素（这在开发模式下很重要，组件会挂载两次）。
• 此函数必须是无副作用的，不能从外部包或函数作用域外的变量进行任何导入。
• 引入此属性后，必须将 Piece 的 minimumSupportedRelease 属性设置为至少 0.58.0。

以下是定义此类属性的方法：

 Property.Custom({
      code:(({value,onChange,containerId})=>{
        const container = document.getElementById(containerId);
        const input = document.createElement('input');
        input.classList.add(...['border','border-solid', 'border-border', 'rounded-md']) 
        input.type = 'text';
        input.value = `${value}`;
        input.oninput = (e: Event) => {
          const value = (e.target as HTMLInputElement).value;
          onChange(value);
        }
       container!.appendChild(input);
       const windowCallback = (e:MessageEvent<{type:string,value:string,propertyName:string}>) => {
        if(e.data.type === 'updateInput' && e.data.propertyName === 'YOUR_PROPERTY_NAME'){
          input.value= e.data.value;
          onChange(e.data.value);
        }
       }
       window.addEventListener('message', windowCallback);
        return ()=>{
          window.removeEventListener('message', windowCallback);
          container!.removeChild(input);
        }
      }),
      displayName: '自定义属性',
      required: true
    })

• 如果你想了解更多关于如何在 Activepieces 与嵌入的 SaaS 之间建立通信，请查看 window postMessage API。