커스텀 단계 레이아웃 작성
커스텀 단계 레이아웃 작성 (이전 프론트엔드 시스템)
info
출처: 문서
본문
info
이 문서는 여전히 이전 프론트엔드 시스템을 사용하는 Backstage 앱을 위한 것입니다. 앱이 새 프론트엔드 시스템을 사용한다면, 현재 가이드를 대신 읽으세요.
프론트엔드에서 렌더링되는 각 단계의 모든 폼은 react-jsonschema-form의 기본 폼 레이아웃을 사용합니다. 특정 단계에 ui:ObjectFieldTemplate 속성을 제공해 이 동작을 재정의하는 것이 가능합니다.
parameters: - title: Fill in some steps ui:ObjectFieldTemplate: TwoColumn
이것은 react-jsonschema-form이 사용하는 것과 같은 필드이지만, 위의 TwoColumn 문자열 값이 react 컴포넌트로 해석되도록 몇 가지 단계를 추가해야 합니다.
React 컴포넌트를 커스텀 단계 레이아웃으로 등록
createScaffolderLayout 함수는 컴포넌트를 커스텀 단계 레이아웃으로 표시하는 데 사용됩니다.
import { scaffolderPlugin } from '@backstage/plugin-scaffolder';import { createScaffolderLayout, LayoutTemplate,} from '@backstage/plugin-scaffolder-react';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>);
커스텀 단계 레이아웃 사용
ScaffolderLayouts 컴포넌트의 자식으로 ScaffolderPage에 전달된 어떤 컴포넌트든 템플릿 파일에서 ui:ObjectFieldTemplate으로 사용할 수 있습니다.
parameters: - title: Fill in some steps ui:ObjectFieldTemplate: TwoColumn