도구 모음 위젯(테마 적용 가능)
소개
 |
• 도구 모음 위젯은 ThingWorx 9.2.x 이상 버전에서 사용할 수 있습니다.
• 이 위젯은 플랫폼에 표준 포함으로 제공되며 SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
|
도구 모음 위젯은 반응형 도구 모음을 사용자의 매쉬업에 표시합니다. 이 위젯은 자주 사용하는 함수를 압축 형식으로 표시하도록 구성할 수 있는 공통 요소를 결합합니다. 도구 모음을 사용하면 그리드, 목록, 차트 등의 데이터를 다루는 위젯에 대한 작업을 수행할 때 필터를 생성하고, 서비스를 트리거하고, 보기를 수정할 수 있습니다.
위젯을 구성하고 작업을 그리드 위젯에 바인딩하는 방법은 다음 비디오를 시청하십시오. 새 탭에서 비디오를 열려면 플레이어에서 제목을 클릭합니다.
도구 모음 위젯은 다음으로 구성됩니다.
• 데이터 필터 - 단순 필터 상자 또는 칩 기반 데이터 필터를 포함합니다.
| | 단순 필터는 위젯을 작업공간으로 끌 때 기본적으로 활성화됩니다. |
단순 필터 | 칩 기반 데이터 필터 |
 |  |
