[]
        
(Showing Draft Content)

리포트 시트 디자이너

SpreadJS 디자이너 컴포넌트는 워크북에 리포트 시트를 삽입하는 옵션을 제공합니다.

리포트 시트 리본 버튼은 삽입 > 시트 탭 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 열린 워크북 탭 스트립에 Report1 탭이 추가되고, 리포트 시트 디자인 탭이 열립니다.


image


아래 이미지는 리포트 시트 디자인 페이지의 요소들을 보여줍니다.


image


새로운 리포트 시트를 생성하려면 아래 단계를 따르세요.

1. 템플릿 가져오기

기존 Excel 또는 SJS 파일을 템플릿으로 가져와 보고서를 생성할 수 있습니다. 리포트 시트 디자인 > 템플릿 가져오기 옵션을 사용하세요.

기존 파일을 불러온 후 확인(OK) 을 선택하면 가져온 파일이 워크시트에 표시됩니다. 가져온 파일에 워크시트가 없으면 "유효한 워크시트가 없습니다(No Valid Worksheets)" 메시지가 표시됩니다.


image

참고: 가져온 템플릿은 워크시트에 로드될 때 값과 스타일을 그대로 유지합니다.

2. 리포트 시트에 데이터 원본 추가

데이터 원본은 데이터> 데이터 바인딩 탭 그룹의 데이터 원본 리본 버튼을 클릭하여 생성할 수 있습니다. 리포트 시트를 추가하면 왼쪽에 데이터 원본 (표 리스트) 패널도 함께 표시됩니다.

데이터 원본 탭이 나타나며, 탭에서 테이블을 추가하고 CRUD(생성, 읽기, 수정, 삭제) 기능을 위한 원격 URL을 설정할 수 있습니다.

또한, 탭을 통해 테이블 데이터를 불러올 수 있습니다.


image


image


리포트 탭으로 이동합니다. 테이블 트리 노드를 더블 클릭하거나 확장 버튼을 클릭하여 열 이름을 확인할 수 있습니다.

또한, 검색 상자에 테이블 또는 열 이름을 입력하여 특정 테이블이나 열 데이터를 빠르게 찾을 수 있습니다. 일치하는 결과가 있으면 해당 테이블 트리가 확장되고, 일치하는 열이 강조 표시되어 탐색이 쉬워집니다. 이 기능은 대용량 데이터셋 작업 시 특정 데이터를 빠르게 찾는 데 특히 유용합니다.

일치하는 열이 없을 경우, "No Result!" 메시지가 표시되어 검색어에 해당하는 열이 없음을 알려줍니다.


image

리포트 시트에 열을 추가하려면, 열 이름을 하나씩 선택하거나 Ctrl 키를 눌러 여러 열을 선택합니다. 연속된 열 노드를 선택하려면 Shift 키를 사용하세요.

선택한 열 노드를 드래그하여 보고서 템플릿 셀 하나에 드롭하면, 설정된 채우기 방향에 따라 모든 선택된 노드가 표 리스트에 추가됩니다.


image

참고:

  • 테이블 열 개수가 시트 범위를 초과하면 “Invalid Range” 오류가 표시되며 드롭이 취소됩니다.

  • 템플릿 셀의 기본 셀 유형은 그룹 셀입니다.

3. 데이터 바인딩 및 템플릿 셀 속성 설정

ChatGPT에게 묻기.

리포트 시트에서는 오른쪽에 리포트 셀 패널을 제공하여, 리포트 시트의 셀을 선택한 후 보고서 템플릿에 필요한 보고 관련 설정을 구성할 수 있습니다.


image


데이터 바인딩: 템플릿 시트에서 템플릿 셀 유형을 관리하려면, 해당 셀의 유형(Type)과 바인딩(Binding) 옵션을 설정해야 합니다.

기능

디자이너

비고

유형

image

데이터 설정이 템플릿 셀에 적용되면 현재 셀의 데이터에만 영향을 미칩니다.

예를 들어, 템플릿 셀이 ListCell인 경우 현재 셀의 데이터만 리스트 모드에 표시됩니다.

데이터 열

image

테이블 이름이 변경되면 열 이름도 함께 변경됩니다.

필터

image

템플릿 셀에서 필터 조건을 설정하여 여러 테이블을 조인할 때 데이터를 필터링할 수 있습니다.

아래 설정을 사용하여 템플릿 시트에서 데이터 필터링 조건을 구성할 수 있습니다.

• 조건별 필터

• 수식별 필터

정렬

image

템플릿 셀은 레코드 정렬 규칙을 만드는 데 사용할 수 있습니다.

위/아래/삭제를 클릭하여 정렬 규칙의 순서를 변경하거나 제거할 수 있습니다.

기본 값

image

기본 값 옵션은 보고서 시트에 새로 추가된 레코드의 기본값을 생성하는 방법을 설정할 수 있는 수식입니다.

확장: 넘침 방향 설정, 특정 셀 접기, 컨텍스트 셀 추가를 위해 아래 확장 옵션을 구성해야 합니다.

기능

디자이너

설명

데이터 확장 방향

image

넘침 방향은 리포트 시트에서 데이터가 어떻게 넘치는지 제어합니다.

기본값은 세로 방향입니다.

축소 버튼

image

showCollapseButton 옵션은 보고서에서 셀의 하위 항목을 접는 버튼을 표시할지 여부를 제어합니다.

