在 KeystoneJS 中将两个模式字段显示为串联标签

Question

我正在 KeystoneJS (v6) 中设置模式和 AdminUI。我使用姓名并希望在前端的 Select 字段中显示名字和姓氏的组合：

所以我想要 'Tommy Smith'、'Markus Brown'、

而不是 'Tommy'、'Markus' 等等

这是我的代码：

import { list } from '@keystone-next/keystone/schema';
import { text } from '@keystone-next/fields';

export const Participant = list({
  ui: {
    labelField: 'firstName',
  },
  // fields
  fields: {
    firstName: text({ isRequired: true }),
    lastName: text({ isRequired: true }),
    }),
  },
});

有谁知道我该怎么做吗？

谢谢！

Answer 1

在 Keystone 中选择相关项目时，管理员 UI 使用项目 labels – 分配给每个项目的人类可读标识符。使用 ui.labelField 列表配置控制用于项目标签的值：

ui.labelField: Selects the field which will be used as the label column in the Admin UI. By default looks for a field called 'label', then falls back to 'name', then 'title', and finally 'id', which is guaranteed to exist.

– Keystone 6: Schema API docs

在您的示例中，您已将 Keystone 配置为使用 firstName 字段作为标签，它工作正常，但会出现您已确定的问题。我们真正需要的是将名字和姓氏组合在一起的第三个字段。

现在，我们可以使用钩子来完成此操作，例如，通过组合值并将它们保存到另一个 text 字段。但这会复制数据，我们需要记住保持值同步，增加复杂性。最好在从数据库中读出这些值时将它们连接起来。为此，我们可以使用 virtual fields.

在给出的示例中，虚拟字段解决方案如下所示：

import { list, graphql } from '@keystone-next/keystone';
import { text, relationship, virtual } from '@keystone-next/keystone/fields';

export const Participant = list({
  ui: {
    // Configure the list to use the fullName field for it's labels
    labelField: 'fullName',
  },
  fields: {
    firstName: text({ validation: { isRequired: true } }),
    lastName: text({ validation: { isRequired: true } }),
    // Add a fullName field that concatenates the participants first and last names together
    fullName: virtual({
      field: graphql.field({
        type: graphql.String,
        resolve: (item) => `${item.firstName} ${item.lastName}`,
      }),
    }),
  },
});

简单吧？然后，在管理员 UI 中，您会得到如下内容：

默认情况下，标签也用在列表视图中，因此您会注意到那里有额外的信息：

如果您不想这样，您可以另外设置 ui.listView.initialColumns 列表配置（文档 here）。

有一个不错的 guide on virtual fields 值得一看。它涵盖了更高级的用法，例如从其他项目加载字段、返回复杂类型等。

在 KeystoneJS 中将两个模式字段显示为串联标签

Display two schema fields as concatenated label in KeystoneJS

reactjs

keystonejs