Schedule
스케줄 형태로 데이터를 표시하는 Component로 일(day), 주(week), 월~금(workweek), 달(Month), 의제(Agenda)형태로 화면을 구성한다.
How to Create
New Component Popup 화면에서
List타입을 선택하고Next를 Click한다. (Step1)
Component Name과 Screen에서 표시되는 명칭(
Symbolic StringorCustom Name), 그리고 작성된 Business Object를 선택한 다음, Next를 Click한다.List에 표출될 Business Object의 Field를 선택한다. 이때 표시되는 Field는 위에서 선택한 Business Object에 포함된 Field가 표시되며, CALS System Field는 Default로 선택되어 있다.
적용 가능한 Component Attribute
- Tab Pane Id: Tab Component로 Screen이 구성되는 경우, 하단에 해당 Component가 배치되는 경우 Tab Component의 Panel Id값을 등록하여 Tab과 연결하기 위하여 사용된다.
- SQL Log Active: Component에 등록된 Lambda Service(Load, Save, Delete)로 실행되는 SQL 구문을 저장하는 속성으로 지정된 시간(SQL Log Active End Time)까지 로그 값을 저장한다.
- Views: Schedule Component에만 있는 속성으로 각 항목(day, week, workweek, Month, Agenda)를 체크하면 Schedule 화면 우측 상단에 선택 가능한 화면이 나타나 체크한 형태별로 화면을 구성한다.
- Current View: Schedule Component를 표시할 때 표시하는 초기 화면으로 Views에서 선택한 화면을 지정한다.
- Data Format: Schedule Component에만 존재하는 속성으로 기본값은
yyyy-MM-dd로1970-09-30형식으로 표시되며, 변경 가능하다. - Draggable: 달력 데이터의 Drag 가능 여부를 설정하는 속성이다. 기본값은 false이며 true로 설정 후 cell-drag 서비스를 통해 액션을 등록하여 사용할 수 있다.
- Resizable: 달력 데이터의 Resize 가능 여부를 설정하는 속성이다. 기본값은 false이며 true로 설정 후cell-drag 서비스를 등록하면 cell의 Resize 가 가능해진다.
- Category: 달력 데이터에 따라 Cell의 색상을 지정할 수 있는 속성으로 하위 속성인 Field는 색상을 지정할 때 기준이 되는 Field를 선택하고, 해당 필드에 연결할 공통코드를 Ref Code를 지정한다. 실제 색상은 Style – Category Color에서 지정한다.
- Collapse Disable: Component의 컨텐츠 접기 기능으로 Default값은 N/A로 사용자가 화면을 열고 닫을 수 있다.
YES로 변경 시 접기 기능이 비활성화 된다. - Default Collapse State: 사용자가 임의로 Component의 화면을 접거나 펼칠 수 있는 Collapse Disabled 속성 값이 활성화(Collapse Disabled =
FALSE)가 되어 있을 경우, Default Collapse State 속성을 이용하여 기본 값을 지정할 수 있으며, 기본 값은 N/A(=Open) 이며 펼쳐진 상태로 표시되고, Close로 지정할 시 접힌 상태로 표시된다. - Display Full Size Fixed: Component가 Screen에 Full-Size로 표출 여부를 설정한다. 일반적으로, Screen에 단일 Component만 있는 경우, Display Full Size Fixed를 사용한다.
- Style – Size: Component의 크기를 설정한다. 픽셀과 퍼센트 단위로 높이를 설정한다.
- Style – Category Color: Schedule에만 존재하는 속성으로 Category별 color를 지정한다. Color 지정 시 Common Code의 Code값을 기준으로 지정된다.
- Style – Outline: Component의 List의 겉 테두리, 즉 아웃라인 타입을 설정한다. Type을 Folder로 설정하게 되면, List의 테두리가 Folder Icon 형태로 변경된다.
- 사용 가능한 Control
- ToolbarButton: Toolbar Component에서 Button Control이다.
- ScheduleItem: Schedule Component에서 사용하는 Control로 화면에 표시해주는 각각의 달력 Item을 의미함. scheduleItem은 Data Key 속성을 가지고 있고, 해당 속성으로 Id, Subject, Start Time, End Time, Desc, Step, Manager, Type을 지정하여 캘린더 내의 데이터 값 위치를 지정한다.
사용 가능한 Service
| Name | Platform | Description |
|---|---|---|
| load | Common | Data loading 시 발생되는 Event |
| cell-click | Web | 캘린더에 등록된 데이터가 있는 경우 click시 나타나는 상세 popup의 삭제 버튼 icon에 대응되는 Service |
| cell-dbclick | Web | 캘린더 box를 더블 클릭하면 나타나는 서비스로 주로 신규 데이터 입력 및 수정을 연결한다. |
| cell-drag | Web | 등록된 데이터를 DragDrop으로 위치를 변경하여 날짜 데이터를 저장하는 Service를 연결한다. |
Cell-click: 아래 그림의 휴지통 icon에 연결되는 service로 delete lambda를 연결한다.
[그림1. Cell-click이 연결되는 icon]
[그림2. Cell-click의 service]
데이터 삭제를 위해 /CalsComWebCommonDeleteData lambda를 등록한다.
캘린더 내의 데이터 삭제이므로 캘린더 componet를 지정한다.
Delete lambda의 파라미터로 selectData 파라미터로 sysIds를 지정한다.
삭제 후 데이터 재조회를 진행한다. 따라서 캘린더 component를 fixedDataSelec를 이용하여 componentId를 지정한다.
Cell-dbclick: 캘린더 box를 더블 클릭하면 나타나는 서비스로 주로 신규 데이터 입력 및 수정을 연결한다. 아래 [그림1]과 같이 수정 icon에 연결되기도 한다. 즉 더블 클릭과 수정 icon 동시 적용 된다.
[그림1. Cell-dbclick에 연결되는 icon]
[그림2. 캘린더 component의 cell-dbclick 의 서비스]
① Show Popup Action을 등록한다.
② 신규 또는 수정하는 입력 Form Component의 URL을 Path에 등록한다.
[그림3. 캘린더 cell-dbclick의 controlId 파라미터]
③ 수정 popup에 데이터를 binding하기 위해 캘린더 component의 sys_id를 parameter key로 저장하여 전달한다.
[그림3. 캘린더의 신규 생성 popup Form Component의 load 서비스 정보]
④ Check Action에 캘린더 component에서 cell-dbclick 서비스의 path에서 등록한 파라미터를 urlParam으로 받아서 입력 값 체크를 한다.
⑤ 전달된 urlParam값이 있는 경우 데이터 load 할 component의 urlParamSelect의 key값을 해당 Component의 SYS ID 기준으로 조회한다.
[그림4. popup Form Component의 load에 Component-Interface Action 추가]
⑥ 캘린더의 popup 화면에 클릭한 지점의 시작일자, 시간, 종료일자, 시간을 지정하기 위해 Component-Interface Action을 추가한다.
⑦ Source Type: urlParam 으로 설정 후 Source Value는 아래 6개의 값을 설정할 수 있다.
- schedule_start_datetime
- schedule_start_date
- schedule_start_time
- schedule_end_datetime
- schedule_end_date
- schedule_end_time
⑧ Target Type: controlId로 설정 후 popup Form Component의 입력한 Source Value를 전달 받을 Control을 지정한다.
WARNING
Target Control의 유형에 따라 지정 가능한 Source Value 값이 상이하다.
- vQSText: date, datetime, time 모두 가능
- vQSDatePicker: date, datetime
- vQSDateTimePicker: date, datetime
- vQSTimeSelect: time
Cell-Drag: 캘린더에서 데이터를 Drag-Drop하면 자동 저장되게 하는 서비스로 start-time과 End-time의 값이 이동된 위치의 일시로 변경하여 저장한다.
[그림1. Cell-drag의 service]
Save Action을 등록하여 변경된 값이 저장 될 수 있도록 한다.
Save Action의 데이터 key인 sysId를 ControlId로 지정한다.