Select Modal 컴포넌트는 Select 컴포넌트의 한 종류로, 선택 옵션을 Modal로 출력하여 사용자로 하여금 데이터의 상세 정보를 확인 한 뒤 선택 할 수 있도록 하는 것이다.

Basic UI

Select Modal의 기본 UI는 다음과 같다.

Function

Modal Render Type을 Page 또는 Components로 선택 할 수 있다. 예를 들어 Page를 선택했다면, 다음과 같이 모달로 연결하여 출력 할 페이지를 Modal Page 셀렉트 옵션에서 선택할 수 있다.

모달의 가로 길어를 퍼센트로 입력하여 설정 할 수 있다.

Select Modal에서 사용자가 선택한 값의 타입은 Reference 로 고정이다.

Select Modal에서 사용자가 선택한 값을 출력하는 Addon Component 타입은 Form이다. 폼의 타입을 update Form 또는 View 2가지로 선택 할 수 있다.

설정이 적용되어 사용자가 실제 사용하는 화면은 다음과 같다.

검색 아이콘을 클릭하면 다음과 같이 연결해 놓은 Modal Page가 출력된다. 데이터를 선택하고 [OK] 버튼을 클릭하자.

선택한 데이터 값이 Reference Type의 Form 애드온 컴포넌트로 하단에 출력되는 것을 확인 할 수 있다. 이때 삭제() 아이콘 버튼이 검색 버튼 우측에 생성되며, 이를 클릭하면 선택한 데이터 정보가 사라진다.

데이터를 다중 선택 할 수 있도록 Multiple 옵션을 제공한다.

Select Modal에서 사용자가 선택한 값의 타입은 Reference, Children 2가지가 있다.

Select Modal에서 사용자가 값을 선택하면, Sortable, List, Grid 3가지 타입으로 출력 할 수 있다.