Progress Bar - Finance (Theme 2)

Progress Bar - Finance (Theme 2)

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 28, 2017 By: Kony Team
161 0 0 41
Progress-bar gives instant visual feedback to the user on how far along he/she is in a process. Just drag and drop the component into your app, configure a few properties and that's all- you are ready to go.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Ready-to-use Visualizer component
  • Simple and user-friendly UI to keep user updated on his/her progress
  • Determinate Progress bar- supports up to 8 states/steps
  • Easy to customize- use your own icons and color schemes

Prerequisites

  • Kony Visualizer v8

Progress Bar visually tells the progress of a process to the user. The progress is communicated by dividing the task / process into multiple states and then highlighting the completed states.

Use case

Consider a case that you want to develop an e-commerce app that helps users to perform financial transactions. In this app, you want to develop a feature that keeps the users updated with the current status of their order (Items Selected, Order Placed, Payment Confirmed, Items up for Delivery etc.). Using the Progress Bar component, you can achieve the feature in your app. To achieve the feature, do the following.

  1. Define a Progress Bar component with required number of states.
  2. Change the state of the Progress Bar in sync with the status of order (Example: Items Selected, Order Placed, Payment Confirmed, Items up for Delivery etc.).

Now, your app shows users the status of their order through the Progress Bar component.

The Progress Bar component is a ready-to-use component. You can import the Progress Bar component into your app (created in Kony Visualizer), and can achieve the features without developing it from scratch. The Progress Bar component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and functionality, if required.

The following sections help you use the Progress Bar component in your app.

Prerequisites

Before you start using the Progress Bar component, ensure the following:

  1. Kony account.
  2. Kony Visualizer V8.

Importing the Progress Bar Component

Before you start importing the component to Kony Visualizer, you must download the component from Kony Marketplace website.

You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you have downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    progressfinance2_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.progressfinance2 name is displayed by default.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Progress Bar Component into your App

You can add a Progress Bar component to FlexForms only.

To add a Progress Bar component:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form. You will also see a new element, com.konymp.progressfinance2, under the component section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You will also see a new tab Component, on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the component tab are grouped under General, Image, and Color properties.

Note:

Changes made to the Color and General properties are reflected only at the run time, but not at the design time (Visualizer Canvas).

You can also add a Progress Bar component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
/* creating a component's Object */
var progressFinance2 = new com.konymp.progressfinance2(
{
	"clipBounds":true,
	"height": "11%",
	"id": "progressfinance2",
	"isVisible": true,
	"left": "0dp",
	"top":"0dp",
	"width": "100%",
	"zIndex": 1
}, {}, {});

/*Setting the component's properties*/
progressfinance2.stateCount = 4;
progressfinance2.bgColor = "FFFFFF";
progressfinance2.activeIcon="active.png";
progressfinance2.inactiveIcon="inactive.png";
progressfinance2.separatorBaseColor="B6B6B6";
progressfinance2.separatorFillColor="177AFF";

/*Adding the Progress Bar component to a Form*/
this.view.add(progressFinance2);

In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Progress Bar component. You can set the properties directly on the Component tab or by writing a JavaScript.

Image Properties

Active Icon
Description: Specifies the source image of icon's active state.
Syntax: activeIcon
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.activeIcon ="active.png";

.

Inactive Icon
Description: Specifies the source image of icon's inactive state.
Syntax: inactiveIcon
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.inactiveIcon ="inactive.png";

General Properties

Number of States
Description: Specifies the number of states / steps in the Progress Bar .
Syntax: stateCount
Type: String
Read/Write:

Read

Example:
var states = this.view.componentID.stateCount;
Remarks: This property is has write permissions only at the time of creation. Number of states should range between 2 and 8. This throws an exception if the value provided is out of bounds or an invalid value is assigned. The user needs to handle this exception.
Default Values: 4

Color Properties

Background Color
Description: Specifies background color of the component in Hexadecimal Format. It accepts 6 digit or 8 digit with permitted alpha position. For example, ffffff or ffffff00.
Syntax: bgColor
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.bgColor ="FFFFFF";
Remarks: This property is has write permissions only at the time of creation. This throws an exception if the value provided is out of bounds or an invalid code is assigned. The user needs to handle this exception.
Default Values: ffffff
Separator Base Color
Description: Specifies the base / inactive color of the Separator Line in Hexadecimal Format. It accepts 6 digit or 8 digit with permitted alpha position. For example, ffffff or ffffff00.
Syntax: separatorBaseColor
Type: String
Read/Write:

Read

Example:
var sepBaseColor = this.view.componentID.separatorBaseColor;
Remarks: This property has write permissions only at the time of creation. This throws an exception if the value provided is out of bounds or an invalid color code.
The user needs to handle this exception.
Default Values: b6b6b6

 

Separator Fill Color
Description: Specifies the fill / active color of the Separator Line in Hexadecimal Format. It accepts 6 digit or 8 digit with permitted alpha position. For example, ffffff or ffffff00.
Syntax: separatorFillColor
Type: String
Read/Write:

Read

Example:
var fillColor = this.view.componentID.separatorFillColor;
Remarks: This property is has write permissions only at the time of creation. This throws an exception if the value provided is out of bounds or an invalid color code is assigned.
The user needs to handle the exception
Default Values: 177aff

APIs

The following are the APIs pertaining to the Progress Bar component.

goNext API

This API moves the current state to next state. Initialize the component before invoking the goNext API. If you call the goNext API at the last state, it throws an exception as the next state does not exist.

Syntax
goNext()
Parameters

None

Return Value

None

Example
this.view.componentID.goNext();
Remarks

If the user triggers this API at the final state, an exception will be thrown with a message “Next state doesn't exist”. This exception is expected to be handled by the user.

goPrev API

This API moves the current state to the previous state. Initialize the component before invoking the goPrev API. If you call this API at the first state, it throws an exception as the previous state does not exist.

Syntax
goPrev()
Parameters

None

Return Value

None

Example
this.view.componentID.goPrev();
Remarks

If the user triggers this API at the final state, an exception will be thrown with a message “Previous state doesn't exist”. This exception is expected to be handled by the user.

getCurrentState API

This API returns the current state of the Progress Bar . Initialize the component before invoking the getCurrentState API.

Syntax
getCurrentState()
Parameters

None

Return Value

Returns the current state number.

Example
var currentState = this.view.componentID.getCurrentState();

Limitations

The following are the limitations pertaining to the Progress Bar component.

  • Initial version does not support landscape mode.
  • Initial version does not provide an option to control the speed of animation.