진행률 트래커(테마 적용 가능)
진행률 트래커 위젯을 사용하면 복잡한 레이아웃을 여러 보기로 분할할 수 있습니다. 위젯을 사용하면 워크플로를 선형 단계로 분할하여 복잡한 프로세스를 단순화할 수 있습니다. 진행률 트래커의 각 단계에서는 별도의 위젯을 보여주는 포함된 매쉬업을 표시할 수 있습니다. 포함된 매쉬업 위젯을 사용하여 현재 단계 번호에 대한 특정 매쉬업을 표시할 수 있습니다. 현재 단계가 강조 표시되고 사용자가 단계 간을 이동할 수 있으므로 양식 또는 프로세스의 진행 상황을 더 쉽게 이해할 수 있습니다.
데이터 형식
단계의 데이터 구조를 나타내는 필드 정의가 포함된 인포테이블을 만들어야 합니다. 인포테이블에는 단계 번호, 레이블 및 연관된 매쉬업에 대한 필드 정의가 포함되어야 합니다. 다음 표에는 인포테이블의 데이터 형식이 나와 있습니다.
|
단계 번호
|
단계 레이블
|
단계 매쉬업 이름
|
단계 대화형
|
단계 상태
|
|
|---|---|---|---|---|---|
|
필드 정의
|
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
|
|
|
DisableAutoStepCompletion
|
진행률 트래커에서 단계 사이를 탐색할 때 단계 자동 완료를 비활성화합니다. 활성화되면 단계 상태는 항상 StepStateField 속성에 지정된 인포테이블 데이터를 사용하여 설정됩니다.
|
BOOLEAN
|
False
|
N
|
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
|