# 매개변수 UI
## Content
리포트 시트에서는 매개변수의 값을 설정하고 사용자 인터페이스에서 매개변수를 표시하고 정렬하기 위해 호스트를 사용할 수 있습니다.
매개변수 UI를 통해 사용자는 값을 입력하거나 선택하여 보고서에 표시되는 데이터에 영향을 줄 수 있습니다.
[GC.Spread.Report.ReportSheet](/spreadjs/api/classes/GC.Spread.Report.ReportSheet) 클래스의 `setParametersUI` 메서드를 사용하여 리포트 시트의 매개변수 UI의 모양과 동작을 사용자 지정할 수 있습니다.
`setParametersUI` 메서드는 세 개의 매개변수를 받습니다:
* **parameterUIHost**: 매개변수 UI가 표시될 호스트 요소 또는 호스트 ID를 나타냅니다.
* **initParametersUI**: 매개변수 UI 시트를 수정하는 콜백 함수입니다.
* **onChanged**: 매개변수 UI 값이 변경되거나 버튼이 클릭될 때 호출되는 콜백 함수입니다.
>type=warning
> 참고: 매개변수 UI를 설정하기 전에 [매개변수 값](/spreadjs/docs/features/reportsheet/report-sheet-settings/parameter)을 생성하고 리포트 시트에서 [필터 조건](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-filter-condition)에 해당 매개변수를 설정해야 합니다.
다음 코드 샘플은 `parameterUI`를 설정하는 방법을 보여줍니다.
```javascript
// 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);
}
```
### SpreadJS 디자이너 사용하기
리포트 시트에서 매개변수 UI를 디자인하려면 다음 단계를 따르시기 바랍니다.:
1. 리포트 시트를 삽입하고 매개변수를 생성한 후, 해당 매개변수를 필터 조건에 설정합니다.
2. **리포트 시트 디자인 (REPORT SHEET DESIGN)** 탭에서 매개변수 UI 설계(Design ParameterUI)를 클릭합니다.
3. **매개변수 패널 설계(PARAMETER PANEL DESIGN)** 탭이 열리며, ParameterUI 영역이 표시됩니다.
4. 리본 메뉴의 **홈(HOME)** 탭으로 전환하여 ParameterUI의 스타일을 설정합니다. 예: CellButton(DateTimePicker), CellType(Button, Combo, Checkbox) 등
5. ParameterUI 셀에 스타일 적용합니다.
6. 셀을 선택하고 셀 모서리의 SmartTag를 클릭하여 옵션을 설정합니다.
7. 셀 유형을 CellButton으로 변경하고 **변경 시 제출(Submit OnChange)** 체크박스를 활성화합니다.
8. 리포트 시트 **미리보기 모드**에서 **제출**(Submit) 버튼을 클릭하면 보고서가 새 매개변수 값으로 재생성됩니다.
9. 리포트 시트 영역을 클릭하여 activeSpread 를 리포트 시트로 전환합니다.
10. **미리보기(Preview)** 버튼을 클릭하여 미리보기 모드로 전환합니다.
11. CustomerID, StartDate, EndDate 값을 변경한 후 제출(Submit) 버튼을 클릭하면, 해당 값에 맞춰 보고서가 다시 생성됩니다.
