목록 위젯(테마 적용 가능)
목록 위젯은 데이터의 행을 표시할 수 있는 위젯입니다.
 |
목록 위젯은 플랫폼에서 표준 위젯으로, SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
|
데이터 형식
다음 구조를 사용하여 형식이 지정된 인포테이블의 데이터를 사용하여 목록 위젯 항목을 구성할 수 있습니다.
|
필드 정의
|
표시 필드
|
값 필드
|
상태 필드
|
|---|---|---|---|
|
설명
|
런타임에 목록 항목의 레이블을 나타냅니다.
|
목록 항목의 실제 값을 나타냅니다. 이 값도 SelectedText 속성에 저장됩니다.
|
목록에 있는 항목의 상태를 나타내는 인포테이블 필드(선택 사항)입니다. 이 속성을 사용하여 목록의 항목을 활성화하거나 비활성화할 수 있습니다. 지원되는 값: Enabled 또는 Disabled
|
|
기본 유형
|
STRING 또는 NUMBER
|
STRING 또는 NUMBER
|
STRING
|
목록 항목 정의
목록 항목을 정의하려면 필수 데이터 형식을 사용하여 형식이 지정된 인포테이블을 바인딩합니다.
1. 데이터 패널에서 위젯에 대한 목록 항목을 정의하는 데이터 서비스를 추가합니다. 이전 단원에서 설명한 인포테이블 형식을 사용하여 항목을 정의할 수 있습니다.
2. 데이터 서비스의 All Data 속성을 목록 위젯의 Data 속성에 바인딩합니다. 바인딩이 작성됩니다.
3. 속성 패널에서 다음 속성 각각에 대한 인포테이블 필드를 선택합니다.
◦ DisplayField - 항목 레이블의 데이터입니다.
◦ ValueField - 항목 레이블의 실제 값입니다.
◦ StateField - 각 데이터 항목의 활성화 상태 또는 비활성화 상태를 정의하는 필드(선택 사항)입니다.
4. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
목록 항목은 런타임에 위젯 내에 표시됩니다.
복수 선택 활성화
위젯 MutliSelect 속성을 true로 설정하여 목록에서 복수 선택을 활성화할 수 있습니다. 복수 선택은 사용자가 목록에서 하나 이상의 항목을 선택할 수 있는 확인란을 추가합니다. 또한 사용자가 모든 항목을 지우거나 선택할 수 있는 컨트롤이 항목 위에 추가됩니다.
단일 선택 구성
기본적으로 위젯은 단일 항목 선택을 지원합니다. 선택한 항목이 배경색을 사용하여 강조 표시됩니다.
단일 선택 모드를 사용할 때 라디오 버튼 선택을 사용하려면 RadioButtonSelection 속성을 true로 설정합니다. 이 버튼은 목록의 왼쪽에 표시됩니다. 목록 항목은 한 번에 하나의 항목만 선택할 수 있음을 사용자에게 알리는 라디오 버튼 그룹으로 표시됩니다.
필터 추가
위젯 Filter 속성을 true로 설정하여 필터를 목록에 추가할 수 있습니다. 필터는 목록의 맨 위에 표시되며, 필터를 사용하면 사용자가 목록의 항목을 빠르게 필터링할 수 있습니다.
항목 선택 지우기
위젯 ClearSelection 속성을 true로 설정하면 사용자가 단일 선택 목록에서 선택 항목을 지울 수 있는 빈 항목을 추가할 수 있습니다. ClearSelectionLable 속성을 사용하면 빈 항목의 레이블도 변경할 수 있습니다.
| | 복수 선택 모드가 활성화되면 이 속성을 사용할 수 없습니다. |
상태 서식 적용
State Formatting을 사용하여 문자열 또는 숫자 값을 기준으로 목록 항목의 현재 상태를 강조 표시할 수 있습니다. 자세한 내용은 예: 목록 위젯에 상태 서식 적용(ptc.com)을 참조하십시오.
위젯 속성
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부(Y/N) | 로컬리제이션 가능 여부(Y/N) | ||
|---|---|---|---|---|---|---|---|
Label | 위젯 레이블로 표시되는 텍스트입니다. | STRING | 목록 | Y | Y | ||
LabelAligment | 레이블을 왼쪽, 오른쪽 또는 가운데로 정렬합니다. | STRING | 왼쪽 | Y | N | ||
Aligment | 목록의 항목을 왼쪽, 오른쪽 또는 가운데로 정렬합니다. | STRING | 왼쪽 | Y | N | ||
ClearselectionItem | 목록에 빈 선택 항목을 추가합니다. 사용자가 선택 항목을 지울 수 있습니다. | BOOLEAN | True | Y | N | ||
ClearselectionLabel | 목록에서 선택 항목 지우기에 대한 사용자 정의 텍스트를 지정합니다. 이는 기본적으로 없음으로 설정됩니다. | STRING | 없음 | Y | Y | ||
MultiSelect | 사용자가 목록에서 여러 항목을 선택할 수 있습니다. | BOOLEAN | False | N | N | ||
StateField | 목록에서 항목을 비활성화하거나 활성화하는 데 사용할 인포테이블을 지정합니다. | INFOTABLE | 해당 없음 | N | N | ||
Disabled | 매쉬업에서 위젯을 비활성화합니다. 위젯이 매쉬업에 표시되지만 클릭할 수는 없습니다. | BOOLEAN | False | Y | N | ||
ShowListFilter | 런타임에 목록 항목을 필터링하는 필터를 목록 내에 추가합니다. | BOOLEAN | False | N | N | ||
FilterHintText | 목록 필터에 대한 힌트 텍스트를 표시합니다. | STRING | 해당 없음 | N | Y | ||
AutoSelectFirstRow | 첫 번째 행을 목록에서 선택한 옵션으로 설정합니다.
| BOOLEAN | 해당 없음 | N | N | ||
RadioButtonSelection | 단일 선택 모드를 사용할 때 목록 항목 옆에 라디오 버튼을 표시합니다. | BOOLEAN | False | N | N | ||
RowHeight | 단일 줄의 행 높이를 설정합니다. | NUMBER | 34 | Y | N | ||
CustomClass | 위젯의 최상위 Div에 대한 CSS를 정의합니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다. | STRING | 해당 없음 | Y | N | ||
TabSequence | 사용자가 Tab 키를 누를 때 위젯이 강조 표시되는 시퀀스입니다. | NUMBER | 해당 없음 | N | N | ||
Data | 위젯 데이터에 대한 인포테이블 또는 데이터 소스입니다. | INFOTABLE | 해당 없음 | Y | N | ||
DisplayField | 데이터 값을 나타내는 인포테이블 필드입니다. | 해당 없음 | 해당 없음 | N | N | ||
ValueField | SelectedText에 사용되는 필드입니다. | 해당 없음 | 해당 없음 | N | N | ||
SelectedText | 목록에서 항목을 선택할 수 있습니다. | STRING | 해당 없음 | Y | Y | ||
SelectedItems | 목록에서 선택한 항목의 인포테이블 소스를 정의합니다. | INFOTABLE | 해당 없음 | Y | N | ||
DoubleClicked | 위젯을 두 번 클릭할 때 이벤트가 트리거됩니다. | 해당 없음 | 해당 없음 | Y | N | ||
ListFormat | 이 속성은 데이터에 대해 특정 렌더링을 적용하는 데 사용됩니다. 이 속성이 지원하는 렌더링 형식: NUMBER, INTEGER, LONG, DATETIME, LOCATION, VEC2, VEC3, VEC4, THINGCODE, HYPERLINK, IMAGELINK, IMAGE, STRING, BOOLEAN, TAGS, HTML, THINGNAME, THINGSHAPENAME, THINGTEMPLATENAME, USERNAME, MASHUPS, INFOTABLE, PASSWORD, XML, JSON, VALUES. | 해당 없음 | 해당 없음 | 해당 없음 | 해당 없음 |
목록 위젯 데이터 유효성 검사
유효성 검사 속성을 사용하여 런타임에 목록 항목 선택에 대한 유효성을 검사할 수 있습니다. 예를 들어, 목록에 항목이 있어야 함을 지정하고 선택된 항목이 없을 때 오류 메시지를 표시할 수 있습니다.
유효성 검사 속성에 대한 자세한 내용은 위젯에 유효성 검사 적용을 참조하십시오.
다음 표에는 ThingWorx 9.3.4 이상에서 유효성 검사 패널에 사용 가능한 유효성 검사 속성이 나와 있습니다.
속성 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부(Y/N) | 로컬리제이션 가능 여부(Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 유효성 검사 조건 및 유효성 검사 실패 시 표시할 메시지입니다. | STRING | 해당 없음 | Y | Y |
CriteriaMessageDetails | 유효성 검사 조건 및 실패 메시지에 대해 표시할 세부 정보입니다. | STRING | 해당 없음 | Y | Y |
RequiredMessage | 필수 값이 true로 설정되고 항목이 선택되지 않았을 때 표시할 메시지입니다. | STRING | 선택은 필수 사항입니다. | Y | Y |
ShowValidationCriteria | 목록을 편집할 때 필수 입력에 대한 힌트 메시지를 표시합니다. | BOOLEAN | False | Y | N |
ShowValidationFailure | 입력한 값이 유효성 검사에 실패할 때 실패 메시지를 표시합니다. | BOOLEAN | False | Y | N |
ShowValidationSuccess | 입력한 값이 유효성 검사에 성공할 때 성공 메시지를 표시합니다. | BOOLEAN | False | Y | N |
SuccessMessage | 유효성 검사에 성공했을 때 표시할 메시지입니다. | STRING | 해당 없음 | Y | Y |
SuccessMessageDetails | 유효성 검사 성공 메시지에 관한 추가 정보를 표시하는 보조 메시지입니다. | STRING | 해당 없음 | Y | Y |
Validate | 위젯 값이 변경될 때 트리거되는 바인딩 가능한 이벤트입니다. 이 이벤트를 서비스 또는 함수에 바인딩하여 유효성 검사 패턴 또는 식을 적용합니다. | event | 해당 없음 | Y | N |
ValidationCriteriaIcon | 유효성 검사 조건에 대해 힌트 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK | info | N | N |
ValidationFailureIcon | 유효성 검사에 실패했을 때 상태 메시지 내에 표시할 SVG 아이콘을 설정합니다. | IMAGELINK | error | N | N |
ValidationOutput | 위젯 유효성 검사의 출력을 검색합니다. 반환된 값은 Undefined, Unvalidated, Valid 또는 Invalid입니다. | STRING | 해당 없음 | Y | N |
ValidationState | 유효성 검사 상태를 설정하는 바인딩 가능한 속성입니다. 이 속성을 Undefined, Unvalidated, Valid 또는 Invalid로 설정할 수 있습니다. | STRING | Undefined | Y | N |
ValidationSuccessIcon | 유효성 검사에 성공했을 때 상태 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK | success | N | N |
ValueRequired | 목록에서 항목을 선택해야 합니다. | BOOLEAN | False | Y | N |