SpreadJS v14 서비스팩 2에서는 디자이너 컴포넌트에 향상된 기능이 많이 추가되었으며 새로운 통합문서 향상 및 프레임워크 지원도 포함되어 있습니다. 이러한 흥미로운 새로운 특징들에 대해 알아보세요.

개발자와 최종사용자(End-User)를 위한 디자이너 컴포넌트 기능 향상

이번 릴리즈는 주로 SpreadJS 디자이너 컴포넌트의 기능 향상과 사용자 정의에 초점을 맞추었습니다.

옵션인 디자이너 컴포넌트의 새로운 사용자 정의 옵션을 통해 고객에게 보다 현지화된 최적의 웹 Excel 솔루션을 쉽게 제공할 수 있습니다. 고객에게 이전보다 더 많은 Excel과 유사한 기능들과 사용자 정의 기능을 제공합니다.

싱글 툴바 모드

디자이너 컴포넌트의 리본 디스플레이는 싱글 툴바 모드로 향상되었습니다. 개발자들은 이제 사용자가 모바일 장치와 더 작은 화면을 더 잘 맞추기 위해 디스플레이 모드를 전환할 수 있는 버튼을 추가할 수 있습니다.

현지화 사용자 정의 지원

SpreadJS 컴포넌트 자체에는 현지화를 위한 광범위한 사용자 정의 옵션이 있습니다. 이번 릴리스에서는 디자이너 컴포넌트를 포함하도록 기능을 확장했습니다.

이제 리본에 있는 모든 UI를 현지화하여 고객의 언어 요구 사항을 충족할 수 있습니다.

컴포넌트 사용자 정의 지원

개발자는 디자이너 컴포넌트에 추가한 단추와 메뉴를 사용자 정의할 수 있으며, 이제 사용자 정의된 달력 보기 컨트롤 추가와 같은 사용자 정의 컴포넌트를 디자이너 리본에 추가할 수 있습니다.

리본 접기

싱글 툴바 모드 외에도 리본 접기 코드를 개선하여 개발자가 리본 접기 여부를 확인한 다음 코드에서 수동으로 접을 수 있는 상태를 제공합니다.

Excel과 유사한 이동 기능

이동 기능을 사용하면 편집 → 찾기 → 이동… 아래의 홈 탭으로 이동하여 이동 대화상자를 열어 시트 탐색에 대한 다양한 옵션을 제공할 수 있습니다.

찾기 및 바꾸기

이번 릴리스 이전에도 "찾기" 기능을 지원했습니다. 이번 릴리스에서는 새 메뉴 창도 포함하는 바꾸기 및 모두 바꾸기를 지원합니다.

이동 기능과 마찬가지로 사용자는 홈 탭의 편집 → 찾기 → 바꾸기에서 이 창을 열 수 있습니다.

이름 상자 기능 강화

디자이너 컴포넌트의 이름 상자에 현재 선택된 셀 범위의 이름이 표시됩니다. 이 기능은 이름 상자의 드롭다운 목록에서 이름을 선택할 때 사용자가 통합 문서에서 특정 셀 범위를 선택할 수 있도록 향상되었습니다.

React 디자이너 정의 파일

사용자가 요청한 정의 파일을 SpreadJS Designer Component React 래퍼에 추가하여 사용자의 JavaScript 애플리케이션에 쉽게 통합할 수 있습니다.

스파크라인 리본 섹션

삽입 탭의 "스파크라인" 섹션은 이제 "차트"와 유사합니다. 다양한 스파크라인 유형을 위한 드롭다운 버튼이 있는 단일 버튼이 있습니다.

서식 복사(Format Painter)

이제 사용자는디자이너 컴포넌트에서 새로운 Excel과 유사한 서식 복사(Format Painter) 버튼을 추가하고 사용할 수 있습니다. 이 기능은 Excel과 동일합니다. 버튼을 클릭하기만 하면 서식을 복사하여 붙여넣을 수 있습니다.

자동 개요

v14.2의 향상된 기능을 통해 SpreadJS에서 그룹 및 개요를 훨씬 더 쉽게 만들 수 있습니다. 그 예로는 새로 구현된 Excel 자동 개요 기능이 있습니다.

개요를 만들 셀 범위를 선택하고 자동 개요 버튼을 클릭하기만 하면 됩니다.

시트 복사/이동 컨텍스트 메뉴

