Progress Check

Progress Check

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jun 19, 2017 By: Kony Team
108 0 0 15
A progress bar visually tells a user how far along he/she is in a process.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Ready-to-use Visualizer component.
  • Progress Bar (check) visually tells the progress of a process to the user.
  • Simple and user-friendly UI. 
  • Easy to personalize.
     

Prerequisites

  • A Kony account.
  • Kony MobileFabric 7.3.

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 purchase consumer products. In this app, you want to develop a feature that keeps the users updated with the current status of their order (Order Placed, Shipped, Out for Delivery, Delivered 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: Order Placed, Shipped, Out For Delivery, Delivered 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 7.3

Importing the Progress Bar Component

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

  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.
    progresscheck_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.progresscheck name is displayed by default. If you want, you can rename it.

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. 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.progresscheck, 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 categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom properties are user-defined properties based on the use case of the component.

Note:

Changes made to the custom 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 the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the file.
    /* creating a component's Object */
    var progressCheck = new com.konymp.progresscheck({
                    "clipBounds":true,
                    "height": "11%",
                    "id": "progresscheck",
    		 "isVisible": true,
    		 "left": "0dp",
    		 "top":"0dp",
    		 "width": "100%",
                    "zIndex": 1
                    }, {}, {});
     /*Setting the component's Pass Through and Custom properties*/
     	progressCheck.stateCount = 4;
     	progressCheck.bgColor = "4785F4";
     	progressCheck.activeIcon="active.png";
    	progressCheck.inactiveIcon="inactive.png";
    	progressCheck.separatorBaseColor="000000";
     	progressCheck.separatorFillColor="FFFFFF";
    
    /*Adding the Progress Bar component to a Form*/
               this.view.add(progressCheck);
    

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

  3. 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.

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

Read + Write

Example: this.view.progresscheck.activeIcon ="active.png";.
Inactive Icon
Category: Pass Through
Description: Specifies the source image of icon's inactive state.
Syntax: inactiveIcon
Type: String
Read/Write:

Read + Write

Example: this.view.progresscheck.inactiveIcon ="inactive.png";
Number of States
Category: Custom
Description: Specifies the number of states / steps in the Progress Bar.
Syntax: stateCount
Type: String
Read/Write:

Read

Example: var states = this.view.progresscheck.stateCount;
Background Color
Category: Custom
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.progresscheck.bgColor ="FFFFFF";
Separator Base Color
Category: Custom
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.progresscheck.separatorBaseColor;
Separator Fill Color
Category: Custom
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.progresscheck.separatorFillColor;

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.progresscheck.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.progresscheck.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.progresscheck.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.

Known Issues

None.