WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Progress Circle

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Choose Widget Template and Layout
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration
Edit

Using the Progress Circle Widget


In this article, you will learn how to create and configure a progress circle widget in a step by step process. A progress circle is a basic widget type.

  • You can use this widget to visualize the status of an event in a circle bar.
  • You can create reports or dashboards.

To use the progress circle widget for static data, you enter values in the widget properties for default, min and max values. Also, you can execute SQL queries from the database and generate database APIs to get dynamic values; bind those values for default, min and max values in the widget properties to visualize the status or the data.

Use case

On a progress circle widget, visualize the total sales percentage of the product when you click on the item name from the data table.

note

In the given example, we use the Product table which invokes data from the Sales table. Therefore, make sure to connect to the salesdb sample database. To import the sample database, see Connecting to a Database.

Creating a database API

  • In the DataBases menu, navigate to the Query tab.
  • Create a query to get the total sales value from the Sales table. For example, write the following lines of code in the query builder to get the sum of sales.
SELECT SUM(SALES) AS TOTAL
FROM SALES
  • Click Execute, and then click Save.
  • Name the query as MaximumValue; it then saves as a database API.
  • Click +New. Create another database API to get the total of each product's sale value. For example, write the following lines of code in the query builder to get the sum of total sales for each product:
SELECT SUM(SALES) AS PRODUCT_SALE 
FROM SALES
WHERE PRODUCT_ID = :productId
  • Add parameters for the PRODUCT_ID including TYPE and Test Value. For examples, Type: Integer; Test Value: 2;

  • Click Execute.
  • Click Save, and name the query as SalesByProduct; itsaves as a database API.

Designing the dashboard page

  • Create a Page called Product Sales. To create a page, see Page Creation.
  • Design the page to contain the progress circle widget and a data table as shown in the image below:

  • From the widgets, drag, and drop the Grid Layout widget to design and divide the page evenly.

  • Drag and drop the Progress Circle widget inside the grid.

  • Drag and drop a Data Table widget.

  • Configure the Data Table to show the products table.

    • Retrieve Data From → Services.
    • Select a service type → All.
    • Select a service → salesdb.
    • Table/Entity → Products → A variable will be created automatically, for example, SalesdbProductsData.
    • Records per request → 5.
    • Set Records per request, Update data on input change, Request data on page load, and click Next.
    • Enable ReadOnly → Simple View Only → Next.
    • Pagination → Basic → Next → Done.
  • Drag and drop the labels inside the Grid Layout.

  • Bind the Label12 Caption with the product sales value which is a SalesByProduct database API.

  • Bind the Label11 Caption with the product name

    • Click bind for Label11 caption.
    • From the Widgets tab, select ProductTable2 → selecteditem → name. See image below:

  • Bind the Label12 Caption with the product sales value which is a SalesByProduct database API.

Creating a database variable

  • Open the Variables configuration page.
    1. Click New Variable, choose Database APIs.
    2. In the next window, select SalesDB from the drop-down for the Database option.
    3. Choose an API type to Query APIs.
    4. Select the Query from the drop-down. For example, executeMaximumValue.
    5. Provide a Name to the variable as ServiceMaximumValue, and click Done.
    6. Similarly, add another variable. Follow the steps 1, 2, 3 in the variable configuration page.
    7. Select the Query from the drop-down. For example, executeSalesByProduct.
    8. Provide a Name to the variable as ServiceSalesByProduct, and click Done.
    9. For ServiceSalesByProduct, configure the Data to bind with productId.
    10. Go to the widgets tab, select ProductsTable2 → selecteditem → id.

    • Click Bind, and then Done.
      • Save and Close.

Configuring the progress circle widget

  • Select the progress circle and open the property settings.
  • Set the Default Value; for example, enter any number for a static value. For dynamic update, bind the Default value with the variable called Service SalesByProduct.dataSet[$i].productSale.
    • Click bind for the Default value in the properties.
    • Go to Variable tab and select ServiceSalesByProduct → dataSet → productSale. See the image below:
    • Click Bind.

  • Set validation for Minimum Value if you want to set a value other than “0”.
  • Set the Maximum Value; for example, enter any number for a static value. For dynamic update, bind the Maximum value with the variable called ServiceMaximumValue.dataSet[$i].total.
    • Click bind for the Maximum value in the properties.
    • Go to the Variable tab and select ServiceMaximumValue → dataSet → total. See the image below:
    • Click Bind.

Click the Preview icon to view the page. When you click on each table item, the product sale value displays on the progress circle widget. Also, on the right side of the progress circle, you will see the item name and total sale value.

Last updated on 5/18/2020 by Naresh Ravulapalli
← Selection Widgets - Use CaseWorking with Charts →
  • Creating a database API
  • Designing the dashboard page
  • Creating a database variable
  • Configuring the progress circle widget
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.