Overview

** Important ** it only supports SVG images.

The Circular Progress Bar widget is a highly customizable and visually appealing progress indicator for Mendix Native mobile applications. This widget allows developers to display progress circularly with dynamic colors, sizes, and animations. Ideal for visualizing percentage-based metrics, the Circular Progress Bar can enhance the user interface of any Mendix app by providing real-time progress updates in an engaging and informative way.

Features

• Dynamic Count Display: Show progress based on a data attribute, with support for integer values below 100.
• Customizable Appearance: Adjust the size, border width, and colors to match your app's design.
  • Tint Colors: Define specific colors for different progress ranges (0-59%, 60-84%, 85-100%).
  • Font Settings: Customize the font size and color for the count value.
  • Background Color: Set the background color of the progress bar.
• Title and Logo Options: Display a custom title and SVG logo above the progress bar.
  • Logo Settings: Configure the logo's height and width in pixels.
• Smooth Animations: Define the duration and delay of the progress bar animation for a sleek user experience.
• Offline Capable: Works seamlessly in offline scenarios.

How to Use

1. Add the Widget: Drag and drop the Circular Progress Bar widget onto your native mobile page.
2. Configure Data Source: Set the Count attribute to an integer value representing progress (below 100).
3. Customize Appearance: Adjust the visual settings in the widget properties to fit your app's design.
4. Enable Title and Logo: Optionally, display a title and logo by configuring the respective properties.

Documentation

Typical Usage Scenario

The Circular Progress Bar widget is designed to display a visually appealing, animated progress indicator in your Mendix application. Ideal for showing progress towards a goal, completion status, or any other percentage-based metrics, this widget can be used in dashboards, reports, or anywhere you need a dynamic and interactive display of numerical data. It helps in providing clear visual feedback to users, making data interpretation easier and more engaging.

Features and Limitations

Features:

• Customizable Size and Appearance: Adjust the size, border width, and color scheme to fit your application’s design.
• Dynamic Data Display: Integrates with Mendix data attributes to dynamically update progress based on user input or other data changes.
• Title and Logo Support: Optionally display a title and an SVG logo above the progress bar for enhanced branding and context.
• Animation Support: Includes configurable animation duration and delay for smoother visual effects.

Limitations:

• SVG Logo Only: Currently supports only SVG format for logos. Other image formats are not supported.
• Static Attribute Range: The widget assumes that the count attribute value is below 100. Ensure your data adheres to this constraint for accurate display.

Dependencies

To ensure the widget functions correctly, make sure to install the following dependencies in your native template:

• react-native-svg: ^12.1.0
• react-native-circular-progress: ^1.3.9

Configuration

1. Set Up Data Source: Configure the Count attribute to ensure the progress bar reflects the correct data.
2. Customize Appearance: Adjust settings for widget size, border width, colors, and animation as needed.
3. Add Title and Logo (Optional): If using, configure the title and upload an SVG logo with desired dimensions.

Known Bugs

• Logo Format Restriction: Only SVG logos are supported. Logos in other formats may not display correctly.

Frequently Asked Questions

• Can I use non-SVG images for the logo? No, the widget currently supports only SVG format for logos.

• What happens if the count value exceeds 100? The widget is designed to handle count values below 100. Ensure data falls within this range for accurate progress representation.