自定义组件

在满足不断增长的应用开发需求的同时，低代码开发平台 PagePlug 引入了一项令人振奋的新功能——自定义组件。

这一功能一方面支持对接企业自有的组件库，使他们能够根据特定需求定制和创建独特的应用组件，为用户提供个性化的应用体验；另外一方面赋予开发者更大的灵活性和自由度，同时也确保了应用程序的一致性和稳定性。

组件介绍

使用自定义组件，需要使用者对 HTML/CSS/JS 以及 React.js 库较为熟悉。自定义组件可以是 React 组件，也可以是静态组件。
拖放一个自定义组件于画布上，默认填充的示例代码演示了，如何在自定义组件中与应用的其他部分交互，您可以基于此进行修改或者将其删除后自己编写代码。

组件属性

数据

数据区域是自定义组件与外部组件进行数据交互的接口

通过定义键值对，向自定义组件传递数据
可以通过{{组件名.model}}的方式，引用自定义组件的内部数据

代码

以示例代码做介绍，MyCustomComponent中定义了几个函数、对象：runQuery、model、updateModel

model 是一个对象，它以键值对的形式定义了应用和自定义组件之间传递的变量数据。"数据"中定义的就是 model，可以使用 model.name、model.text 引用具体值。
runQuery 是一个函数，接受一个字符串类型的参数，该参数是现有查询的名称，如：runQuery(model.query)。
updateModel是一个接受单个对象类型参数的函数，传递给 updateModel 的参数将与自定义组件的数据合并。

实现自定义组件

自定义组件属性面板的代码区域是您编写自定义组件的所有 HTML、CSS 和 JavaScript 代码的地方。当您的应用运行时，你的自定义组件会被嵌入到 iframe 中。

PP 全局对象介绍

为了方便用户在自定义组件的代码中和外部进行交互，PagePlug 通过 PP 全局对象为用户提供了相关的 API。 PP 对象的类型定义和各字段的描述如下：

interface PP {
  // 订阅数据的变化，当数据变化时回调函数 handler 会被触发
  // 返回值是取消订阅的函数
  subscribe(handler: SubscribeHandler): () => void;
  // React HOC组件函数，传入一个 React 组件
  // 返回一个属性包含：runQuery, model, updateModel 的新的组件。
  connect(Component: ComponentType<any>): ComponentType; // 通过查询的名称执行一个查询
  runQuery(queryName: string): Promise<void>; // 更新数据
  updateModel(patch: any): Promise<any>;
}

interface SubscribeHandler {
  (data: IDataPayload): void;
}

interface IDataPayload {
  model: any;
}

下面的代码，描述了创建一个最简易的正常工作的自定义组件：

<div id="react"></div>
<script type="text/babel">
  const MyCustomComponent = ({ runQuery, model, updateModel }) => <p>Hello World</p>;
  const ConnectedComponent = PP.connect(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>

数据交互

从应用传递数据到自定义组件

场景：希望自定义组件显示应用中文本输入组件的内容。如果文本输入组件中的值是"李明"，那么自定义组件显示"Hello, 李明！"。数据区域可以写 {{ }} 引用查询或者组件的数据。

代码

<div id="root"></div>
<script type="text/babel">
  const MyCustomComponent = ({ runQuery, model, updateModel }) => <p>Hello, {model.name}！</p>;
  const ConnectedComponent = PP.connect(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("root"));
</script>

从自定义组件传递数据到应用

场景：希望一个文本输入组件显示一个自定义组件中的某个值。如下图，CustomComponent1.model.name 可以引用自定义组件的 name 值，Input1 组件的默认值设为 CustomComponent1.model.name 即可显示此值：

从自定义组件触发查询

场景：假设您想基于在自定义组件中输入的内容触发一个查询，从而查询 users 表中的所有数据。默认情况下，表格会显示查询返回的所有用户。在自定义组件中我们实现了一个输入框和一个搜索按钮，当在输入框中输入一些文本，然后点击搜索按钮后，表格中会只展示用户 gender 匹配输入框内容的用户。

实现步骤： 下面展示了上述示例中自定义组件的代码

引入了 Antd 组件库，并使用了其中的 Input 组件，当用户在 Input 组件中输入内容时，会通过 updateModel 方法，更新自定义组件的数据。

<style type="text/css">
  body {
    padding: 0;
    background-color: transparent !important;
  }
</style>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.21.4/dist/antd.min.css" />
<script type="text/javascript" src="https://unpkg.com/antd@4.21.4/dist/antd.min.js"></script>
<div id="root"></div>
<script type="text/babel">
  const { Button, Card, Space, Input } = antd;
  const MyCustomComponent = ({ runQuery, model, updateModel }) => (
    <Space>
      <Input value={model.search} onChange={(e) => updateModel({ search: e.target.value })} placeholder="搜索用户..." />
      <Button type="primary" onClick={() => runQuery("Query1")}>
        搜索
      </Button>
    </Space>
  );
  const ConnectedComponent = PP.connect(MyCustomComponent);
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ConnectedComponent />);
</script>

同时也使用了 Antd 组件库中的 Button 组件，当用户点击 Button 时，会通过 runQuery 方法执行名称为 Query1 的查询。

创建一个名为 Query1 的查询，触发方式设置为 “手动触发执行”，编写 SQL 代码，使其访问自定义组件的数据：

SELECT * FROM public."users" WHERE gender = {{CustomComponent1.model.search}};

组件介绍​

组件属性​

数据​

代码​

实现自定义组件​

PP 全局对象介绍​

数据交互​

从应用传递数据到自定义组件​

从自定义组件传递数据到应用​

从自定义组件触发查询​