Radial Progress Bar

The “Radial Progress Bar” element displays the activity’s status as an incremental Radial visual presentation.

Usage

When to use

i. Always use it if the application has to display a huge amount of data. ii. Using a progress bar keeps users patient if the application takes the time to complete the job.

Radial Progress Bar Configuration

On the “Radial Progress Bar” element, you can perform the following configuration:

• UI Configuration

UI Configuration

For the “Radial Progress Bar” element, you can configure the following UI properties:

Tab	Property Name	Description	Mandatory	New Default Value
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	ProgressBar 1
Basic	caption	Specifies the title of the element.	No	Progress Bar
Basic	Value	In this box, enter the specific value that denotes the percentage of the total value that the progress bar represents.Enter the value in the following format: Static(“10”) In the above sample value, the “10” numeric value specifies that the progress bar will move forward by 10 units.	Yes	static(“50”)
Basic	Total Value	In this box, enter the maximum value to which the progress bar will move. In the Total Value box, enter the maximum value in the following format: Static(“100”) In the above sample value, the “100” numeric value specifies that the progress bar will move forward up to 100 units.	No	static(“100”)
Basic	Default Value	This property allows you to define the default value of an element. To define the default value: –> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs. –> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Enable	Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.	No	marked
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element. These pre-defined styles are: –> Primary –> Secondary –> Success –> Warning –> Info –> Danger	No	Primary
UI Properties	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	Theme Variable (Margin)
UI Properties	Element Alignment	Allows the user to set the position of the text within the element. You can use any of the following options for positioning the text: –> Right –> Top –> Bottom –> Top Right –> Top Left –> Bottom Right –> Bottom Left –> Center	No	Left top
UI Properties	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
UI Properties	Color	Click the Color box and then define the color of the progress bar indicator that moves forward along the bar.	No	#e0e0e0
UI Properties	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.	Yes	100%
UI Properties	Bar Color	Click the Color box and then define original color of the progress bar element before the progress bar indicator starts moving forward.	No	Theme Variable(Primary)
UI Properties	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.	Yes	100%
UI Properties	Bar Radius	In this box, define the radius of the bar. The bar’s radius determines the size of the radial progress bar.	No	200
UI Properties	Bar Thickness	In this box, enter the numeric value (For example: – 20) that specifies the thickness of the progress bar.	No	18
Data	Entity Path	This property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several attributes from the entity. –> In the list, select an attribute to map it to the element. After the user performs the function on the element, the application can perform the following functions: a. Fetches data from the attribute and then displays it in the element. b. Stores data in the attribute.	No	EntityName.