Progress Indicator

WorkWithPlus provides the possibility to include Progress Indicators with different styles. This user control is really useful to create Dashboards by combining them with other controls like Charts and Grids.

A running WorkWithPlus dashboard web page shows a top navigation bar (Dashboard, Sample Pages, Multi level menu, EN, John Freeman account) and a layout of KPI Cards (Sales 74%, Revenue 62%, Views 50%, Users 15%) at top, a Task Board donut chart and Monthly Report line/area chart with a Goal Completion progress-bar panel in the middle, and a Sales Table bar/line chart alongside a product Name/Price/Status list at the bottom; red callout boxes label the Cards and Bars regions.

This user control has two available flavours: cards and bars. You can also customize the look&feel of the control and the percentage that will shown.

The Web Panel 'WPDashboard' Patterns tab, based on template Dashboard6, shows a tree of Cards containing User Control nodes (ProgressCard1-4) and charts; an arrow points from the ProgressCard1 tree node to its Properties panel showing User Control 'DVelop.GXBootstrap.DVProgressIndicator' with an open 'User Control Properties' dialog listing Type Circle, CircleCaptionType Caption, Caption '50%', Cls ProgressWhite, Percentage 50, CircleWidth 70, and AnimateOnStart True.

 

The porcentage can be also set dynamically by adding the following code int the Events tab:

The Web Panel 'WPDashboard' Events code editor shows the 'Event Start' handler setting '&MyPercetage=GetTaskCompetitionPercentage()' and 'ProgressCard1.Percentage=&MyPercetage', followed by generated WorkWithPlus pattern code setting TableChart2.Height=412 and TableChart1.Height=275, bracketed by 'Do not change' comments.

 

Properties of User Control Progress Indicator:

User Control Control Name The GeneXus properties grid for a User Control named ProgressCard1 shows Control name as ProgressCard1, User Control set to DVelop.GXBootstrap.DVProgressIndicator, and User Control Properties listing Caption, Cls, Percentage. Under Location in father container, Cell theme class is ProgressCardCellWarning, Column span and Row span are 1, Align is Left, Start Col/Fst Avail is 0, and Merge With Previous Cell is False.
User Control

User Control Properties
Location in father container Cell control name
Cell theme class
Column span
Row span
Align
Start Col/Fst Avail
Merge With Previous Cell

Control Name

Name of Control Name

User Control

DVelop.GXBootstrap.DVProgressIndicator

User Control Properties

Circle:

Type

The User Control Properties dialog for the DVProgressIndicator shows Type set to Circle, CircleCaptionType set to Caption, Caption "50%", Cls ProgressWhite, Percentage 50, CircleWidth 70, CircleProgressWidth 8, and AnimateOnStart set to True, configuring a circular progress indicator.

CircleCaptionType

Caption

Cls

Percentage

CircleWidth

CircleProgressWidth

AnimateOnStart

Bar:

Type

The User Control Properties dialog for the DVProgressIndicator shows Type set to Bar, Caption "50%", Cls ProgressWhite, Percentage 50, BarWidth 100%, and AnimateOnStart set to True, configuring a horizontal progress bar variant.

Caption

Cls

Percentage

BarWidth

AnimateOnStart

 

Type


Two possible values
  • Circle
  • Bar

CircleCaptionType

Caption

  • Enable Caption property

Caption and Subtitle

  • Enable Caption and Subtitle properties

Raw HTML

  • Enable Raw HTML

Caption

Text inside bar or circle

Subtitle

Text shown below Caption. Visible If CircleCaptionType = CaptionAndSubtitle.

Raw HTML

It allows inserting html code for the description. Visible If CircleCaptionType = RawHTML

Cls

WorkWithTheme Custom Class

Percentage

Value 0-100 that indicate the progress of bar/circle indicator.

CircleWidth

Circle diameter.

BarWidth

Length of the bar inside the parent container.
0%-100% values allowed.

CircleProgressWidth

Circle bar thickness.

AnimateOnStart

If show an animation when the control is initialized.