...
...
...
...
Summary
BackOffice Builder는 32개의 입력 컴포넌트를 제공한다.
No | Component | Description |
|---|---|---|
1 | Boolean |  |
2 | AutoComplete |  입력 필드의 자동 완성 기능이 필요한 경우 사용 |
3 | Text Input |  텍스트 정보를 입력 받을 경우 사용 |
4 | Textarea |  멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용 |
5 | TextEditor |  텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용 |
6 | CodeEditor |  코딩 기능이 필요한 경우 사용 |
7 | JsonEditor |  코딩 기능 중 Json이 필요한 경우 사용 |
8 | Include | Include Type으로 컴포넌트와 아이프레임이 필요한 경우 사용 |
9 | Checkbox |  여러 데이터의 중복 선택이 필요한 경우 사용 |
10 | Radio |  여러 데이터 중 1개만 선택해야 하는 경우 사용 |
11 | Cascader |  연관된 데이터 세트에서 쉽게 선택할 수 있도록 다단계 분류가 적용된 셀렉트 박스 |
12 | CascaderMultiple | 여러가지 데이터를 Cascader로 선택해야 하는 경우 사용 |
13 | Number |  숫자 입력이 필요한 경우 사용 |
14 | Select |  창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 |
15 | SelectTree | 트리형 데이터를 선택하는 경우 사용 |
16 | SelectModal | Modal에서 데이터 검색을 하여 선택하는 경우 사용 |
17 | Password | 비밀번호를 입력받는 경우 사용 |
18 | Color | 칼라 선택이 필요한 경우 사용 |
19 | File | 파일 업로드가 필요한 경우 사용 |
20 | Image | 이미지 파일 업로드가 필요한 경우 사용 |
21 | Zipcode | 우편번호 검색 기능을 가진 컴포넌트 |
22 | Location | 주소를 입력 받는 경우 사용 |
23 | Map | |
24 | GoogleMap | |
25 | Date |  날짜 정보를 선택하여 입력해야 하는 경우 사용 |
26 | Date Range | 시작 날짜와 종료 날짜를 선택하여 입력 받아야 하는 경우 사용 |
27 | Time |  시간 정보를 선택하여 입력해야 하는 경우 사용 |
28 | Time Range | 시작 시간과 종료 시간을 선택하여 입력 받아야 하는 경우 사용 |
29 | Slider | 미리 정해진 범위 내의 숫자값을 선택하여 입력받는 경우 사용 |
30 | Rate |  평가 정보를 표시해야 하는 경우 사용 |
31 | Tags | 분류 또는 마크업을 위한 태그 지정이 필요한 경우 사용 |
32 | HistoryTable | 컨테이너와 차이 확인 필요 |
...
Preview
입력 컴포넌트는 입력 타입에 따라 6가지로 분류 할 수 있으며, 컴포넌트가 실제 화면에 출력되는 UI는 다음과 같다.
...
No | Component | Preview |
|---|---|---|
1 | Boolean |     |
2 | Checkbox |   |
3 | Radio |   |
4 | Cascader |  |
5 | CascaderMultiple |  |
6 | Select |  |
7 | SelectTree |  |
8 | SelectModal |  |
...
No | Component | Preview |
|---|---|---|
1 | Number Input |  |
2 | Rate |  |
3 | Slider |  |
4 | Color |    |
5. Date/Time Type
...
No | Component | Preview |
|---|---|---|
1 | CodeEditor |  |
2 | JsonEditor |  |
3 | Include |  |
...
Status Information
입력 컴포넌트의 상태는 아래와 같이 4가지로 표현된다.
Normal | Hover |
|---|---|
 |  |
Active | Disabled |
 |  |
...
Common options
입력 컴포넌트는 다음과 같이 같은 공통 옵션을 동일하게 갖는다.
1. Size
컴포넌트의 사이즈 옵션은 Small, Default, Large 3가지로 제공한다.
...
2. Field Size
필드의 사이즈를 비율로 조절 할 조절할 수 있다.
...
3. Fixed Field Size
Fixed 필드의 사이즈를 비율로 조절 할 Label 텍스트 길이에 따라 입력 필드의 가로 길이가 가변적으로 변하는데, Fixed Field Size 옵션을 사용하여 입력 필드 사이즈를 직접 설정하고 고정시킬 수 있다.
...
4. Default Value
디폴트 값을 미리 설정 할 수 있다.
...
5. Form Reset Value
폼내에서 사용되는 입력 컴포넌트의 리셋 값을 설정 할 수 있다.
...
컴포넌트의 상태를 Disable로 고정 할 수 있다.
...
7. Hide Label
컴포넌트 상단에 출력되는 Label을 비노출로 변경 할 수 있다.
...
8. Next Line Label
라벨의 위치를 컴포넌트 좌측으로 변경 할 수 있다.
...
컴포넌트 하단에 표시되는 코멘트 기능을 제공한다.
...
.
...
Required
Status
colour Green title tip 인풋 컴포넌트의
Required설정은 Platform Console에 있는 스키마에서 진행 한다. 필수값으로 설정된 인풋 컴포넌트는 사용자 입력 시 설정 조건에 따라 경고성 Comment 가 자동 출력 된다.
...