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

폼(Form)이 입력을 위한 컴포넌트라면, 백오피스에서 사용되는 뷰(View) 컴포넌트는 출력을 위한 것이다. 폼(Form)과 설정 옵션은 모두 동일하며, 이미 만든 폼(Form)을 활용하여 뷰(View) 페이지로 활용할 수도 있다.

Setup

Create New

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

Open

• Auto Save : 폼 입력값이 변경 될때마다 자동으로 저장

• Form Type : 특정 상태로만 사용하고자 하는 경우 사용( 등록폼, 수정폼, 상세뷰 )

• Use API : 폼에서 제공되는 기본 form API가 아닌 별도의 API를 사용하거나 파라미터 추가를 원할 때 사용

  • Data URL : 별도로 사용하고자 하는 API URL 입력

  • Data Parameters : 별도로 추가하고자 하는 API 파라미터 입력

• Parent ID : List이나 Tree 컴포넌트에서 특정 데이터를 선택할 경우, 해당 데이터의 ID 파라미터 값을 폼의 데이터 API 호출 id 값으로 사용할지 여부를 설정하는 기능

Set NodeType

NodeType을 선택하면 다음과 같이 2가지 테이블 셋팅 영역이 출력된다.

• Form Fields Set Area : 폼 필드로 사용하고자 하는 Value값을 선택하여 폼을 생성하는 영역

• Option Set Area : 폼 옵션을 Style, Function, Events 3가지 탭으로 구분하여 제공

Open

Option Detail

폼 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같이 4가지로 나뉜다.

• Style : 기본적으로 셋팅된 폼 스타일 변경 또는 커스터 마이징 스타일 등을 설정하는 영역

• Function : 폼에 적용 가능한 기능 설정 영역

• Events : 기본/미리보기 버튼 설정 영역

Style Option

1. Size

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

2. Layout

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

3. Field Size

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

4. Field Gutter

필드간의 Row 그리드 간격을 조절할 수 있다. ( ant Grid Gutter )

5. Hide Title

폼 타이틀 노출/비노출 설정한다.

6. Bordered

폼 보더 노출/비노출 설정한다.

7. Custom Title Style

폼 타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

8. Custom Card Style

엘리먼트 나열 형태를 카드 스타일로 변경 할 수 있다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

Function Option

Function Tab의 상세 옵션 내용은 다음과 같다.

1. Show History

히스토리 보기 옵션을 사용하기 위해서는 Form Type을 등록폼 또는 수정폼으로 설정하고, NodeType의 화면으로 진입하여 Historyable 옵션을 Historyable{ON} 으로 우선 설정해야한다.

Show History{ON}으로 설정하면 하위 옵션이 다음과 같이 출력된다.

• Expand History Column : 히스토리 목록에 Memo Column 포함 여부 설정

• History Data URL : 기본으로 제공하는 히스토리 API가 아닌 별도의 API를 사용하고자 할 경우 URL 입력

tip Show History

히스토리 탭이 아래와 같이 출력 되며, 등록/수정 페이지에서의 작업 히스토리를 테이블 형태로 출력한다.

Expand History Column{ON}을 추가로 설정 할 경우 Memo 컬럼도 사용할 수 있다.

2. Show Information

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

3. Show Tooltip

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

• Tooltip Textarea: 툴팁 내용 입력

4. Show Description

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

• Description Position new : 위치 선택(Top, Bottom, Both)

• Description Title : 디스크립션 제목 입력

• Description Contents : 해당 폼에 대한 목적, 작성법 등 다양한 설명 문구를 텍스트로 입력

5. Use Sub Tab

TIP 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 

Events Option

Events Tab의 상세 옵션 내용은 다음과 같다.

1. Event Buttons

이벤트 버튼 목록과 함께 테이블 데이터 선택 타입, 버튼의 위치와 정렬 설정 옵션이 출력된다.

• Enable List Event Buttons : 이벤트 버튼 목록(Create, Read, Update, Delete, List)

• Event Buttons Position : 버튼 위치 선택(Top, Bottom, Both)

  • Top/Bottom Event Buttons Align : 버튼 정렬 선택(Left, Center, Right)

2. Preview Button new

작성 중인 폼을 미리보기 버튼을 통해 확인 할 수 있는 옵션이다.(No Use, Modal, New Window)

Form Type{등록폼, 수정폼}의 경우 미리보기 기능을 사용 할 수 있다. 기본 버튼 출력 위치에 [Preview] 버튼이 생성되고, 버튼 클릭 시 작성 중인 내용의 상세뷰를 Modal 또는 New Window로 출력하여 확인 할 수 있다.