진행률 트래커(테마 적용 가능)
진행률 트래커 위젯을 사용하면 복잡한 레이아웃을 여러 보기로 분할할 수 있습니다. 위젯을 사용하면 워크플로를 선형 단계로 분할하여 복잡한 프로세스를 단순화할 수 있습니다. 진행률 트래커의 각 단계에서는 별도의 위젯을 보여주는 포함된 매쉬업을 표시할 수 있습니다. 포함된 매쉬업 위젯을 사용하여 현재 단계 번호에 대한 특정 매쉬업을 표시할 수 있습니다. 현재 단계가 강조 표시되고 사용자가 단계 간을 이동할 수 있으므로 양식 또는 프로세스의 진행 상황을 더 쉽게 이해할 수 있습니다.
데이터 형식
단계의 데이터 구조를 나타내는 필드 정의가 포함된 인포테이블을 만들어야 합니다. 인포테이블에는 단계 번호, 레이블 및 연관된 매쉬업에 대한 필드 정의가 포함되어야 합니다. 다음 표에는 인포테이블의 데이터 형식이 나와 있습니다.
|
단계 번호
|
단계 레이블
|
단계 매쉬업 이름
|
단계 대화형
|
단계 상태
|
|
|---|---|---|---|---|---|
|
필드 정의
|
StepNumber: {name: 'StepNumber', baseType: 'NUMBER'}
|
StepLabel: {name: 'StepLabel', baseType: 'STRING'}
|
StepMashupName: {name: 'StepMashupName', baseType: MASHUPNAME'}
|
StepInteracive: {name: 'StepInteracive', baseType: 'BOOLEAN'}
|
StepState: {name: 'StepState', baseType: 'STRING'}
|
|
사용
|
단계 번호를 정의합니다.
|
단계 레이블을 정의합니다.
|
단계와 연관된 매쉬업 이름을 정의합니다.
|
단계의 상호 작용 상태를 정의합니다.
|
단계의 상태를 정의합니다. 옵션: Complete, Inactive, Current, Error
|
|
기본 유형
|
NUMBER
|
STRING
|
NUMBER
|
BOOLEAN
|
STRING
|
|
행 예
|
StepNumber: 1
|
StepLabel: 'Step 1'
|
StepMashupName: 'Mashup1'
|
StepInteractive: true
|
StepLabel: 'current'
|
다음 이미지는 Y축에 대한 4개의 필드 정의가 있는 인포테이블에서 반환된 데이터의 예를 보여줍니다.
매쉬업에 진행률 트래커 위젯 추가
1. 진행률 트래커를 레이아웃의 빈 컨테이너에 추가합니다.
2. 포함된 매쉬업을 두 번째 컨테이너에 추가합니다.
3. 데이터 패널에서 반환된 인포테이블의 All Data 속성을 위젯의 Data 속성에 바인딩합니다.
4. 속성 패널에서 다음 속성을 구성합니다.
◦ StepNumberField - 단계 번호에 대한 인포테이블 열을 선택합니다.
◦ StepLabelField - 단계 레이블에 대한 인포테이블 열을 선택합니다.
◦ StepMashupNameField - 매쉬업 이름에 대한 인포테이블 열을 선택합니다. 매쉬업 이름이 존재하는지 확인하십시오.
◦ StepInteractiveField - 단계가 대화형인지 여부를 지정하는 데 사용되는 인포테이블 열을 선택합니다.
◦ StepStateField - 현재 단계를 지정하는 데 사용되는 인포테이블 열을 선택합니다.
5. 필요에 따라 IsInteractive 위젯 속성을 True로 설정하면 사용자가 단계 레이블을 클릭하여 단계 간을 이동할 수 있습니다.
6. CurrentStepMashup 위젯 속성을 포함된 매쉬업 위젯의 Name 속성에 바인딩합니다.
7. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
런타임 시 현재 단계와 연관된 매쉬업이 표시됩니다.
대화형 단계 활성화
기본적으로 단계와의 사용자 상호 작용에 대한 지원은 런타임 시 비활성화됩니다. 단계 간 이동에 대한 지원을 추가하려면 매쉬업에서 위젯 또는 서비스의 이벤트를 사용해야 합니다. 예를 들어, 사용자가 다음 또는 이전 단계로 이동할 수 있도록 하는 버튼을 추가할 수 있습니다.
IsInteractive 속성을 활성화하면 사용자가 단계 레이블을 클릭하여 런타임 시 단계 간을 이동할 수 있습니다. 이를 통해 사용자는 단계 간을 임의 순서로 이동할 수도 있습니다. 다음 이미지는 대화형 진행률 트래커를 보여줍니다.
위젯 속성
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 | 로컬리제이션 |
|---|---|---|---|---|---|
CurrentStepMashup | 현재 단계의 매쉬업 이름을 검색합니다. | STRING | 해당 없음 | Y | N |
CurrentStepNumber | 런타임 시 현재 단계 번호를 설정하거나 읽어들입니다. | NUMBER | 해당 없음 | Y | N |
Data | 위젯에 표시할 단계를 정의하는 데 사용되는 인포테이블 데이터 소스입니다. | INFOTABLE | Y | N | |
ErrorStateIcon | 진행률 트래커 데이터를 로드할 수 없을 때 표시할 아이콘을 지정합니다. | MEDIALINK | error | Y | N |
ErrorStateText | 진행률 트래커 데이터를 로드할 수 없을 때 표시할 텍스트를 지정합니다. | STRING | [[ProgressTracker.unableToLoadData]] | Y | Y |
IsInteractive | 단계가 대화형일 수 있는지 여부를 지정합니다. | BOOLEAN | False | Y | N |
MinStepSpacing | 진행률 트래커에서 단계를 구분하는 가로줄의 최소 길이를 설정합니다. | NUMBER | 90 | N | N |
NoBindingIcon | 진행률 트래커가 데이터 소스에 바인딩되지 않았을 때 표시할 아이콘을 지정합니다. | MEDIALINK | bind | N | N |
NoBindingText | 진행률 트래커가 데이터 소스에 바인딩되지 않았을 때 표시할 텍스트를 지정합니다. | STRING | [[ProgressTracker.noDataToDisplay]] | N | Y |
NoDataIcon | 진행률 트래커 데이터에 단계가 포함되어 있지 않을 때 표시할 아이콘을 지정합니다. | MEDIALINK | not visible | Y | N |
NoDataText | 진행률 트래커 데이터에 단계가 포함되어 있지 않을 때 표시할 텍스트를 지정합니다. | STRING | [[ProgressTracker.noStepData]] | Y | Y |
SelectedData | 선택한 단계의 데이터를 나타내는 인포테이블입니다. | INFOTABLE | Y | N | |
StepClicked | 단계를 클릭할 때 트리거되는 바인딩 가능한 이벤트입니다. | 이벤트 | Y | N | |
StepInteractiveField | 단계가 대화형인지 여부를 정의하는 인포테이블 필드를 지정합니다. | 인포테이블 필드 | N | N | |
StepLabelField | 단계 레이블을 포함하는 인포테이블 필드를 지정합니다. | 인포테이블 필드 | N | N | |
StepMashupNameField | 각 단계에 대해 표시할 매쉬업을 정의하는 인포테이블 필드를 지정합니다. | 인포테이블 필드 | N | N | |
StepNumberField | 단계 번호를 포함하는 인포테이블 필드를 지정합니다. | 인포테이블 필드 | N | N | |
StepSize | 단계 아이콘의 크기를 설정합니다. 옵션: 작음, 중간, 큼 | STRING | 중규모 | Y | N |
StepStateField | 단계 상태를 정의하는 인포테이블 필드를 지정합니다. | 인포테이블 필드 | N | N | |
TabSequence | 사용자가 Tab 키를 누를 때 위젯이 강조 표시되는 시퀀스를 설정합니다. | NUMBER | 0 | N | N |
Height | 고정된 크기 조정을 사용하여 컨테이너에 추가될 때 위젯 높이를 설정합니다. | NUMBER | 90 | N | N |
Width | 고정된 크기 조정을 사용하여 컨테이너에 추가될 때 위젯 너비를 설정합니다. | NUMBER | 600 | N | N |