PBToolboxAI v5 ← Site

progressbar — u_pbt_progressbar #

← Component reference · Guide contents

Themed progress bar: horizontal bar or ring, numeric value or waiting animation, percentage display, free choice of color.

▶ See it live — Demo application, Progress tile: the preview, the code behind it and this page, side by side.


At a glance #

Userobjectu_pbt_progressbar
Item class— (component without items)
Used forShowing how far a long operation has gone: import, export, printing, server call
Two use casesdeterminate (you know the progress) or indeterminate (you only know that work is in progress)

Quick start #

// Local variables
long ll_total = 4820

// Window open event : the readout, and the scale of the job
uo_progress.ib_show_value = true     // shows the percentage next to the bar
uo_progress.id_maximum = ll_total    // the scale of the job : nothing to compute
// Local variables
long ll_i, ll_total = 4820

// During the operation : give the raw value, row by row. It costs almost
// nothing : the bar is redrawn only when what it shows changes.
for ll_i = 1 to ll_total
    of_process_row(ll_i)
    uo_progress.id_value = ll_i
next

Properties #

PropertyTypeDefaultPurpose
id_valuedouble0Current progress, a RAW value on the id_minimum … id_maximum scale, read back as you last set it (not bounded). The label rounds down: 99.6 shows 99 %, 100 % means finished. Setting it on every row of a loop costs almost nothing: the bar is redrawn only when what it shows changes (a tenth of a percent), or on every value when is_format writes it
id_minimumdouble0Lower bound of the scale. A double: a 0..1 fraction is a valid scale
id_maximumdouble100Upper bound of the scale. A double: a byte count over 2 GB is a valid scale. Empty or inverted range (min ≥ max): 100 % once the value reaches the maximum, 0 % before — an empty batch (id_maximum = 0, id_value = 0) shows as finished
is_modestring"linear"Shape of the component: linear (a horizontal bar that takes the whole width of the control and follows its height: it fits where an HProgressBar stood) or circular (ring) — constants MODE_LINEAR, MODE_CIRCULAR. An unknown value falls back to linear; the bar stands up with is_orientation
is_orientationstring"horizontal"Direction of the linear bar, in the words of the linear gauge: horizontal (default) or vertical — constants ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL. Vertical, the bar fills from the bottom up (a level, a tank, a queue), its readout under it: it fits where a VProgressBar stood. The ring ignores it. An unknown value falls back to horizontal
ib_indeterminatebooleanfalseWaiting mode: a sliding bar, or a fixed arc spinning in circular mode; id_value is ignored but kept. When Windows asks for fewer animations, the waiting state pulses instead of moving. With ib_show_value, the readout writes is_unit alone: the text of the wait ("Connecting..."). Paused or failed (is_state), the wait stops: a full bar (a full ring) at the color of the state, as the Windows taskbar shows it
ib_show_valuebooleanfalseDisplays the readout next to the bar or at the center of the ring: the percentage in the display language ("50%" in English, "50 %" in French), or the value written by is_format, followed by is_unit. A long readout is cut with "…" rather than crush the bar (the track keeps 40 % of the control); in the ring, the unit goes on a second line and the whole shrinks until it fits, the unit dropped when room is lacking. While busy (ib_indeterminate), only is_unit is written
is_formatstring""Display format of the value in the readout (ib_show_value), in the syntax of a DataWindow format, as the gauges write it (#,##0, #,##0.00, $#,##0). The separators are those of the display language. A mask that holds % writes the share done, not the value: 0.0% gives "35.0%" for 1,687 rows out of 4,820, on any scale, rounded down like the percentage (100 % = finished). Empty = the percentage. Once it is set, every value is sent to the bar, since the readout writes it. The screen reader says the same text
is_unitstring""Written after the readout, separated by a space: after the value, or after the percentage when is_format is empty (of 500 rows, done). Plain text, never markup. While busy, it is the only text of the readout (Connecting...); in the ring, it has a line of its own
is_statestring"normal"The meaning of the bar, like the Windows progress bar: STATE_NORMAL (accent color), STATE_PAUSED (yellow, the job waits) or STATE_ERROR (red, the job failed). Paused and error take the status colors of the theme, light or dark, and win over il_value_color. A busy bar (ib_indeterminate) that is paused or failed stops and turns full at the color of the state, as the Windows taskbar shows it. The screen reader says the state before the value ("Error, 64%"). An unknown value counts as STATE_NORMAL
il_value_colorlong-1Fill color, in PowerBuilder RGB() format. -1 = accent color of the theme. When paused or in error (is_state), the state color wins. RGB() only: a PowerBuilder system color (Highlight, ButtonFace…) has no color of its own, it is ignored (the bar keeps the accent, the property reads back -1)
is_accessible_namestring""What the screen reader calls this bar, like the AccessibleName of an HProgressBar. Empty = "Progress" in the display language: two bars in one window (a download, an import) are told apart only by their name. Plain text, never markup
is_theme_stylestring""Visual style of the component (THEME_STYLE_* constants); empty = the application's, followed at every change
is_theme_modestring""Light or dark variant (THEME_MODE_* constants); empty = the application's, followed at every change
il_theme_accentlong-1Accent colour of this component (-1 = the application accent, or the theme's)

This component publishes no tooltip (is_tooltip, is_super_tooltip_*): a progress bar reads by itself, and a caption on hover would appear under the pointer at the very moment the user is looking elsewhere. Put the progress commentary in a statictext or a statusbar next to the bar. of_set_property("tooltip", …) (and super_tooltip_*) returns -5: the door by name is closed too.


Methods #

MethodPurpose
of_reset ( )Resets every property to its default (linear bar, 0–100 scale, value 0, percentage hidden, theme color). Returns 0 once applied, -2 when the component is not created
of_set_redraw (boolean)Groups a burst of changes into a single render. Returns 0 once applied, -2 when the component is not created
of_save_as_png (string) · of_save_as_jpg (string)Exports the rendering as an image. Returns 0 once the image is written, -4 when writing fails, -2 when the component is not created

Events #

EventRaised when
ue_ready ( )The component has finished loading; everything sent beforehand has been replayed
ue_runtime_missing ( )The WebView2 runtime is missing: the component stays empty
ue_bg_color (long al_color)The component has computed its theme background color; the userobject has already adopted it (backcolor)

Examples #

Determinate progress with a percentage #

// Show the percentage, then move the bar
uo_progress.ib_show_value = true
uo_progress.id_value = 75     // the bar fills up to three quarters

Indeterminate progress (unknown duration) #

// When the duration is unknown : the bar animates continuously
// and ignores id_value
uo_progress.ib_indeterminate = true
// Once the duration is known, switch back to determinate mode
uo_progress.ib_indeterminate = false
uo_progress.id_value = 20

Circular ring #

// Display mode : linear (bar) or circular (ring)
uo_progress.is_mode  = u_pbt_progressbar.MODE_CIRCULAR
uo_progress.ib_show_value = true
uo_progress.id_value = 40

Custom scale #

// Local variables
long ll_row_count = 4820, ll_current_row = 1687

// Progress is not always a percentage : give the real scale
uo_progress.id_minimum = 0
uo_progress.id_maximum = ll_row_count    // e.g. 4820 rows to import

// Then report the row being processed
uo_progress.id_value = ll_current_row // raw value, not a percentage

The percentage displayed by ib_show_value is still computed against that scale.

Custom color and driving the value #

// Show the percentage next to the bar
uo_progress.ib_show_value = true

// The fill color accepts a standard PowerBuilder RGB()
uo_progress.il_value_color = RGB(/*red*/ 16, /*green*/ 137, /*blue*/ 62)

// The bar displays a value, it never computes one : your code moves it
uo_progress.id_value = 0
// timer event of the window, once a second
if uo_progress.id_value >= 100 then
	Timer(0)   // done : your code knows, it is the one that decided
	uo_status.of_panel(/*key*/ "main").is_text = "Import complete"
else
	uo_progress.id_value = uo_progress.id_value + 10
end if

Formatted value, unit and failed state #

// The readout counts rows instead of a bare percentage
uo_progress.ib_show_value = true
uo_progress.id_maximum = 4820
uo_progress.id_value = 3120

// The value with a PowerBuilder mask, then what it counts
uo_progress.is_format = "#,##0"
uo_progress.is_unit = "of 4,820 rows"

// The import failed at this row : the bar turns red where it stands
uo_progress.is_state = u_pbt_progressbar.STATE_ERROR

A percentage with decimals #

// The readout says the share done with one decimal : a mask in % writes the percentage
uo_progress.ib_show_value = true
uo_progress.id_maximum = 4820
uo_progress.id_value = 1687
uo_progress.is_format = "0.0%"     // 35.0%

A wait that fails #

// A job of unknown length : a busy bar, with the text of the wait
uo_progress.ib_indeterminate = true
uo_progress.ib_show_value = true
uo_progress.is_unit = "Connecting to the server..."
// The connection failed : the busy bar stops, full and red, and says why
uo_progress.is_state = u_pbt_progressbar.STATE_ERROR
uo_progress.is_unit = "Connection lost"

A vertical bar with a name of its own #

// A level that fills from the bottom up, where a VProgressBar stood
uo_progress.is_orientation = u_pbt_progressbar.ORIENTATION_VERTICAL
uo_progress.ib_show_value = true
uo_progress.id_value = 35

// Two bars in one window : the screen reader tells them apart by their name
uo_progress.is_accessible_name = "Tank level"

Best practices #

Inherited from the common base #

These members exist on every visual component — they are not specific to this one. They are detailed once, in the transverse chapters; this table only says where to read them.

MembersRoleDetailed in
of_resetPut the component back to zero3.6 Resetting a component: of_reset()
of_register_shortcut · of_clear_shortcutsThe component's keyboard chords3.5 Keyboard shortcuts
of_is_created · of_is_ready · of_get_last_errorWhether it was born, whether it is ready, what failed3.7 Diagnostics
of_save_as_png · of_save_as_jpgExport the rendering as an image3.8 Exporting the rendering as an image
of_set_redrawGroup changes into a single repaint3.10 Best practices
of_preload_iconsIcons shown with no delayInstant display: of_icon
of_set_translationTranslate one of the component's labels5.2 Adapting a label: of_set_translation
of_focus_webviewGive the component the focus6.4 Keyboard and focus
of_print · of_print_to_pdfPrint, or write a PDF6.9 Printing
of_set_property · of_get_property · of_component_nameDriving a property by its name3.1 The property engine
is_accessible_name · is_accessible_descriptionThe name and description a screen reader says3.4 Optional properties and events

Two helpers are not inherited: of_icon and of_escape_markup live on n_pbt_utils. Declare one — n_pbt_utils lnv_utils, nothing to create — and call them on it.


← Component reference · Guide contents