Native Segmented Progress Bar

Category: Widgets
Subcategory: Display widgets


Is the normal Progress bar not sufficient? Do you want to show more segments? You can do that with the Segmented Progress Bar widget.

  • Use a JSON string or normal Object dataSource for your segments
  • Horizontal/Vertical mode
  • On Click events for a segment
  • Styling is done in normal Mendix Native Styling


Apache License Support Studio GitHub release GitHub issues

Mendix Native Segmented Progress Bar


Show a segmented progressbar in your Mendix Native Mobile app.

Special thanks to Kshitij Karandikar (Github) for providing the initial idea & version!


  • Show a segmented progressbar with multiple segments
  • Render your progress bar horizontal or vertical
  • Can use a JSON String or Object List as Datasource
  • Styling can be customized by using standard Mendix Native Styling
  • On Click events for a segment



Scenario 1 : JSON

  • Use the JSON Source String to show a progress bar. This has to be a proper JSON array, where objects contain the following key-values:
        "value": 10         // this is the numeric value, used to determine the size (the widget calculates the total value and sizes accordingly)
        "color": "#FF0000"  // HEX Color
        "sortOrder": 0      // Determine the sorting

Scenario 2 : Objects

  • Define the dataSource of objects (for example from the Database)
  • Value & Color are both mandatory
  • Sort is optional. If you do not define this, it will use the order set by the dataSource


  • When using Scenario 2 (Objects), you can define an onClick Action for a segment. The mendix object will be passed on as an input parameter.


  • You can set the rendering of the progress bar to either horizontal or vertical.


Styling is done in normal Mendix Native Styling procedures.

Class: com_mendixlabs_widget_native_segmentedprogressbar_SegmentedProgressBar

Default styling:

export const com_mendixlabs_widget_native_segmentedprogressbar_SegmentedProgressBar = {
    // ViewStyle properties for direction = "horizontal"
    container: {
        flexDirection: "row",   // We need this to render the bars horizontally
        width: "100%"           // We set the width to the maximum of the container
    containerVertical: {
        flexDirection: "column",// We need this to render the bars vertically
        height: "100%"          // We set the height to the maximum of the container
    item: {                     // ViewStyle properties that control all segments
        height: 20,             // Height of the progressbar (direction = "horizontal")
        width: 20,              // Width of the progressbar (direction = "vertical")
        borderRadius: 20        // Borderradius of first and last item
    firstItem: {},              // ViewStyle properties for first segment (left when "horizontal", top when "vertical")
    lastItem: {},               // ViewStyle properties for last segment (right when "horizontal", bottom when "vertical")
    middleItem: {}              // ViewStyle properties for middle segments

Issues, suggestions and feature requests

This widget is NOT officially supported by Mendix

Report your issues on Github, see here

Development and contribution

  1. Install NPM package dependencies by using: npm install. If you use NPM v7.x.x, which can be checked by executing npm -v, execute: npm install --legacy-peer-deps.
  2. Run npm start to watch for code changes. On every change:
    • the widget will be bundled;
    • the bundle will be included in a dist folder in the root directory of the project;
    • the bundle will be included in the deployment and widgets folder of the Mendix test project.


Apache 2


Version: 1.1.0
Framework Version: 9.6.0
Release Notes: - Vertical mode
Version: 1.0.0
Framework Version: 9.6.0
Release Notes: - First release