입력 예시
입력 예시 (Input Examples)
이 페이지의 모든 예시는 여러분의 Backstage 설치에서 create/edit을 사용해 테스트할 수 있습니다.
출처: 문서
본문
이 페이지의 모든 예시는 여러분의 Backstage 설치에서 create/edit을 사용해 테스트할 수 있습니다.
모든 예시가 react-jsonschema-form을 기반으로 한다는 것을 기억하는 것이 중요합니다.
단순 텍스트 입력
기본 검증이 있는 단순 입력
pattern을 사용해 입력을 검증할 수 있습니다. pattern은 입력이 일치해야 하는 정규 표현식입니다.
parameters: - title: Fill in some steps properties: name: title: Simple text input type: string description: Description about input maxLength: 8 pattern: '^([a-zA-Z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)*$' ui:autofocus: true ui:help: 'Hint: additional description...'
커스텀 검증 오류 메시지
이 예시는 pattern 검증이 실패할 때 표시되는 오류 메시지를 커스터마이즈하는 방법을 보여줍니다.
parameters: - title: Fill in some steps properties: name: title: Simple text input type: string description: Description about input maxLength: 8 pattern: '^([a-zA-Z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)*$' ui:autofocus: true ui:help: 'Hint: additional description...' errorMessage: properties: name: '1-8 alphanumeric tokens (first starts with letter) delimited by -'
여러 줄 텍스트 입력
여러 줄 문자열을 삽입해야 한다면 ui:widget: textarea 옵션을 사용할 수 있습니다. 이것은 단일 줄 입력 대신 텍스트 영역 입력을 만듭니다.
parameters: - title: Fill in some steps properties: multiline: title: Text area input type: string description: Insert your multi line string ui:widget: textarea ui:options: rows: 10 ui:help: 'Hint: Make it strong!' ui:placeholder: | apiVersion: backstage.io/v1alpha1 kind: Component metadata: name: backstage spec: type: library owner: CNCF lifecycle: experimental
배열 옵션
커스텀 제목이 있는 배열
아래 예시에서 사용자는 enum 값 대신 enumNames를 보게 되어 읽기가 더 쉽습니다.
parameters: - title: Fill in some steps properties: volume_type: title: Volume Type type: string description: The volume type to be used default: gp2 enum: - gp2 - gp3 - io1 - io2 - sc1 - st1 - standard enumNames: - 'General Purpose SSD (gp2)' - 'General Purpose SSD (gp3)' - 'Provisioned IOPS (io1)' - 'Provisioned IOPS (io2)' - 'Cold HDD (sc1)' - 'Throughput Optimized HDD (st1)' - 'Magnetic (standard)'
다중 선택 목록
이것은 단순한 다중 선택 목록입니다.
parameters: - title: Fill in some steps properties: name: title: Select environments type: array items: type: string enum: - production - staging - development uniqueItems: true ui:widget: checkboxes
다른 타입의 배열
아래 예시에서 커스텀 객체의 배열을 만들 것입니다. 하나를 추가하면, 각각 "How are you?", "Is it sunny?" 그리고 "Anything else?" 3개의 필드를 가진 객체를 보게 됩니다.
parameters: - title: Fill in some steps properties: arrayObjects: title: Array with custom objects type: array minItems: 0 ui:options: addable: true orderable: true removable: true items: type: object properties: array: title: How are you? type: string default: good enum: - good - okay - great flag: title: Is it sunny? type: boolean ui:widget: radio someInput: title: Anything else? type: string
불리언 옵션
불리언
이것은 폼에 단순한 체크박스를 추가합니다. 값은 true 또는 false가 됩니다.
parameters: - title: Fill in some steps properties: name: title: Checkbox boolean type: boolean
불리언 예/아니오 옵션
이 예시는 Yes 또는 No 옵션으로 체크박스 대신 라디오 버튼을 사용하는 방법을 보여줍니다.
parameters: - title: Fill in some steps properties: name: title: Yes or No options type: boolean ui:widget: radio
불리언 다중 옵션
서로 다른 옵션으로 여러 체크박스를 만들 수 있습니다. 아래 예시는 예를 들어 활성화하거나 비활성화할 수 있는 기능 목록을 만드는 방법을 보여줍니다.
parameters: - title: Fill in some steps properties: name: title: Select features type: array items: type: string enum: - 'Enable scraping' - 'Enable HPA' - 'Enable cache' uniqueItems: true ui:widget: checkboxes
마크다운 텍스트 블록
폼에서 마크다운 텍스트 블록을 렌더링하는 것이 가능합니다. 사용자에게 도움말 텍스트나 안내를 추가하는 데 유용합니다.
parameters: - title: Fill in some steps properties: markdown: type: 'null' # Needs to be quoted description: | ## Markdown Text Block Standard markdown formatting is supported including *italics*, **bold** and [links](https://example.com) * bullet 1 * bullet 2
단계에서 매개변수를 조건으로 사용
매개변수의 값에 따라 단계를 조건부로 실행하는 것이 가능합니다. 아래 예시에서 environment 매개변수의 값에 따라 단계를 트리거합니다.
- name: Only development environments if: ${{ parameters.environment === "staging" or parameters.environment === "development" }} action: debug:log input: message: 'development step'- name: Only production environments if: ${{ parameters.environment === "prod" or parameters.environment === "production" }} action: debug:log input: message: 'production step'- name: Non-production environments if: ${{ parameters.environment !== "prod" and parameters.environment !== "production" }} action: debug:log input: message: 'non-production step'
필드에서 매개변수를 조건으로 사용
매개변수의 값에 따라 필드를 조건부로 표시하는 것도 가능합니다. 아래 예시에서 includeName 매개변수가 true로 설정된 경우에만 lastName 필드를 표시합니다.
parameters: - title: Fill in some steps properties: includeName: title: Include Name? type: boolean default: true dependencies: includeName: allOf: - if: properties: includeName: const: true then: properties: lastName: title: Last Name type: string # You can use additional fields of parameters within conditional parameters such as required. required: - lastName
커스텀 순서의 다중 조건부 필드
이 예시에서 매개변수의 값에 따라 여러 필드를 조건부로 표시하는 방법을 보여줍니다. ui:order 속성은 폼에서 필드의 순서를 제어하는 데 사용됩니다.
이 경우 includeName과 includeAddress 매개변수가 true로 설정된 경우에만 lastName과 address 필드를 표시합니다.
parameters: - title: Fill in some steps ui:order: - includeName - lastName - includeAddress - address properties: includeName: title: Include Name? type: boolean default: true includeAddress: title: Include Address? type: boolean default: true dependencies: includeName: allOf: - if: properties: includeName: const: true then: properties: lastName: title: Name type: string required: - lastName includeAddress: allOf: - if: properties: includeAddress: const: true then: properties: address: title: Address type: string required: - address
매개변수 조건부 설정
인라인 if 표현식은 Nunjitsu가 지원하는 Nunjucks 호환 구문을 사용합니다.
not 키워드는 사용할 수 없습니다. 대신 JavaScript 동등 연산을 사용하세요.
spec: parameters: - title: Fill in some steps properties: path: title: path type: string steps: - id: fetch name: Fetch template action: fetch:template input: url: ${{ parameters.path if parameters.path else '/root' }} - id: fetch_not_example name: Fetch template not example action: fetch:template input: url: ${{ '/root' if parameters.path !== true else parameters.path }}
원격 파일을 참조하는 플레이스홀더 사용
참고
이 기능의 테스트는 아직 create/edit을 사용해 지원되지 않습니다. 또한 이 기능은 원격 파일에서만 작동하고 로컬 파일에서는 작동하지 않습니다. 파일을 중첩할 수도 없습니다.
플레이스홀더를 사용해 원격 파일을 참조하는 것이 가능합니다. 여러 템플릿에서 재사용하고 싶은 표준 매개변수나 액션이 있을 때 유용합니다.
template.yaml
템플릿에서 $yaml 플레이스홀더를 사용해 parameters.yaml과 action.yaml 파일을 참조합니다. parameters.yaml 파일은 템플릿에 사용하고 싶은 매개변수를 담고 있고, action.yaml 파일은 실행하고 싶은 액션을 담고 있습니다.
spec: parameters: - $yaml: https://github.com/example/path/to/parameters.yaml # This would become the parameters as referenced in the parameters.yaml file - title: Fill in some steps properties: path: title: path type: string steps: - $yaml: https://github.com/example/path/to/action.yaml # This would become the publish action as referenced in the action.yaml file - id: fetch name: Fetch template action: fetch:template input: url: ${{ parameters.path if parameters.path else '/root' }}
parameters.yaml
url 매개변수가 템플릿에 추가될 것입니다.
title: Provide simple informationrequired: - urlproperties: url: title: url type: string
action.yaml
publish:github 액션이 템플릿에 포함될 것입니다.
id: publishname: Publish filesaction: publish:githubinput: repoUrl: ${{ parameters.url }}