소개

Office 추가 기능을 개발할 때 JavaScript API의 간단한 샘플을 GitHub - OfficeDev/office-js-snipet-explorer에서 확인할 수 있습니다.
이 안에 있는 Snipet Explorer
Office 2016 JavaScript API Snippet Explorer (Preview)
Office 2016 JavaScript API Snippet Explorer (Preview)
는 목록을 선택하여 소스 코드 샘플을 확인할 수 있습니다.

예를 들면

Office 2016 JavaScript API Snippet Explorer (Preview) 에서,
"-- choose a gruop --"에서 Range를 선택하면
"-- choose a snipet --"후보가 좁혀집니다.
"-- choose a snipet --"에서 Set Number Format in Range를 선택합니다.
그러면
Set the number format for cell A1 in the active sheet

sample.js

Excel.run(function (ctx) {
    ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "d-mmm";
    return ctx.sync();
}).catch(function (error) {
    console.log(error);
});

라고 표시되었습니다.
활성 시트의 셀 A1에 날짜 14-Mar(예: 2017/8/23을 셀에 입력하면 14-Mar로 표시됨) 형식의 형식을 설정하는 소스 코드 샘플이 표시됩니다.

구체적으로는

Visual Studio를 시작하고 새 프로젝트를 만들고 Office/SharePoint==>추가 기능=>Excel 추가 기능을 선택합니다.



이름을 결정합니다. OK를 누릅니다.



이번에는 새 기능을 Excel에 추가 (Taskpain)를 선택하고 마침을 누릅니다.
솔루션 탐색기에서 Home.js를 왼쪽 두 번 클릭하여 JavaScript를 엽니다.
샘플 코드가 입력되었습니다.
버튼을 눌렀을 때의 동작이 되는, 56행부터 91행째를 발췌합니다.

Home.js

    function hightlightHighestValue() {
        // Excel オブジェクト モデルに対してバッチ操作を実行します
        Excel.run(function (ctx) {
            // 選択された範囲に対するプロキシ オブジェクトを作成し、そのプロパティを読み込みます
            var sourceRange = ctx.workbook.getSelectedRange().load("values, rowCount, columnCount");

            // キューに入れるコマンドを実行し、タスクの完了を示すために Promise を返します
            return ctx.sync()
                .then(function () {
                    var highestRow = 0;
                    var highestCol = 0;
                    var highestValue = sourceRange.values[0][0];

                    // セルを検索して強調表示します
                    for (var i = 0; i < sourceRange.rowCount; i++) {
                        for (var j = 0; j < sourceRange.columnCount; j++) {
                            if (!isNaN(sourceRange.values[i][j]) && sourceRange.values[i][j] > highestValue) {
                                highestRow = i;
                                highestCol = j;
                                highestValue = sourceRange.values[i][j];
                            }
                        }
                    }

                    cellToHighlight = sourceRange.getCell(highestRow, highestCol);
                    sourceRange.worksheet.getUsedRange().format.fill.clear();
                    sourceRange.worksheet.getUsedRange().format.font.bold = false;

                    // セルを強調表示
                    cellToHighlight.format.fill.color = "orange";
                    cellToHighlight.format.font.bold = true;
                })
                .then(ctx.sync);
        })
        .catch(errorHandler);
    }

여기에 이전 스니펫 탐색기에 표시된 소스 코드(Sample.js의 해당 부분)를 붙여넣습니다.

Home.js

    function hightlightHighestValue() {
        Excel.run(function (ctx) {
            ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "d-mmm";
            return ctx.sync();
        }).catch(function (error) {
            console.log(error);
        });
    }

이렇게 붙여넣고 [▶시작]을 누릅니다. Taskpane을 누릅니다.



샘플 코드를 그대로 사용하고 있으므로 다른 동작은 신경쓰지 않고,
[강조 표시!]를 누릅니다.
셀 A1의 서식이므로 외형에 아무런 변화가 없지만 셀 A1에 날짜를 입력하면

분류: 사용자 정의

종류: d-mmm

그리고 프로그램대로 반영되어 있음을 알 수 있습니다.

그러나 사용자 정의이므로 d-mmm을 [$-en-US]d-mmm;@로 변경합니다.

Home.js

    function hightlightHighestValue() {
        Excel.run(function (ctx) {
            ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "[$-en-US]d-mmm;@";
            return ctx.sync();
        }).catch(function (error) {
            console.log(error);
        });
    }

아까처럼
[강조 표시!]를 눌러 연월일을 입력한 화면이 다음과 같습니다.



이번에는

분류: 날짜

종류: 14-Mar

되었습니다.
날짜 형식에서는 로캘을 조정해야 하지만 이런 식으로 Office 추가 기능을 개발할 수 있습니다.
셀 서식은 새 JavaScriptAPI에 구현되어 있으므로 Excel2013에서는 작동하지 않습니다.
이 샘플 프로그램의 기본 상태는 Excel 2013에서 다른 동작 (버튼이 [강조 표시!] 대신 [표시!])이며, [표시!] 버튼으로 $('#highlight-button').click( displaySelectedCells);가 실행되도록 잘라내고 있습니다.
서식을 설정할 수 없는 경우, 대체 방법이 없으면, 이전의 기사 Excel2016 이상에서 실행되는 Excel 추가 기능 개발 의 애드인 매니페스트 추기도 실시해, Excel2013 으로 실행할 수 없게 하는 대응도 필요하게 됩니다.

참고

GitHub - OfficeDev/office-js-snipet-explorer
Word 버전
Office 2016 JavaScript API Snippet Explorer (Preview)
Excel 버전
Office 2016 JavaScript API Snippet Explorer (Preview)

결론

Snippet Explorer는 목록에서 원하는 작업을 선택하는 것만으로 소스 코드를 확인할 수 있으므로 사용하기 쉽다고 느꼈습니다.
Preview판이므로, 언제까지 사용할 수 있을지는 모릅니다만.

끝까지 읽어 주셔서 감사합니다.