폼(Form)은 사용자가 정보를 입력하거나 선택 할 수 있도록, Input Component 를 컨트롤 엘리먼트(control elements)로 사용한다. 폼 컨테이너를 List, Tree, Tab, Steps, Modal Button 등의 컴포넌트와 함께 사용하여 다양한 Form Patterns 페이지를 구성할 수 있다.


Setup

1. Create New

폼 컴포넌트를 추가하면 다음과 같이 기본 셋팅 화면이 출력된다. Data를 입력 받을 Target NodeType, Form Type, 타이틀 입력, 자동 저장, API와 Parent ID 사용 여부를 설정 할 수 있다.

 id={{:_parentId}}
{API 유형(adm,mng)}/{NodeType ID}/form?id={_parentId의 값} 

2. Set Target Type


Option Detail

폼 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같다.


Events Option

1. Event Buttons

이벤트 버튼 목록과 함께 버튼 위치와 정렬 설정 옵션이 출력된다.

Enable List Event Buttons [Reset]

Event Buttons [Reset], [Rollback]

- Reset : 폼에 입력된 데이터를 모두 초기화

- Rollback : 히스토리 롤백 기능으로 Function Option > Show history{ON} 일 경우 주로 함께 사용

2. Use Extra Buttons

제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. Extra Buttons{ON}으로 설정하면 하단에 Extra Button Table 영역이 출력된다. (plus) 아이콘을 클릭하고 원하는 버튼 컴포넌트를 추가할 수 있다.

단, 테이블 리스트와는 달리 폼(Form)에서 사용되는 Extra Buttons은 테이블 영역 외부에 배치 되며, 기본 이벤트 버튼과 마찬가지로 버튼 위치와 정렬을 선택 할 수 있다.


Function Option

1. Show History

히스토리 보기 옵션은 Form Type을 Detail View 또는 Edit Form로 설정 했을 경우 노출된다. 선택한 노드타입이 historyable{ON}인 경우 자동으로 생성되는 히스토리 컴포넌트에 대한 노출 여부를 설정할 수 있다.

2. Show Information

기본 정보 보기 옵션은 Form Type을 Detail View 또는 Edit Form로 선택했을 경우 설정 가능하다. Form Title 하단 Body 상단 영역에 등록자와 등록일시, 수정자와 수정일시 정보가 출력된다.

3개 모두 같은 기능의 옵션인지 확인 필요!

3. Tooltip

툴팁을 사용하면, Form Title 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.

※ 기능 확인 불가

4. Description

폼(Form) 디스크립션은 Form Body 하단 영역에 출력된다. 디스크립션 컨텐츠는 TextEditor 컴포넌트로 되어 있어 사진, 영상, 테이블, 목록(글머리 기호와 번호) 등의 기능을 사용 할 수 있다.

5. Use Sub Tab

Use Sub Tab

When we turn on the “Enable Tab Fields” will display and it filter with value types are PART,PARTS,REFERENCE,REFERENCES,PARENT,REFERENCED,CHILDREN 


Style Option

1. Size

폼 사이즈 선택(Small, Default, Large)

2. Layout

폼 엘리먼트들의 레이아웃 스타일 선택(Vertical, Horizontal)

3. Field Size

폼 내에 있는 필드 사이즈를 조절 할 수 있다.

※ 기능 확인 불가

4. Field Gutter

와 그리드 간격을 조절할 수 있다. 그리드 간격은 Row Gutter Value를 이용한다.
※ 기능 확인 불가 ( Grid Gutter )

5. Elements Arrange

폼 구성 요소 배열 스타일 선택(1 per line, 2 per line)

1 Per Line : 1 줄에 최대 1개 엘리먼트씩 배열

2 Per Line : 1 줄에 최대 2개 엘리먼트씩 배열

6. Bordered

폼 보더 노출/비노출 설정

7. Hide Title

폼 타이틀 노출/비노출 설정

8. Custom Title Style

폼 타이블 스타일을 설정하는 기능으로 Title Style Set이 출력된다.

9. Custom Card Style

엘리먼트 나열 형태를 카드 스타일로 변경 할 수 있다. Card Style Set으로 설정한다.