Linear Progress Bar

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

Usage

When to use

i. Integrate the progress indicator in the mobile apps or application modules of the mobile apps where the user needs to download the bulk of data, mobile app, files, or services, etc. ii. Also do not forget to represent the progress indicator by the numeric value. Constantly changed value of the progress indicator helps the user monitor the exact status of the activity.

Linear Progress Bar Configuration

On the ‘Linear Progress Bar” element, you can perform the following configuration:

• UI Configuration

UI Configuration

For the “Linear 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 –> Info –> Secondary –> Warning –> Danger –> Success	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 – Progress Bar	Color	Click the Color box and then define the original color of the strip or bar on which the progress bar moves. To define the strip’s color: –> In the Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#e0e0e0
UI Properties	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the strip’s color, you can also define the opacity in the percentage unit.	Yes	100%
UI Properties	Bar Color	Click the Color box and then define the progress bar’s color. To define the color: –> In the Bar Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	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. While configuring the progress bar’s color, you can also define the opacity in the percentage unit.	Yes	100%
UI Properties	Bar Length	In this box, enter the numeric value (for example: – 200) that specifies the total length of the progress bar in units.	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.