보다 Excel과 유사한 환경을 제공하기 위해 v14.2는 사용자가 디자이너 컴포넌트에서 시트 탭을 마우스 오른쪽 단추로 클릭하면 뜨는 컨텍스트 메뉴에 시트 복사/이동 기능을 추가했습니다.

파일 가져오기 이벤트

파일 가져오기 기능을 사용자 정의할 수 있도록 파일을 가져올 때 실행되는 이벤트를 추가했습니다. 이렇게 하면 파일을 디자이너 컴포넌트로 처음 가져올 때 발생하는 사용자 정의 기능을 더 쉽게 구현할 수 있습니다.

파일 로드됨(Loaded)/리셋(Reset) 이벤트

새 Excel 또는 SSJSON 파일을 재설정하거나 열 때 디자이너 컴포넌트는 이제 통합문서를 로드할 때 필요한 논리를 사용자 정의할 수 있는 "로드됨(Loaded)" 또는 "리셋(Reset)" 이벤트를 실행합니다.

여러 시트 숨기기 취소

이 릴리스에서는 이제 새 메뉴를 사용하여 여러 숨겨진 시트의 숨기기를 해제할 수 있습니다.

도형 선택 창

새로운 도형 선택 창을 사용하여 사용자에게 시트에서 도형을 쉽게 선택하거나 숨기거나 표시할 수 있는 기능을 제공합니다.

사용자 정의 정렬 (색상 기준)

v14.2에서는 디자이너 컴포넌트의 사용자 정의 정렬에 셀, 색상 및 글꼴 색상 정렬 등의 옵션을 추가했습니다.

창 닫기 API

디자이너 컴포넌트를 사용자 정의할 때 일부 사용자는 사용자 정의를 지원하기 위해 대화 상자를 프로그래밍 방식으로 닫아야 한다는 것을 발견했습니다. 이에 따라 사용자가 원활하게 수행할 수 있는 API를 추가하였습니다.

/**
 * Close an opening dialog.
 * @param {string} templateName - The opening template name, the template must be registered in the designer.
 * @param {boolean} submitValue - Whether to submit the opening template values after closing the dialog. True is the same as clicking "OK" and false is the same as clicking "Cancel".
 * @example Sometimes users want to close the dialog directly without UI, so they can use closeDialog and decide whether to submit the values after closing the dialog.
 */
export function closeDialog (templateName: string, submitValue: boolean): void;
//GC.Spread.Sheets.Designer.closeDialog("myDialog", true);

리본 스크롤 지원

디자이너 컴포넌트의 리본을 왼쪽과 오른쪽으로 스크롤하여 디자이너를 작은 화면에서도 최적으로 표시할 수 있습니다.

통합문서 기능 향상

디자이너 컴포넌트 기능 향상 외에도 SpreadJS의 주요 기능에 몇 가지 향상된 기능이 추가되었습니다.

Excel과 동일한 키보드 단축키 추가 지원

이제 SpreadJS는 행을 선택하는 Shift + Space 또는 시트의 시작 부분으로 이동하는 Ctrl + Home과 같은 Alt 조합 및 Fn 키를 포함하는 Excel과 동일한 단축 키를 지원합니다.

상태 표시줄 FindControl 메서드

SpreadJS 인스턴스의 기존 상태 표시줄을 찾아 해당 상태 표시줄에 사용자 정의 데이터를 추가할 수 있도록 API를 제공합니다.

// Creating the status bar
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);

// Get the status bar if already created
var statusBar = GC.Spread.Sheets.StatusBar.findControl('statusBar');

시트 이름 증분 로딩 

증분 로드를 사용하여 통합문서를 시트별로 로드할 수 있습니다. 이 릴리스에서는 로드 중인 현재 시트의 이름이 상태 표시줄에 표시되어 로드 상태에 대한 자세한 정보를 사용자에게 제공합니다.

통합 문서 생성자 Host ID

적은 양의 코드로 통합문서를 더 빨리 만들 수 있습니다. 이전 릴리스에서는 다음과 유사한 SpreadJS 인스턴스의 호스트 DIV 요소를 가져오려면 "document.getElementById"를 사용해야 했습니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

이제 사용자는 호스트 요소의 이름을 전달하기만 하면 됩니다.

var spread = new GC.Spread.Sheets.Workbook("ss");

현재 지역화 리소스 가져오기

v13.2 릴리스에서는 사용자가 사용자 정의 리소스를 설정할 수 있는 API를 통해 SpreadJS에 대한 지역화 리소스를 사용자 정의할 수 있는 기능을 도입했습니다.

