英文:

Sharepoint online (spfx with react) - custom forms?

问题

我正在构建自定义的新建和编辑表单。我想知道是否有一种方法可以默认从Sharepoint获取在编辑/新建上显示的列表字段，或者我必须使用诸如office-ui-fabric-react/FluentUI或类似的软件包来重新构建每个字段？

然后，我必须创建逻辑来在打开编辑表单时预填充它们，并在保存时必须重新构建用于更新/创建新项目的逻辑？

在这方面是否有更简单的解决方案，例如渲染所有字段并使用代码隐藏不应显示的字段？

英文:

I'm building custom New and Edit forms. I'm interested if there is some way to get the fields of list displayed on Edit/New that would work by default from Sharepoint, or I must rebuild every field using packages such as office-ui-fabric-react/FluentUI or similar packages?

And then I must create logic to prefill them when EditForm is opened, and on save, must rebuild logic for updating/creating new items?

There isn't simpler solution in that way, such as render all fields and hide with code fields that should not be displayed?

答案1

得分: 1

SharePoint Online 提供了一些简化方法，用于构建自定义的新建和编辑表单，除了使用自定义代码和UI库。

利用 SharePoint 的现有功能：SharePoint 提供了一些功能，可在不编写自定义代码的情况下自定义表单的外观和行为。您可以通过 SharePoint 的列表设置界面进行配置，例如字段设置、列类型、验证等。这些设置可以影响默认的表单呈现方式。通过这种方式，您可以调整表单的显示和验证规则，而无需编写自定义代码。

使用 Power Apps：Power Apps 是一个用于创建自定义 SharePoint 表单的低代码/无代码平台。您可以使用 Power Apps 来构建直接绑定到 SharePoint 列的表单，并根据需要自定义表单的外观和行为。Power Apps 提供了丰富的视觉设计工具和预设项，使创建和自定义表单更加容易，无需深度编码。

利用 SharePoint 的默认功能和 Power Apps 可以帮助简化构建表单的过程，并减少编写自定义代码的需求。这些方法提供了一种更轻松的方式来自定义表单，特别是当表单的外观和行为要求不是太复杂时。但是，如果您需要更高度的自定义和灵活性，使用自定义代码和UI库仍然是一个更强大的选项。

英文:

In addition to using custom code and UI libraries to build custom New and Edit forms, there are some simplifications that SharePoint Online offers to consider.

Leverage existing features of SharePoint: SharePoint provides features to customize the appearance and behavior of forms without writing custom code. You can configure it through SharePoint's list settings interface, such as field settings, column types, validation, etc. These settings can affect the default form rendering. This way, you can adjust the form's display and validation rules without writing custom code.
list

Use Power Apps: Power Apps is a low-code/no-code platform for creating custom SharePoint forms. You can use Power Apps to build forms that bind directly to SharePoint columns, and customize the form's appearance and behavior as needed. Power Apps provides a rich set of visual design tools and presets that make it easier to create and customize forms without deep coding.

Using SharePoint's default functionality and Power Apps can help simplify the process of building forms and reduce the writing of custom code. These methods provide an easier way to customize forms, especially when the requirements for form appearance and behavior are not too complicated. But if you need a higher degree of customization and flexibility, using custom code and UI libraries is still a more powerful option.

答案2

得分: 0

是的，有一种方法可以避免编写大量代码来满足您的需求。我经常遇到类似的需求，幸运的是，PnP社区开发了一个有用的库，名为“pnp/spfx-controls-react”，其中包含一个名为DynamicForm的组件。

以下是如何使用DynamicForm组件的逐步指南：

1. 首先创建一个包装的React组件。
2. 在React组件的构造函数中，初始化一个空白项。这也是一个机会，可以使用SP PnP预填充某些列值。
3. 如果需要隐藏特定字段，可以将其内部名称添加到控件的“hiddenFields”属性中。此属性接受一个字符串数组。
4. 如果用户决定在不保存表单的情况下取消，您需要实现逻辑来删除创建的空白项。
5. 类似地，对于编辑表单，您可以简单地将“listId”属性设置为现有项的ID，而不是创建新的项。

