标准网格中的自定义控件

Question

我需要在网格列中添加一个react自定义控件。我可以在不从头开始制作自定义网格的情况下完成吗？

我想的是类似于ReactPeoplePicker的东西，但添加到了现有的网格中。

Answer 1

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

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

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

创建peoplepicker.tsx并从复制粘贴react组件代码https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.

在index.ts文件中，我导入react、react dom和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;

渲染react组件并附加到容器：

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门户中，导航到网格(或子网格(属性并添加自定义控件。请记住，可能需要经典模式。