• 작업 - 사용자 정의 작업을 포함합니다.
도구 모음 작업
도구 모음 위젯을 사용하면 그리드, 목록, 차트 등의 다른 위젯에 대해 다음 작업을 수행할 수 있습니다.
• 버튼
• 드롭다운
• 링크
• 전환
다음 이미지는 샘플 작업을 보여줍니다.
필터와 결합된 이러한 작업은 매쉬업의 데이터에 대한 유효 도구 모음으로 작동합니다. 도구 모음에는 요구 사항에 따라 여러 버튼, 드롭다운, 링크 또는 전환 버튼이 포함될 수 있습니다. 이 도구 모음은 반응형으로, 작업에 사용되는 공간에 오버플로가 있는 경우 드롭다운 목록에 사용자 정의 작업이 제대로 표시되도록 작동합니다. 작업의 드롭다운 목록을 보기 위해 클릭할 수 있는 오버플로 컨트롤 아이콘이 나타납니다.
다음 이미지는 칩 기반 데이터 필터 및 작업이 있는 도구 모음 위젯의 예를 보여줍니다.
1. 데이터 필터 - 칩 기반 데이터 필터입니다. FilterType 속성을 사용하여 필터를 설정할 수 있습니다.
2. 칩 - 이 영역에는 칩 기반 데이터 필터로 설정된 필터 칩이 표시됩니다.
3. 작업 - 이 영역에는 버튼, 드롭다운 목록, 링크 및 전환 버튼이 포함되어 있습니다.
4. 오버플로 컨트롤 아이콘
아래의 속성 표에 설명된 속성을 사용하여 데이터 필터를 구성할 수 있습니다. 작업 구성에 대한 자세한 내용은 인포테이블을 사용하여 도구 모음 작업 정의를 참조하십시오.
데이터 형식
• FilterData:
도구 모음에서 단순 필터 상자 대신 칩 기반 데이터 필터를 사용하는 경우 매쉬업의 데이터에 대한 필터 범주로 사용되는 필드 정의를 사용하여 데이터 셰이프를 생성해야 합니다. 이러한 필드 정의는 매핑되어야 하고 각 필드는 필터 드롭다운에 표시되는 카테고리를 나타냅니다.
다음 이미지는 데이터 셰이프의 필드 정의 예를 보여줍니다.
다음 이미지는 필드 정의를 기반으로 위젯의 필터 카테고리 드롭다운 목록을 보여줍니다.
• ActionsData:
도구 모음에서 작업을 생성하려면 플랫폼에서 시스템 엔티티로 사용할 수 있는 ToolbarAction 데이터 셰이프를 사용해야 합니다. 이 사전 정의된 데이터 셰이프는 인포테이블 출력의 서식을 지정하는 서비스를 생성하고, 매쉬업에서 해당 서비스를 바인딩하여 도구 모음에서 작업을 생성할 때 사용합니다. 자세한 내용은 인포테이블을 사용하여 도구 모음 작업 정의를 참조하십시오.
데이터 소스 바인딩
• 데이터 필터의 경우 - 도구 모음 위젯을 데이터 필터 소스에 바인딩하려면 다음 단계를 수행합니다.
a. 데이터 패널에서 데이터 필터에 대한 올바른 데이터 형식의 인포테이블을 반환하는 데이터 서비스를 추가합니다.
b. 데이터 서비스의 All Data 속성을 위젯의 FilterData 속성에 바인딩합니다.
c. 도구 모음 위젯을 선택한 다음 속성 패널에서 속성을 사용하여 데이터 필터를 구성합니다.
d. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
• 작업의 경우 - 도구 모음 위젯을 작업 데이터 소스에 바인딩하려면 다음 단계를 수행합니다.
a. 데이터 패널에서 작업에 대한 올바른 데이터 형식의 인포테이블을 반환하는 데이터 서비스를 추가합니다.
b. 데이터 서비스의 All Data 속성을 위젯의 ActionsData 속성에 바인딩합니다.
c. 데이터 소스를 바인딩할 때 서비스에서 정의한 각 작업에 대한 속성 패널에 새 속성 및 이벤트 집합이 나타납니다.
d. 도구 모음 위젯을 선택한 다음 속성 패널에서 다음 속성을 사용하여 매쉬업에 있는 그리드, 목록, 차트 등의 다른 위젯에 대한 작업을 구성합니다.
| | 속성 이름은 서비스에 있는 actionId에 대한 값에 따라 다르게 나타납니다. |
작업 | 속성/이벤트 이름 | 설명 | 예 |
|---|---|---|---|
버튼 | <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 |
f. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
속성 테이블
도구 모음 위젯의 속성은 다음과 같습니다.
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부 (Y/N) | 로컬리제이션 가능 여부 (Y/N) | ||
|---|---|---|---|---|---|---|---|
ActionsData | 도구 모음 작업 항목을 표시하고 구성하는 ToolbarAction 데이터 셰이프를 사용하여 서식이 지정된 인포테이블 데이터 소스입니다. | INFOTABLE | 해당 없음 | Y | N | ||
CategoryLabel | 필터 카테고리에 대한 드롭다운 목록 위에 표시되는 텍스트입니다. | STRING | 필터 기준 | N | Y | ||
ConditionLabel | 필터 조건 드롭다운 목록 위에 표시되는 텍스트입니다. | STRING | 조건 | N | Y | ||
CustomClass | 위젯의 최상위 div에 적용할 사용자 정의 CSS 클래스입니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다. | STRING | 해당 없음 | Y | N | ||
Disabled | 매쉬업에서 위젯을 비활성화합니다. 위젯이 매쉬업에 표시되지만 클릭하거나 선택할 수는 없습니다. | BOOLEAN | False | Y | N | ||
FilterChipPosition | 데이터 필터에 대한 칩 컨테이너의 위치를 설정합니다. 칩을 위젯의 맨 위나 맨 아래에 표시할 수 있습니다. | STRING | 맨 아래 | N | N | ||
FilterData | 칩 필터 드롭다운에 표시할 항목에 대한 데이터를 포함하는 인포테이블 소스입니다. | INFOTABLE | 해당 없음 | Y | N | ||
FilterDateOrder | 칩 필터에 표시되는 날짜의 연도, 월 및 일의 순서를 설정합니다. 옵션은 자동, 일-월-년, 월-일-년 및 년-월-일입니다. | STRING | 자동 | N | N | ||
FilterDisclosureType | 필터 칩을 표시하고 숨기는 데 사용되는 요소 유형을 링크 표시 또는 버튼으로 설정합니다. | STRING | 링크 표시 | N | N | ||
FilterFormatToken | “DD-MM-YY” 패턴을 사용하여 칩 필터 날짜의 서식을 지정합니다. 형식은 대/소문자를 구분하며 FilterDateOrder 속성을 무시합니다. 이 구문은 ISO 형식을 따릅니다. | STRING | 해당 없음 | N | Y | ||
FilterType | 필터 유형을 설정합니다. 단순 필터 상자를 표시하거나 칩 기반 데이터 필터 위젯을 사용할 수 있습니다. 필터를 숨기려면 없음을 선택합니다.
| STRING | 필터 상자 | N | N | ||
HideFilterSeparator | 도구 모음에서 데이터 필터를 분리하는 데 사용되는 세로줄을 숨깁니다.
| BOOLEAN | False | N | N | ||
LatitudeLabel | 칩 필터를 사용하여 위치를 기준으로 필터링할 때 위도의 입력 상자 위에 표시되는 텍스트입니다. | STRING | 위도 | N | Y | ||
LongitudeLabel | 칩 필터를 사용하여 위치를 기준으로 필터링할 때 경도의 입력 상자 위에 표시되는 텍스트입니다. | STRING | 경도 | N | Y | ||
Query | 필터링된 데이터 집합을 검색하는 데 사용되는 JSON 질의입니다. | QUERY | 해당 없음 | Y | N | ||
QueryChanged | 필터 위젯 질의가 변경되면 이벤트를 트리거합니다. | 해당 없음 | 해당 없음 | Y | N | ||
RangeEndValueLabel | 칩 필터를 사용하여 값 범위를 필터링할 때 두 번째 입력 상자 위에 표시되는 텍스트입니다. | STRING | 값 2 | N | Y | ||
RangeStartValueLabel | 칩 필터를 사용하여 값 범위를 필터링할 때 첫 번째 입력 상자 위에 표시되는 텍스트입니다. | STRING | 값 1 | N | Y | ||
ResetToDefaultValue | 이 위젯에 대한 입력을 기본값으로 재설정합니다. | 해당 없음 | 해당 없음 | Y | N | ||
ShowCategoryListFilter | 필터 카테고리에 대한 드롭다운 목록에 필터 상자를 추가합니다. | BOOLEAN | False | Y | N | ||
ShowHideFilters | 데이터 필터 위젯에 대해 공개 컨트롤을 숨기고 칩 컨테이너를 확장합니다. | BOOLEAN | True | N | N | ||
SortFilter | 데이터 필터 카테고리에 대한 옵션의 목록을 사전순으로 정렬합니다. | BOOLEAN | True | N | N | ||
SimpleFilterChanged | 필터 상자의 문자열이 수정되면 이벤트를 트리거합니다. | 해당 없음 | 해당 없음 | Y | N | ||
SimpleFilterHintText | 필터 상자에 대한 힌트 텍스트를 설정합니다. | STRING | 필터 | N | Y | ||
SimpleFilterLabel | 필터 상자의 레이블을 설정합니다. | STRING | 해당 없음 | Y | Y | ||
SimpleFilterPosition | 도구 모음에서 필터 상자의 위치를 설정합니다. 상자를 왼쪽, 오른쪽 또는 가운데 영역에 배치할 수 있습니다. 위치를 가운데에 설정할 때 SimpleFilterAlignment 속성이 목록에 나타납니다. | STRING | 왼쪽 | N | N | ||
SimpleFilterAlignment | 필터 상자가 도구 모음의 가운데 영역에 배치되면 해당 상자의 정렬을 설정합니다. 상자를 왼쪽, 오른쪽 또는 가운데에 정렬할 수 있습니다. | STRING | 왼쪽 | Y | N | ||
SimpleFilterString | 단순 필터 상자 내에서 문자열을 설정하거나 검색할 수 있습니다. | STRING | 해당 없음 | Y | N | ||
SimpleFilterWidth | 필터 상자의 너비를 설정합니다. | NUMBER | 273 | Y | N | ||
TabSequence | TAB 키를 누르면 위젯의 시퀀스 번호를 설정합니다. | NUMBER | 0 | N | N | ||
UnitsLabel | 칩 필터를 사용하여 위치 또는 날짜별로 필터링할 때 단위를 설정하기 위해 드롭다운 목록 위에 표시되는 텍스트입니다. | STRING | 단위 | N | Y | ||
ValueLabel | 칩 필터의 조건 값을 포함하는 입력 상자 위에 표시되는 텍스트입니다. | STRING | 값 | N | Y |