编写自定义步骤布局

在前台渲染的每个步骤中的每个表单都使用来自react-jsonschema-form可以通过提供一个ui:ObjectFieldTemplate属性：

parameters:
  - title: Fill in some steps
    ui:ObjectFieldTemplate: TwoColumn

这与领域用过react-jsonschema-form的字符串值。TwoColumn上述内容解析为 React 组件。

将 React 组件注册为自定义步骤布局

创建脚手架布局函数用于将一个组件标记为自定义步骤布局：

import React from 'react';
import {
  createScaffolderLayout,
  LayoutTemplate,
  scaffolderPlugin,
} from '@backstage/plugin-scaffolder';
import { Grid } from '@material-ui/core';

const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
  const mid = Math.ceil(properties.length / 2);

  return (
    <>
      <h1>{title}</h1>
      <h2>In two column layout!!</h2>
      <Grid container justifyContent="flex-end">
        {properties.slice(0, mid).map(prop => (
          <Grid item xs={6} key={prop.content.key}>
            {prop.content}
          </Grid>
        ))}
        {properties.slice(mid).map(prop => (
          <Grid item xs={6} key={prop.content.key}>
            {prop.content}
          </Grid>
        ))}
      </Grid>
      {description}
    </>
  );
};

export const TwoColumnLayout = scaffolderPlugin.provide(
  createScaffolderLayout({
    name: 'TwoColumn',
    component: TwoColumn,
  }),
);

将组件注册为自定义布局后，您需要提供layouts到ScaffolderPage:

import { MyCustomFieldExtension } from './scaffolder/MyCustomExtension';
import { TwoColumnLayout } from './components/scaffolder/customScaffolderLayouts';

const routes = (
  <FlatRoutes>
    ...
    <Route path="/create" element={<ScaffolderPage />}>
      <ScaffolderLayouts>
        <TwoColumnLayout />
      </ScaffolderLayouts>
    </Route>
    ...
  </FlatRoutes>
);

使用自定义步骤布局

传递到ScaffolderPage的子女ScaffolderLayouts组件可用作ui:ObjectFieldTemplate在模板文件中：

parameters:
  - title: Fill in some steps
    ui:ObjectFieldTemplate: TwoColumn