폼(Form)은 사용자가 정보를 입력하거나 선택 할 수 있도록, Input Component 를 컨트롤 엘리먼트(control elements)로 사용한다. 폼 컨테이너를 List, Tree, Tab, Steps, Modal Button 등의 컴포넌트와 함께 사용하여 다양한 Form Patterns 페이지를 구성할 수 있다.
폼 컴포넌트를 추가하면 다음과 같이 기본 셋팅 화면이 출력된다. Data를 입력 받을 Target NodeType, Form Type, 타이틀 입력, 자동 저장, API와 Parent ID 사용 여부를 설정 할 수 있다.
Auto Save : 폼 입력값이 변경 될때마다 자동으로 저장
Form Type : 특정 상태로만 사용하고자 하는 경우 사용( 등록폼
, 수정폼
, 상세뷰
)
Use API : 폼에서 제공되는 기본 form API가 아닌 별도의 API를 사용하거나 파라미터 추가를 원할 때 사용
Data URL : 별도로 사용하고자 하는 API URL 입력
Data Parameters : 별도로 추가하고자 하는 API 파라미터 입력
id={{:_parentId}} |
Parent ID : List이나 Tree 컴포넌트에서 특정 데이터를 선택할 경우, 해당 데이터의 ID 파라미터 값을 폼의 데이터 API 호출 id 값으로 사용할지 여부를 설정하는 기능
{API 유형(adm,mng)}/{NodeType ID}/form?id={_parentId의 값} |
폼 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같다.
Events : 버튼 설정 영역
Function : 폼에 적용 가능한 기능 설정 영역
Style : 기본적으로 셋팅된 폼 스타일 변경 또는 커스터 마이징 스타일 등을 설정하는 영역
이벤트 버튼 목록과 함께 버튼 위치와 정렬 설정 옵션이 출력된다.
Enable List Event Buttons : 이벤트 버튼 목록(Create
, Read
, Update
,Delete
, List
, Reset
, Rollback
)
Event Buttons Position : 버튼 위치 선택(Top
, Bottom
, Both
)
Event Buttons Align : 버튼 정렬 선택(Left
, Center
, Right
)
Enable List Event Buttons [Reset]
Event Buttons [Reset], [Rollback]
- Reset : 폼에 입력된 데이터를 모두 초기화
- Rollback : 히스토리 롤백 기능으로 Function Option > Show history{ON} 일 경우 주로 함께 사용
제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. Extra Buttons{ON}으로 설정하면 하단에 Extra Button Table 영역이 출력된다. 아이콘을 클릭하고 원하는 버튼 컴포넌트를 추가할 수 있다.
단, 테이블 리스트와는 달리 폼(Form)에서 사용되는 Extra Buttons은 테이블 영역 외부에 배치 되며, 기본 이벤트 버튼과 마찬가지로 버튼 위치와 정렬을 선택 할 수 있다.
Use Same Line : 기본 이벤트 버튼과 함께 엑스트라 버튼을 같은 라인에 배치하는 기능이다.
Extra Buttons Position : 버튼 위치 선택(Top
, Bottom
, Both
)
Extra Buttons Align : 버튼 정렬 선택(Left
, Center
, Right
)
히스토리 보기 옵션은 Form Type을 Detail View
또는 Edit Form
로 설정 했을 경우 노출된다. 선택한 노드타입이 historyable{ON}인 경우 자동으로 생성되는 히스토리 컴포넌트에 대한 노출 여부를 설정할 수 있다.
Expand History Column : 히스토리 목록에 Memo Column 포함 여부 설정
History Data URL : 기본으로 제공하는 히스토리 API가 아닌 별도의 API를 사용하고자 할 경우 URL 입력
기본 정보 보기 옵션은 Form Type을 Detail View
또는 Edit Form
로 선택했을 경우 설정 가능하다. Form Title 하단 Body 상단 영역에 등록자와 등록일시, 수정자와 수정일시 정보가 출력된다.
3개 모두 같은 기능의 옵션인지 확인 필요!
![]() | ![]() | ![]() |
툴팁을 사용하면, Form Title 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.
※ 기능 확인 불가
폼(Form) 디스크립션은 Form Body 하단 영역에 출력된다. 디스크립션 컨텐츠는 TextEditor 컴포넌트로 되어 있어 사진, 영상, 테이블, 목록(글머리 기호와 번호) 등의 기능을 사용 할 수 있다.
Description Title : 디스크립션 제목 입력
Description Contents : 해당 폼에 대한 목적, 작성법 등 다양한 설명 문구를 텍스트로 입력
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
폼 사이즈 선택(Small
, Default
, Large
)
폼 엘리먼트들의 레이아웃 스타일 선택(Vertical
, Horizontal
)
폼 내에 있는 필드 사이즈를 조절 할 수 있다.
※ 기능 확인 불가
와 그리드 간격을 조절할 수 있다. 그리드 간격은 Row Gutter Value를 이용한다.
※ 기능 확인 불가 ( Grid Gutter )
폼 구성 요소 배열 스타일 선택(1 per line
, 2 per line
)
1 Per Line : 1 줄에 최대 1개 엘리먼트씩 배열
2 Per Line : 1 줄에 최대 2개 엘리먼트씩 배열
폼 보더 노출/비노출 설정
폼 타이틀 노출/비노출 설정
폼 타이블 스타일을 설정하는 기능으로 Title Style Set이 출력된다.
엘리먼트 나열 형태를 카드 스타일로 변경 할 수 있다. Card Style Set으로 설정한다.