그러나 기존 SpreadJS 인스턴스에서 현재 리소스를 검색할 수 있는 API가 없었습니다. v14.2에서는 사용자 정의하기 위해 SpreadJS 인스턴스의 현재 리소스를 얻기 위해 getResources API를 제공합니다.

///* function static GC.Spread.Common.@CultureManager.getResources(cultureName?: string): object
/**
 * Gets the specified or current working resources.
 * @static
 * @param {string | null} cultureName The culture name to get. If the cultureName is null, will return the current working resources.
 * @returns {object} The specified or current working resources. Null if no language is defined.
 */
GC.Spread.Common.CultureManager.getResources(cultureName?: string);

이 API를 사용하여 리소스를 가져와 다음과 같이 사용자 정의할 수 있습니다.

spread.options.showResizeTip = GC.Spread.Sheets.ShowScrollTip.both;
var originResources = GC.Spread.Common.CultureManager.getResources("ja-jp"); // get the specific culture resources
originResources.Sheets.Tip_Width = "宽度： {0} 像素"; // change the culture based on the origin culture resources.
GC.Spread.Common.CultureManager.addCultureInfo("custom", null, originResources);
GC.Spread.Common.CultureManager.culture("custom");

서식 붙여넣기 기능 향상

사용자에게 엑셀과 같은 기능을 제공할 수 있도록 서식 붙여넣기를 개선했습니다. 이제 이 기능은 범위에 관계없이 붙여넣은 범위를 확장합니다.

시트 인덱스 변경 API

사용자는 UI에서 시트를 클릭한 후 드래그하여 시트 인덱스를 수동으로 만들 수 있습니다. v14.2에서는 API를 추가하여 시트 순서를 프로그래밍 방식으로 변경했습니다.

/**
* Change sheet index and reorder sheets.
* @param {string} sheetName The sheet name.
* @param {number} targetIndex The target index.
* @example
* //This example show how to change sheet index.
* var spread = GC.Spread.Sheets.findControl(ss);
* spread.changeSheetIndex("Sheet1", 2);
*/
 changeSheetIndex(sheetName: string, targetIndex: number): void {}

이 API를 사용하여 다음과 같이 첫 번째 시트를 통합문서의 마지막 위치로 이동할 수 있습니다.

spread.changeSheetIndex("sheet1", 2);

시트 복제 API

과거에는 Designer UI에서 시트를 복사할 수 있었지만, 개발자가 코드에서 시트를 복제할 수 있는 API를 추가했습니다.

///* field GC.Spread.Sheets.Commands.copySheet: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, targetIndex: number, newName: string, includeBindingSource?: boolean}): void}
/**
 * Represents the command used to copy sheet.
 * @param context The context of the operation.
 * @param options The options of the operation.
 * The arguments of the execute method are as follows.
 * context {GC.Spread.Sheets.Workbook} The context of the operation.
 * options {Object} The options of the operation.
 * options.sheetName {string} The clone sheet name.
 * options.targetIndex {number} The target index.
 * options.newName {number} The new sheet name.
 * options.includeBindingSource {boolean} Whether to bind data source to clone sheet
 * @example
 * //This example clones a sheet.
 * spread.commandManager().execute({cmd: "copySheet", sheetName: "Sheet1", targetIndex: 3, newName: "Sheet1 (2)", includeBindingSource: true});
 */
Commands[COPY_SHEET] = {
    canUndo: false,
    execute: function (context: IWorkbook, options: IWorkSheetOption): boolean {
    }
};

차트 기능 향상

고객이 요청한 또 다른 기능은 차트 레이블에 줄 바꿈을 추가하는 것입니다. 원래 이 기능은 v14 릴리스에서 차트 제목, X축 레이블 및 X축 제목에서 줄 바꿈을 지원하기 위해 추가되었습니다.

그러나 차트 범례뿐만 아니라 Y축의 줄 바꿈을 지원하도록 개선했습니다.

새로운 프레임워크 지원

이제 SpreadJS v14.2에서 Vue 3 및 Angular 12 자바스크립트 프레임워크를 지원하게 되어 기쁩니다. 또한 iOS 14 기기에서 SpreadJS를 사용할 수 있는 지원도 추가했습니다. 지금 바로 30일 무료 체험판을 다운로드하여 SpreadJS v14.2를 사용해 보세요.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