List Shuttle 위젯(테마 적용 가능)
List Shuttle 위젯을 사용하여 기존 목록(소스)에서 항목을 선택하고 새 목록(대상)에 배치할 수 있습니다. 대상 목록에서 선택한 항목의 순서를 지정할 수 있으며 소스 목록에서 필요없는 항목을 제거할 수 있습니다.
 |
List Shuttle 위젯은 플랫폼에서 표준 위젯으로, SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
|
데이터 형식
다음 구조로 형식이 지정된 인포테이블의 데이터를 사용하여 ListShuttle 위젯 항목을 구성할 수 있습니다.
|
필드 정의
|
표시 필드
|
IDField
|
|---|---|---|
|
설명
|
실행 시간에 List Shuttle 항목의 레이블을 표시합니다.
|
List Shuttle 항목의 실제 ID를 나타냅니다. 이 값도 SelectedItems 속성에 저장됩니다.
|
|
기본 유형
|
STRING 또는 NUMBER
|
STRING 또는 NUMBER
|
목록 항목 정의
목록 항목을 정의하려면 필수 데이터 형식을 사용하여 형식이 지정된 인포테이블을 바인딩합니다.
1. 데이터 패널에서 위젯에 대한 목록 항목을 정의하는 데이터 서비스를 추가합니다. 이전 단원에서 설명한 인포테이블 형식을 사용하여 항목을 정의할 수 있습니다.
2. 데이터 서비스의 All Data 속성을 List Shuttle 위젯의 Data 속성에 바인딩합니다.
3. 속성 패널에서 다음 속성에 대한 인포테이블 필드를 선택합니다.
◦ DisplayField - 항목 레이블의 데이터입니다.
◦ IDField - 항목의 ID입니다.
4. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
목록 항목은 런타임에 위젯 내에 표시됩니다.
선택한 항목 수 확인
ThingWorx 9.4 이상에서는 NumberOfSelectedItems 속성을 사용하여 실행 시간에 목록에서 선택한 항목의 수를 추적하고 유효성을 검사할 수 있습니다. 예를 들어, 속성을 유효성 검사기 함수에 바인딩할 수 있습니다. 선택한 항목의 수가 특정 값과 일치하지 않는 경우 오류 메시지를 표시하고 사용자가 페이지를 저장하지 못하도록 제한할 수도 있습니다.
다음 예에서는 속성과 유효성 검사기 함수 간의 바인딩을 보여줍니다. SelectedItemsChanged 이벤트는 함수를 사용하여 NumberOfSelectedItems 속성의 유효성을 검사하는 데 사용됩니다. 실행 시간에 함수는 선택한 항목의 수를 확인하고 유효성 검사에 실패한 경우 오류 메시지를 표시합니다.
위젯 속성:
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부 (Y/N) | 로컬리제이션 가능 여부 (Y/N) | ||
|---|---|---|---|---|---|---|---|
TabSequence | TAB을 누를 때 위젯이 강조 표시되는 시퀀스를 설정합니다. | NUMBER | 해당 없음 | N | N | ||
DisplayField | 데이터 값을 나타내는 인포테이블 필드입니다. | INFOTABLE | 해당 없음 | N | N | ||
ListFormat | 표시되는 데이터에 대해 특정 렌더러를 적용합니다. ThingWorx 9.1 이상에서는 이 속성을 사용하여 위젯에 상태 서식을 적용할 수 있습니다. | 렌더러 및 상태 서식 적용 | 해당 없음 | N | N | ||
Disabled | 매쉬업에서 위젯을 비활성화합니다. 위젯이 나타나지만 사용할 수는 없습니다. | BOOLEAN | False | Y | N | ||
CustomClass | 위젯의 최상위 div 요소에 대한 CSS 클래스 이름을 정의합니다. 여러 클래스를 입력할 때는 각 클래스를 공백으로 구분합니다. | STRING | 해당 없음 | Y | N | ||
SelectedItems | 목록에서 선택된 항목에 대한 인포테이블 소스입니다. | INFOTABLE | 해당 없음 | Y | N | ||
SingleSelect | 단일 선택 또는 다중 선택을 설정합니다. | BOOLEAN | False | Y | N | ||
HideFilter | 소스 목록에서 필터를 표시하거나 숨깁니다. | BOOLEAN | False | Y | N | ||
IDField | 목록 항목의 ID가 포함된 인포테이블 필드입니다. 항목이 동일한 표시 이름을 공유하는 경우 ID 필드를 지정해야 합니다.
| 필드 이름 | 해당 없음 | 해당 없음 | N | ||
Data | 위젯에 대한 데이터 소스입니다. | INFOTABLE | 해당 없음 | Y | N | ||
ListShuttleLabel | List Shuttle 위젯의 레이블에 표시되는 텍스트입니다. | STRING | List Shuttle | Y | Y | ||
ListShuttleLabelAlignment | 레이블을 위젯의 왼쪽, 오른쪽 또는 가운데에 정렬합니다. | STRING | 왼쪽 | Y | N | ||
ListShuttleLabelType | 레이블 유형을 머리글, 하위 머리글, 레이블 또는 본문으로 설정합니다. | STRING | 하위 머리글 | Y | N | ||
NumberOfSelectedItems | List Shuttle에서 선택한 항목의 수를 반환합니다.
| NUMBER | 해당 없음 | Y | N | ||
SourceListLabel | 소스 목록의 레이블에 표시되는 텍스트입니다. | STRING | 소스 | Y | Y | ||
SourceListLabelAlignment | 레이블을 소스 목록의 왼쪽, 오른쪽 또는 가운데에 정렬합니다. | STRING | 왼쪽 | Y | N | ||
SourceListLabelType | 레이블 유형을 머리글, 하위 머리글, 레이블 또는 본문으로 설정합니다. | STRING | 레이블 | Y | N | ||
TargetListLabel | 대상 목록의 레이블에 표시되는 텍스트입니다. | STRING | 대상 | Y | Y | ||
TargetListLabelAlignment | 레이블을 대상 목록의 왼쪽, 오른쪽 또는 가운데에 정렬합니다. | STRING | 왼쪽 | Y | N | ||
TargetListLabelType | 레이블 유형을 머리글, 하위 머리글, 레이블 또는 본문으로 설정합니다. | STRING | 레이블 | Y | N | ||
ResetToDefaultValue | 목록을 기본값으로 재설정합니다. | 해당 없음 | 해당 없음 | Y | N |
유효성 검사 속성
| | List Shuttle 위젯에 대한 다음 유효성 검사 속성은 ThingWorx 9.4 이상에서만 사용할 수 있습니다. |
공통 유효성 검사 속성 외에도 TargetListMaxItems 및 TargetListMinItems 속성을 사용하여 위젯에서 선택한 항목의 수를 제한할 수 있습니다. 선택한 항목의 수가 범위를 벗어나면 실패 메시지가 표시됩니다.
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부 (Y/N) | 로컬리제이션 가능 여부 (Y/N) |
|---|---|---|---|---|---|
ValidationState | 유효성 검사 상태를 설정하는 바인딩 가능한 속성입니다. 이 속성을 '정의되지 않음', '유효성 검사되지 않음', '유효함' 또는 '유효하지 않음'으로 설정할 수 있습니다. | STRING | Undefined | 내부 | N |
ValidationOutput | 위젯 유효성 검사의 출력을 검색하는 데 사용되는 바인딩 가능한 속성입니다. 반환된 값은 '정의되지 않음', '유효성 검사되지 않음', '유효함' 또는 '유효하지 않음'입니다. | STRING | 해당 없음 | 외부 | N |
ValueRequired | 대상 목록에 항목을 추가해야 합니다. | BOOLEAN | False | 내부 | N |
RequiredMessage | ValueRequired가 true로 설정되고 항목이 대상 목록에 추가되지 않은 경우 표시할 메시지입니다. | STRING | 선택은 필수입니다. | 내부 | Y |
Validate | 위젯 값이 변경될 때 트리거되는 이벤트입니다. 유효성 검사 식을 적용하려면 이 이벤트를 서비스 또는 함수에 바인딩하십시오. | EVENT | 해당 없음 | 외부 | N |
ShowValidationSuccess | 유효성 검사에 성공했을 때 성공 메시지를 표시합니다. | BOOLEAN | False | 내부 | N |
ValidationSuccessIcon | 유효성 검사에 성공했을 때 상태 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK |  success | 해당 없음 | N |
ShowValidationFailure | 유효성 검사에 실패할 때 실패 메시지를 표시합니다. | BOOLEAN | False | 내부 | N |
ValidationFailureIcon | 유효성 검사에 실패했을 때 상태 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK |  error | 해당 없음 | N |
ShowValidationCritera | 목록을 편집할 때 필수 입력에 대한 힌트 메시지를 표시합니다. | BOOLEAN | False | 내부 | N |
ValidationCriteriaIcon | 유효성 검사 조건에 대해 힌트 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK |  Info | 해당 없음 | N |
SuccessMessage | 유효성 검사에 성공했을 때 표시할 메시지입니다. | STRING | 해당 없음 | 내부 | N |
SuccessMessageDetails | 유효성 검사 성공 메시지에 관한 추가 정보를 표시하는 보조 메시지입니다. | STRING | 해당 없음 | 내부 | Y |
CriteriaMessage | 유효성 검사에 실패했을 때 표시할 메시지입니다. | STRING | 해당 없음 | Y | Y |
CriteriaMessageDetails | 유효성 검사 실패 메시지에 관한 추가 정보를 표시하는 보조 메시지입니다. | STRING | 해당 없음 | 내부 | Y |
TargetListMinItems | 대상 목록의 최소 항목 수를 설정합니다. | NUMBER | 해당 없음 | 내부 | N |
TargetListMinItemsFailureMessage | 대상 목록의 선택한 항목 수가 TargetListMinItems 값보다 낮을 때 표시할 메시지입니다. | STRING | ${value} Is the minimum number of items | 내부 | Y |
TargetListMaxItems | 대상 목록의 최대 항목 수를 설정합니다. | NUMBER | 해당 없음 | 내부 | N |
TargetListMaxItemsFailureMessage | 대상 목록의 선택한 항목 수가 TargetListMaxItems 값보다 높을 때 표시할 메시지입니다. | STRING | ${value} Is the maximum number of items | 내부 | Y |