重要注意事项：在实际使用DynamicForm时可能存在某些限制。如果您遇到任何特定的限制，我将乐意听取并为您提供进一步的帮助！

示例代码片段以说明如何使用DynamicForm：

import * as React from 'react';
import { DynamicForm } from 'pnp/spfx-controls-react';
import { sp } from '@pnp/sp';

export default class YourFormComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      listItemId: null,
    };

    // 在构造函数中创建一个空白项
    sp.web.lists.getByTitle('<列表名称>').items.add({})
      .then((item: any) => {
        // 使用空白项的ID更新状态
        this.setState({ listItemId: item.Id });
      })
      .catch((error: any) => {
        console.log(error);
      });
  }

  handleFormSave = (formData) => {
    // 保存表单数据的逻辑
    console.log(formData);
  }

  handleFormCancel = () => {
    // 处理表单取消并在需要时删除空白项的逻辑
  }

  render() {
    return (
      <div>
        <h1>您的表单组件</h1>
        <DynamicForm
          listId="<您的列表ID>"
          listItemId={this.state.listItemId}
          onSave={this.handleFormSave}
          onCancel={this.handleFormCancel}
          hiddenFields={["Field1", "Field2"]}
        />
      </div>
    );
  }
}

<details>
<summary>英文:</summary>

Yes, there is a way to avoid writing extensive code for your requirement. I frequently come across similar requirements, and fortunately, the PnP Community has developed a useful library called &quot;pnp/spfx-controls-react&quot; which includes a component called [DynamicForm][1].

Here is a step-by-step guide on how to use the [DynamicForm][1] component:

1. Start by creating a wrapper React component.
2. In the constructor of your React component, initialize a blank item. This is also an opportunity to prefill certain column values using SP PnP.
3. If you need to hide specific fields, you can add their internal names to the &quot;hiddenFields&quot; property of the control. This property accepts a string array.
4. In case the user decides to cancel the form without saving, you will need to implement logic to delete the blank item that was created.
5. Similarly, for an edit form, you can simply set the &quot;listId&quot; property to the ID of the existing item instead of creating a new one.

It&#39;s important to note that there may be certain limitations when using DynamicForm for real-life use cases. If you encounter any specific limitations, I&#39;d be happy to hear about them and assist you further!

Sample code snippet to illustrate the usage of DynamicForm:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import * as React from &#39;react&#39;;
    import { DynamicForm } from &#39;pnp/spfx-controls-react&#39;;
    import { sp } from &#39;@pnp/sp&#39;;

    export default class YourFormComponent extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          listItemId: null,
        };

        // Create a blank item in the constructor
        sp.web.lists.getByTitle(&quot;&lt;List Name&gt;&quot;).items.add({})
          .then((item: any) =&gt; {
            // Update the state with the ID of the blank item
            this.setState({ listItemId: item.Id });
          })
          .catch((error: any) =&gt; {
            console.log(error);
          });
      }

      handleFormSave = (formData) =&gt; {
        // Logic to save the form data
        console.log(formData);
      }

      handleFormCancel = () =&gt; {
        // Logic to handle form cancellation and delete the blank item if needed
      }

      render() {
        return (
          &lt;div&gt;
            &lt;h1&gt;Your Form Component&lt;/h1&gt;
            &lt;DynamicForm
              listId=&quot;&lt;your-list-id&gt;&quot;
              listItemId={this.state.listItemId}
              onSave={this.handleFormSave}
              onCancel={this.handleFormCancel}
              hiddenFields={[&quot;Field1&quot;, &quot;Field2&quot;]}
            /&gt;
          &lt;/div&gt;
        );
      }
    }


&lt;!-- end snippet --&gt;


  [1]: https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/

</details>