标准网格中的自定义控件

Question

我需要在网格列中添加一个 React 自定义控件。我可以不用从头开始制作自定义网格吗？

我在想的是类似这样的东西 ReactPeoplePicker，但已添加到现有网格中。

Answer 1

三周后我可以回答自己：是的，我可以。这就是我所做的：

使用 Powerapps CLI 创建 PCF（我选择数据集模板）并安装依赖项：

npm install
npm install react @types/react react-dom @types/react-dom @fluentui/react

创建一个 peoplepicker.tsx 并从 https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.

复制粘贴 React 组件代码

在index.ts文件中导入react, react-dom and component:

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'

定义并初始化上下文和容器变量：

export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {

private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;

/**
 * Empty constructor.
 */
constructor() { }

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
    // Add control initialization code
    this.context = context;
    this.container = container;

渲染反应组件并附加到容器：

public updateView(context: ComponentFramework.Context<IInputs>): void
{
    ReactDOM.render(
        React.createElement(PeoplePicker),
        this.container);

构建解决方案并导入到 Power Apps 门户：

npm run build
pac pcf push --publisher-prefix myPrefix

最后，在 Power Apps 门户中，导航到网格（或子网格）属性并添加自定义控件。请记住，可能需要经典模式。

标准网格中的自定义控件

Custom Control in a standard grid

reactjs

powerapps