Mashup Builder > Widgets > Standard Widgets > Progress Tracker (Themable)
Progress Tracker (Themable)
The Progress Tracker widget enables you split complex layouts into multiple views. You can use the widget to simplify a complex process by splitting the workflow into linear steps. Each step in the progress tracker can display a contained mashup that shows separate widgets. You can use the Contained Mashup widget to display a specific mashup for the current step number. The current step is highlighted and users can navigate between steps, which makes it easier to understand the progression of a form or a process.
Data Format
You must create an infotable with field definitions that represent the data structure for the steps. The infotable must include a field definition for the step number, label, and associated mashup. The following table lists the data format for the infotable:
Step Number
Step Label
Step Mashup Name
Step Interactive
Step State
Field Definition
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'}
Use
Defines the step number.
Defines the step label.
Defines the mashup name that is associated with the step.
Defines the interaction state for the step.
Defines the state of the step. Options: Complete, Inactive, Current, Error
Base Type
NUMBER
STRING
NUMBER
BOOLEAN
STRING
Row Example
StepNumber: 1
StepLabel: 'Step 1'
StepMashupName: 'Mashup1'
StepInteractive: true
StepLabel: 'current'
The following image shows an example of returned data from an infotable with four field definitions for the y-axis:
A service output in Composer that shows data required for the widget.
Adding a Progress Tracker Widget to a Mashup
1. Add the Progress Tracker to an empty container in the layout.
2. Add the Contained Mashup to a second container.
3. On the Data panel, bind the All Data property of the returned infotable to the Data property of the widget.
4. On the Properties panel, configure the following properties:
◦ StepNumberField—Select the infotable column for the step number.
◦ StepLabelField—Select the infotable column for the step label.
◦ StepMashupNameField—Select the infotable column for the mashup name. Make sure that the mashup names exist.
◦ StepInteractiveField—Select the infotable column used to specify wether a step is interactive.
◦ StepStateField—Select the infotable column used to specify the current step.
5. Optionally, set the IsInteractive widget property to True to allow users to navigate between steps by clicking on a step label.
6. Bind the CurrentStepMashup widget property to the Name property of the Contained Mashup widget.
7. Click, Save, then View Mashup.
At runtime, the mashup that is associated with the current step is displayed.
Enabling Interactive Steps
By default, support for user interaction with steps is disabled at runtime. To add support for navigating between steps, you must use events from widgets or services in the mashup. For example, you can add Buttons that allow users to move to the next or previous step.
You can enable the IsInteractive property to enable users to navigate between steps at runtime by clicking on a step label. This allows also users to navigate between steps in random order. The following image shows an interactive progress tracker.
Widget Properties
Property Name
Description
Base Type
Default Value
Binding
Localization
CurrentStepMashup
Retrieves the mashup name for the current step.
STRING
N/A
Y
N
CurrentStepNumber
Sets or retrieves the current step number at run time.
NUMBER
N/A
Y
N
Data
The infotable data source used to define steps to display on the widget.
INFOTABLE
Y
N
DisableAutoStepCompletion
Disables the automatic completion of steps when navigating between steps in the progress tracker. When enabled, the step state is always set using infotable data that is specified using the StepStateField property.
BOOLEAN
False
N
N
ErrorStateIcon
Specifies the icon to display when the progress tracker data cannot be loaded.
MEDIALINK
error
Y
N
ErrorStateText
Specifies the text to display when the progress tracker data cannot be loaded.
STRING
[[ProgressTracker.unableToLoadData]]
Y
Y
IsInteractive
Specifies whether steps can be interactive.
BOOLEAN
False
Y
N
MinStepSpacing
Sets the minimum length of the horizontal line separating steps on the progress tracker.
NUMBER
90
N
N
NoBindingIcon
Specifies the icon to display when the progress tracker is not bound to a data source.
MEDIALINK
bind
N
N
NoBindingText
Specifies the text to display when the progress tracker is not bound to a data source.
STRING
[[ProgressTracker.noDataToDisplay]]
N
Y
NoDataIcon
Specifies the icon to display when the progress tracker data does not contain any steps.
MEDIALINK
not visible
Y
N
NoDataText
Specifies the text to display when the progress tracker data does not contain any steps.
STRING
[[ProgressTracker.noStepData]]
Y
Y
SelectedData
An infotable that represents the data of the selected step.
INFOTABLE
Y
N
StepClicked
A bindable event that triggers when a step is clicked.
Event
Y
N
StepInteractiveField
Specifies the infotable field that defines whether a step is interactive.
Infotable Field
N
N
StepLabelField
Specifies the infotable field that contains the step labels.
Infotable Field
N
N
StepMashupNameField
Specifies the infotable field that defines the mashup to display for each step.
Infotable Field
N
N
StepNumberField
Specifies the infotable field that contains the step numbers.
Infotable Field
N
N
StepSize
Sets the size of the step icons. Options: Small, Medium, Large
STRING
Medium
Y
N
StepStateField
Specifies the infotable field that defines the step state.
Infotable Field
N
N
TabSequence
Sets the sequence in which a widget is highlighted when the user presses Tab key.
NUMBER
0
N
N
Height
Sets the widget height when it is added to a container with fixed sizing.
NUMBER
90
N
N
Width
Sets the widget width when it is added to a container with fixed sizing.
NUMBER
600
N
N
Was this helpful?