기본값은 false입니다.

추가로, 초기 상태 설정 드롭다운에서 확장됨 또는 축소됨 옵션을 선택하여 모든 그룹화된 셀의 초기 확장 상태를 확장 또는 축소로 구성할 수 있습니다.

컨텍스트

image

컨텍스트 옵션은 기본적으로 모든 하위 셀의 데이터를 필터링하며 보고서 레이아웃에도 영향을 미칩니다.

컨텍스트의 기본값은 Default입니다. 하지만 사용자 지정으로 변경하면 범위 선택 대화상자가 나타납니다.

페이지 표시: 템플릿 시트에서 페이지네이션 설정을 구성하려면 템플릿 셀에서 아래 옵션 중 하나를 선택할 수 있습니다.

image

보고서가 페이지별로 나누어지면 템플릿 셀의 페이지네이션 설정과 용지 크기가 보고서 시트에서 결합됩니다.

4. 템플릿 시트 셀 스타일 구성

보고서 시트의 셀은 해당 템플릿 셀에 맞게 스타일을 지정할 수 있습니다. 템플릿 시트에서 설정한 스타일은 현재 셀 확장과 함께 적용됩니다.

스타일은 리포트 시트 디자인 > 더티 데이터 스타일 버튼을 클릭하여 구성할 수 있습니다. 이 버튼을 클릭하면 다양한 셀 서식 옵션이 있는 셀 서식 대화상자가 열립니다.


image


리포트 시트는 새 데이터나 수식이 추가된 더티 셀도 사용자 지정할 수 있습니다. 더티 셀은 다시 계산이 필요함을 표시하며, 기본적으로 오른쪽 상단에 빨간색 모서리 접힘으로 표시됩니다.

참고: 템플릿 시트가 보호되어 있어도 디자인 모드에서는 보고서 시트를 편집할 수 있습니다. 보호된 리포트 시트는 미리보기 모드에서만 작동합니다.

5. 데이터 입력, 페이지네이션, 레이아웃 설정 구성

리포트 시트는 데이터 관리자를 통해 데이터 입력을 지원합니다. 데이터 입력 설정 버튼을 사용하여 어떤 셀이 어느 열에 다시 쓰일지 설정할 수 있습니다. 또한, 필드 값 편집기 대화상자의 드롭다운을 통해 특정 열에 정의된 매개변수 값을 선택할 수 있습니다(있는 경우).

리포트 시트는 수식과 고정 값 필드도 지원합니다.

다음 단계를 따라 리포트 시트의 데이터 입력 설정을 구성하세요.

  1. 리본 바의 리포트 시트 디자인(REPORT SHEET DESIGN) 탭에서 데이터 입력 설정(Data Entry Setting) 버튼을 클릭합니다. 데이터 입력 설정 대화상자가 나타납니다.


    image


    image


  2. 데이터 입력 설정 대화상자에서 추가 버튼을 클릭하여 새 데이터 입력 설정 규칙을 만듭니다. 생성한 규칙은 삭제 버튼을 사용해 삭제할 수 있습니다. 위/아래 화살표 키로 규칙의 순서를 변경할 수 있습니다.

    1. 반환 규칙 1 쓰기(Write Back Rule 1)” 옵션을 더블 클릭하여 규칙 이름을 변경합니다.

    2. 테이블 드롭다운에서 데이터 입력 테이블 이름을 선택하고, 필드 추가(Add Field) 버튼을 클릭하여 데이터 입력 필드를 추가합니다. 스마트 필드 추가(Smart Add Fields ) 버튼을 클릭하면 보고서 템플릿 시트에 바인딩된 현재 테이블의 모든 열을 한 번에 추가할 수 있습니다.


      image


    3. 값 열을 클릭하여 입력된 필드의 값 데이터를 변경합니다..

      1. 매개변수가 추가되지 않으면 Field Value Editor에 드롭다운이 표시되지 않습니다..


        image


      2. 매개변수가 추가된 경우, 드롭다운 버튼을 클릭하여 필드의 값으로 매개변수를 선택합니다..


        image

참고: 하나 이상의 필드에서 primaryKey를 true로 설정해야 하며, 그렇지 않으면 데이터 입력 설정이 무효화됩니다.

추가로, 리포트 시드 디자이너 리본의 페이지 설정(Pagination Setting) 버튼을 클릭하여 보고서를 페이지로 나눌 수 있습니다.

단, 템플릿 시트에서 페이지네이션 설정을 조정해야 합니다.


image


레이아웃 설정(Layout Setting) 버튼을 사용하여 보고서 레이아웃 구성을 위한 원하는 매개변수를 설정할 수 있습니다.


image

6. 미리보기 확인

미리보기 또는 페이지네이션 버튼을 클릭하여 렌더링 모드를 변경할 수 있습니다. 리포트 시트의 기본 렌더링 모드는 디자인 모드입니다.

  • 디자인: 템플릿을 디자인 모드로 표시합니다.


    image


  • 미리보기: 미리보기를 표시하며 데이터 입력도 지원합니다. 다양한 편집기를 사용하여 데이터를 입력할 수 있습니다.


    image


  • 페이지 매기기: 페이지별 미리보기를 표시하지만, 이 모드는 읽기 전용이며 셀 유형의 특수한 표시가 제거됩니다.


    image