그리드 도구 모음에 사용자 정의 작업 추가
ThingWorx 9.4 이상에서는 그리드 도구 모음에 표시할 사용자 정의 작업을 정의할 수 있습니다.
개요
• 버튼
• 드롭다운
• 링크
• 전환 버튼
그리드 위젯 도구 모음에 대한 사용자 정의 작업 구성
1. Composer에서 작업 정의에 대한 필수 데이터가 포함된 인포테이블을 반환하는 데이터 서비스를 만듭니다. 지원되는 데이터 형식에 대한 자세한 내용은 예: 샘플 도구 모음 구성을 참조하십시오.
2. Mashup Builder에서 데이터 패널을 사용하여 매쉬업에 서비스를 추가합니다.
3. 서비스 인포테이블을 그리드 위젯의 ToolbarActions 속성에 바인딩합니다. 사용자 정의 작업에 대한 추가 속성이 속성 패널에 나열됩니다.
4. 속성 패널에서 도구 모음 작업을 구성합니다. 내부 위젯 바인딩을 만들려면 바인딩 구성 대화 상자를 사용합니다.
5. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
사용자 정의 작업 속성
다음 표에는 그리드 위젯에 추가할 수 있는 각 사용자 정의 작업 유형에 대한 속성이 나와 있습니다.
|
작업 유형
|
속성/이벤트 이름
|
설명
|
예
|
|---|---|---|---|
|
버튼
|
<actionId>_Clicked
|
버튼을 클릭할 때 트리거되는 이벤트입니다.
|
Button1_Clicked
|
|
<actionId>_Disabled
|
도구 모음에서 버튼을 비활성화합니다.
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
도구 모음의 버튼에 대한 표시 유형을 제어합니다.
|
Button1_Visible
|
|
|
드롭다운
|
<actionId>_Disabled
|
도구 모음의 드롭다운을 비활성화합니다.
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
이 바인딩 가능한 속성을 사용하면 드롭다운 작업에서 선택한 텍스트의 값을 설정하고 검색할 수 있습니다.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
드롭다운 목록에서 선택한 항목이 변경될 때 트리거되는 이벤트입니다.
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
도구 모음의 드롭다운에 대한 표시 유형을 제어합니다.
|
Dropdown1_Visible
|
|
|
링크
|
<actionId>_Disabled
|
도구 모음의 링크를 비활성화합니다.
|
Link1_Disabled
|
|
<actionId>_Visible
|
도구 모음의 링크 작업에 대한 표시 유형을 제어합니다.
|
Link1_Visible
|
|
|
전환 버튼
|
<actionId>_Disabled
|
도구 모음의 전환 버튼을 비활성화합니다.
|
Toggle1_Disabled
|
|
<actionId>_State
|
이 바인딩 가능 속성을 사용하면 전환 버튼 작업의 상태를 설정하고 검색할 수 있습니다.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
전환 버튼의 상태가 변경될 때 트리거되는 이벤트입니다.
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
도구 모음의 전환 버튼 작업에 대한 표시 유형을 제어합니다.
|
Toggle1_Visible
|
예: 그리드 도구 모음에 대한 사용자 정의 작업을 구성하는 서비스 만들기
다음 예에서는 그리드 도구 모음에서 다음 사용자 정의 작업을 만드는 서비스를 보여줍니다.
• 행 높이를 제어하는 드롭다운입니다.
• 행 번호의 표시 유형을 제어하는 전환 버튼입니다.
• 그리드에서 선택한 행을 내보내는 내보내기 버튼입니다.
Composer에서 사용자 정의 작업에 대한 필수 데이터가 포함된 인포테이블을 반환하는 데이터 서비스를 만듭니다. 지원되는 데이터 형식에 대한 자세한 내용은 인포테이블을 사용하여 도구 모음 작업 정의를 참조하십시오.
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
Mashup Builder에서 다음 바인딩을 만듭니다.
• 그리드 행의 높이를 제어하려면 SelectedText 드롭다운 속성을 문자열 기본 유형을 숫자로 변환하는 표현식 함수에 바인딩합니다. 그런 다음 함수의 출력을 MinRowHeight 그리드 속성에 바인딩할 수 있습니다.
• 행 번호의 표시 유형을 제어하려면 전환 버튼의 T1_State 속성을 ShowRowNumbers 그리드 속성에 바인딩합니다.
• 행을 선택할 때 내보내기 버튼을 표시하려면 RowsSelected 그리드 속성을 B1_Visible 버튼 속성에 바인딩합니다.
사용자 정의 작업에 사용할 수 있는 구성 옵션에 대한 자세한 내용은 예: 샘플 도구 모음 구성을 참조하십시오.