! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

파일 메뉴 사용자 정의 - 디자이너 컴포넌트 > 온라인 스터디

본문 바로가기

디자이너컴포넌트 파일 메뉴 사용자 정의 - 디자이너 컴포넌트

페이지 정보

작성자 GCK루카스 작성일 2022-12-12 15:32 조회 402회 댓글 0건

본문

최근 기업과 정부의 디지털 트랜스포메이션이 가속화됨에 따라, 기존의 Excel(엑셀) 문서를 온라인 시스템에 통합하고, 이러한 엑셀 문서를 웹 상에서 관리하고 편집하고자 하는 요구 사항이 점점 많아지고 있습니다. 

이를 위해, 웹 상에 구글 시트(Google Sheet) 또는 MS Office 365와 같이 기존의 Excel 파일과 호환이 되고, 최종 사용자가 기존의 MS Excel을 사용하는 것과 동일한 방식으로 사용할 수 있는 Excel(엑셀) 에디터를 구현하는 것은 결코 쉬운 일이 아닐 것 입니다.

이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라고 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 SpreadJS를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시는 개발자 분들을 위해, SpreadJS를 기반으로 하는 SpreadJS 디자이너 컴포넌트를 제공하고 있습니다.


*실제 SpreadJS 디자이너 컴포넌트를 구현한 모습입니다.


 

SpreadJS 디자이너 컴포넌트는 구글 시트, 온라인 MS Excel과 유사한 UI, 메뉴 구조 그리고 Excel의 기능을 웹 페이지 상에 구현하고자 하시는 분들을 위한 완전한 Front-End Excel 에디터입니다.

디자이너 컴포넌트에는 아래와 같은 요소들이 포함되어 있습니다.

  • 리본 메뉴
  • 수식 표시줄
  • 상태 표시줄
  • 측면 패널
  • 컨텍스트 메뉴

기본적으로 구성된 컴포넌트를 그대로 사용할 수도 있지만, 원하시는 형태에 맞게 커스터마이징하여 사용하실 수 있습니다. "탭, 버튼, 컨텍스트 메뉴, 대화상자, 파일 불러오기 이벤트 바인딩, 상태 표시줄, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우에는,

 여기를 눌러 해당 글 목록을 확인하실 수 있습니다.


이번 글에서는 디자이너 컴포넌트를 커스터마이징하는 방법 중, 파일 메뉴를 눌렀을 때 나오는 화면에 사용자 지정 컴포넌트를 추가하는 방법을 소개합니다.


디자이너 컴포넌트 파일 메뉴


SpreadJS 디자이너 컴포넌트의 "파일 메뉴"를 선택하면, MS Excel에서 볼 수 있는 것과 같이 "새로 만들기", "저장(내보내기)", "열기(가져오기)", "인쇄"와 같은 추가적인 매뉴 항목들을 볼 수 있습니다.


d587a9bab56df92f113651c160b053e3_1671065812_6634.gif
 

위와 같은 파일 메뉴의 화면에 새로운 메뉴를 추가하고 필요 없는 메뉴는 삭제 할 수 있도록,

디자이너 컴포넌트에서는 사용자 정의를 위한 메소드들을 제공하고 있습니다.

이를 통해, 고객이나 기업에 맞춤 메뉴 항목을 추가로 제공하여, 업무 효율성을 극대화할 수 있는 솔루션을 제공할 수 있습니다.



파일 메뉴 항목 추가하기


