매개변수 UI

// parametersUI 설정
let parameterUIHost = document.getElementById("ss");
reportSheet.setParametersUI(parameterUIHost, initParametersUI, onChanged);

function onChanged (sheet, changedArgs) {
    if (changedArgs.tag === "submitButton") { // "Submit" 버튼 클릭 시, 리포트 새로고침
        sheet.refresh();
    }
};

function initParametersUI (sheet) {
  sheet.suspendPaint();
  sheet.suspendEvent();
  
  initSheetStyle(sheet);
  addComboBox(sheet);  
  addDataTimePicker(sheet);
  addButton(sheet);
  
  sheet.resumeEvent();
  sheet.resumePaint();
}

function initSheetStyle (sheet) {
  sheet.getCell(-1, -1).backColor("rgb(225, 225, 225)");
  sheet.setColumnWidth(0, 5);
  sheet.setColumnWidth(1, 220);
  sheet.setColumnWidth(2, 10);
  sheet.setColumnWidth(3, 220);
  sheet.setColumnWidth(4, 10);
  sheet.setColumnWidth(5, 220);
  sheet.setColumnWidth(6, 10);
  sheet.setColumnWidth(7, 105);
  sheet.setRowHeight(0, 10);
  sheet.setRowHeight(1, 30);
  sheet.setRowHeight(2, 30);
  let row1Style = new GC.Spread.Sheets.Style();
  row1Style.font = '12px "Open Sans"';
  let row2Style = new GC.Spread.Sheets.Style();
  row2Style.textIndent = 1;
  row2Style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
  row2Style.hAlign = GC.Spread.Sheets.HorizontalAlign.left;
  row2Style.font = '12px "Open Sans"';
  sheet.setStyle(1, -1, row1Style);
  sheet.setStyle(2, -1, row2Style);
  sheet.setValue(1, 1, "CustomerID:");
  sheet.setValue(1, 3, "StartDate:");
  sheet.setValue(1, 5, "EndDate:");
}

function addComboBox (sheet) {
    let combo = new GC.Spread.Sheets.CellTypes.ComboBox();
    combo.items([
            { text: "VINET", value: "VINET" },
            { text: "TOMSP", value: "TOMSP" },
            { text: "SUPRD", value: "SUPRD" },
    ]);
    combo.editable(false);
    sheet.getCell(2, 1).backColor("rgb(214, 214, 214)").bindingPath("customerId").tag("customerId").cellType(combo);
}
function addDataTimePicker (sheet) {
    let startDateStyle = new Style();
    startDateStyle.cellButtons = [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openDateTimePicker",
            useButtonStyle: false,
            buttonBackColor: "rgb(214, 214, 214)",
            hoverBackColor: "rgb(214, 214, 214)",
        }
    ];
    style.backColor = "rgb(214, 214, 214)";
    style.formatter = "yyyy-mm-dd";
    sheet.getCell(2, 3).bindingPath("startDate").tag("startDate").setStyle(startDateStyle);
    
    let endDateStyle = new Style();
    endDateStyle.cellButtons = [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openDateTimePicker",
            useButtonStyle: false,
            buttonBackColor: "rgb(214, 214, 214)",
            hoverBackColor: "rgb(214, 214, 214)",
        }
    ];
    style.backColor = "rgb(214, 214, 214)";
    style.formatter = "yyyy-mm-dd";
    sheet.getCell(2, 5).bindingPath("endDate").tag("endDate").setStyle(endDateStyle);
}

function addButton (sheet) {
    let submitButton = new GC.Spread.Sheets.CellTypes.Button(); // add submit button
    submitButton.text("Submit");
    submitButton.buttonBackColor("#00897B");
    submitButton.buttonClickColor("#004D40");
   
    // Add tag into this cellButton cell to distinguish the different cell button.
    sheet.getCell(2, 7).tag("submitButton").foreColor("white").vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center).cellType(submitButton);
}