아래 단계를 통해, 아래 이미지와 같이 "Custom Actions"이라는 새로운 메뉴와 하위 메뉴를 만들어 보도록 하겠습니다. e65c664a46839280db3bdb72d6c190d6_1671440055_4807.png


  1. getTemplate 메서드를 사용하여 파일 메뉴 패널 템플릿을 가져옵니다.

    let fileMenuTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);


  2. 파일 메뉴 패널 템플릿을 작성하여 사용자 정의 항목 및 관련 옵션을 추가합니다. 만들고자 하는 메뉴 구조는 아래와 같습니다: - Customs Actions -- Printer -- Action 1 -- Action 2

        var listContainer = template["content"][0]["children"][0]["children"][0]["children"][0]["children"][1];
        listContainer.items.push({ text: "Custom Actions", value: "CustomItem" });
    
        var listDisplayContainer = template["content"][0]["children"][0]["children"][1];
        listDisplayContainer.children.push({
            type: "Container",
            visibleWhen: "activeCategory_main=CustomItem",
            children: [
                {
                    type: "TextBlock",
                    margin: "50px 0 15px 50px",
                    text: "Custom Actions",
                    style: "font-size:36px;line-height:80px"
                },
                {
                    type: "ColumnSet",
                    margin: "0 0 0 50px",
                    children: [
                        {
                            type: "Column",
                            children: [
                                {
                                    type: "List",
                                    className: "file-menu-list",
                                    items: [
                                        {
                                            text: "Print",
                                            value: "print"
                                        },
                                        {
                                            text: "Action 1",
                                            value: "action_1"
                                        },
                                        {
                                            text: "Action 2",
                                            value: "action_2"
                                        }
                                    ],
                                    bindingPath: "custom_item"
                                }
                            ],
                            width: "350px"
                        },
                        {
                            type: 'Container',
                            children: [
                                {
                                    "type": "Button",
                                    "margin": "20px 50px",
                                    "text": "Printing",
                                    "width": 120,
                                    "height": 120,
                                    "iconClass": "icon-common",
                                    "bindingPath": "custom_item_print",
                                    "iconPosition": "top"
                                }
                            ],
                            visibleWhen: 'custom_item=print'
                        },
                        {
                            type: 'Container',
                            children: [
                                {
                                    "type": "Button",
                                    "margin": "20px 50px",
                                    "text": "Action 1",
                                    "width": 120,
                                    "height": 120,
                                    "iconClass": "icon-common",
                                    "bindingPath": "custom_item_action_1",
                                    "iconPosition": "top"
                                }
                            ],
                            visibleWhen: 'custom_item=action_1'
                        },
                        {
                            type: 'Container',
                            children: [
                                {
                                    "type": "Button",
                                    "margin": "20px 50px",
                                    "text": "Action 2",
                                    "width": 120,
                                    "height": 120,
                                    "iconClass": "icon-common",
                                    "bindingPath": "custom_item_action_2",
                                    "iconPosition": "top"
                                }
                            ],
                            visibleWhen: 'custom_item=action_2'
                        }
                    ]
                }
            ]
        });


  3. 작성한 템플릿을 registerTemplate 메서드를 사용하여 등록합니다.

    GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuTemplate);


  4. 버튼 클릭 시, 수행할 간단한 동작들을 JS코드로 작성합니다.

                    var fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);
                    var oldExecuteFn = fileMenuPanelCommand.execute;
                    fileMenuPanelCommand.execute = function (context, propertyName, newValue) {
                        console.log("aaa");
                        oldExecuteFn.apply(this, arguments);
                        switch (propertyName) {
                            case 'custom_item_print':
                                var workbook = context.getWorkbook();
                                workbook.print();
                                break;
                            case 'custom_item_action_1':
                                alert('do something for action 1')
                                break;
                            case 'custom_item_action_2':
                                alert('do something for action 2')
                                break;
                        }
                    }
                    var config = GC.Spread.Sheets.Designer.DefaultConfig;
                    config.commandMap = {
                        fileMenuPanel: fileMenuPanelCommand
                    }


  5. config를 설정하며 디자이너 인스턴스를 초기화합니다.

    let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);


  6. 아래와 같이 파일 메뉴에 "Custom Actions" 항목이 추가된 것을 확인하실 수 있습니다. e65c664a46839280db3bdb72d6c190d6_1671440055_4807.png



 

파일 메뉴 항목 제거하기


아래 단계를 따라 파일 메뉴에 항목을 제거할 수 있습니다. 이를 통해, 사용자의 사용 범위를 제안할 수 있습니다.


  1. getTemplate 메서드를 사용하여 파일 메뉴 패널 템플릿을 가져옵니다.

      let fileMenuTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);


  2. 파일 메뉴 패널의 좌측 항목 중 원하는 항목을 제거합니다.

      let listContainer = fileMenuTemplate["content"][0]["children"][0]["children"][0]["children"][0]["children"][1];
      listContainer.items.splice(0,2);


  3. 파일 메뉴 패널의 우측 항목도 함께 제거합니다.

      let listDisplayContainer = fileMenuTemplate["content"][0]["children"][0]["children"][1];
      listDisplayContainer.children.splice(0,2);


  4. 작성한 템플릿을 registerTemplate 메서드를 사용하여 등록합니다.

      GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuTemplate);


  5. 다만, "새로 만들기" 항목을 제거하면 우측 항목의 최초 화면이 제대로 나오지 않기 때문에 최초 항목을 설정해 주어야 합니다.

      let fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);
      let oldExecuteFn = fileMenuPanelCommand.getState;
      fileMenuPanelCommand.getState = function (context, propertyName, newValue) {
        let options = oldExecuteFn.apply(this, arguments);
        if (options['activeCategory_main'] === 'New') {
          options['activeCategory_main'] = 'Export';
        }
        return options;
      }
      
      let config = GC.Spread.Sheets.Designer.DefaultConfig;
      config.commandMap = {
        fileMenuPanel: fileMenuPanelCommand
      }


  6. 디자이너 인스턴스를 초기화합니다.

      let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);


  7. 아래와 "내보내기"와 "인쇄" 제외한, 모든 항목이 제거된 모습을 확인하실 수 있습니다. e65c664a46839280db3bdb72d6c190d6_1671440885_4448.png



 "탭, 버튼, 컨텍스트 메뉴, 대화상자, 파일, 상태 표시줄, 사용자 지정 컴포넌트, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우,

여기를 눌러 글 목록을 확인해 보세요.




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

spjs.png

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.