DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Difference Between Bootstrap and AngularJS in 2022
  • Automating Developer Workflows and Deployments on Heroku and Salesforce
  • Custom App Experiences With Lightning Web Components
  • Electron Js + jQuery + Bootstrap - Dev to Build

Trending

  • Monorepo Development With React, Node.js, and PostgreSQL With Prisma and ClickHouse
  • Revolutionizing Software Development: Agile, Shift-Left, and Cybersecurity Integration
  • How to Improve Software Architecture in a Cloud Environment
  • OTel Me Why: The Case for OpenTelemetry Beyond the Shine
  1. DZone
  2. Coding
  3. Frameworks
  4. Mendix: Progressing Through Progress Bars

Mendix: Progressing Through Progress Bars

In this post, I will highlight one of the available progress bar widgets, which is a great tool for displaying the progression of a workflow to the user.

By 
Joe Ranieri user avatar
Joe Ranieri
·
Aug. 23, 16 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
3.9K Views

Join the DZone community and get the full member experience.

Join For Free

In this post, I will highlight one of the available progress bar widgets, which is a great tool for displaying the progression of a workflow to the user.

Why Use a Progress Bar Widget?

When going through a multi-step process in your app (such as completing an order form or doing a survey), having a visual indication of how close you are to being done leads to a great user experience. That's where the progress bar widget comes in. This widget gives developers the power to display an end user’s progression visually using several different styles to ensure the progression message is delivered successfully to the end-user.

Finding the Progress Bar Widget

You can find the progress bar widgets in the Mendix App Store. There are several progress bar widgets listed when you search for “progress bar,” but the main focus of this blog will be the Bootstrap Progress Bar widget created by Flock of Birds:

Pic11

Widget Functionality

At its heart, the Bootstrap Progress Bar widget simply displays the appropriate progress bar with a number between 0 and 100 to indicate the percentage of completion. It is also possible to display text after the number in the progress bar (for example, you can display ”75” or ”75% Complete”).

Configuring the Widget

The first thing you’ll need to do is link the widget to the correct Progress attribute and Bootstrap Style:

Pic2

The progress attribute is the integer that displays the progress completed, and it should be set to a number in the range of 0 to 100. The Bootstrap style can be used to alter the appearance of the progress bar if it is one of the following values: info, danger, or success. The Bootstrap style can be linked to the progress attribute through microflows so that, for example, a progress of 0% could be displayed in the progress bar in the “danger Bootstrap Style” while a progress of 100% could be displayed in the progress bar in the “success Bootstrap Style.”

You can also adjust several display settings, such as what the progress bar displays after the percentage value, the width of the widget in the app, the color switch value, and the appearance of the bar itself.

Image title


It is also possible to give the progress bar an on-click action through a microflow as shown below. One use case for utilizing a microflow action is when the user wants to update the progress bar completion percentage based on new information filled in on the user’s current page.

Image title

Pic5

On top of the example mentioned above, you can also apply CSS styling to your progress bar and the text contained within the bar.

Image title

Pic7

Pic8

This simple yet effective widget is a great way to visually illustrate the progression of a workflow, and it gives Mendix developers the advantage of adding an easy-to-use progress bar to their pages!

Bootstrap (front-end framework) End user app Use case Attribute (computing) workflow dev Flock (web browser) CSS Advantage (cryptography)

Published at DZone with permission of Joe Ranieri, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Difference Between Bootstrap and AngularJS in 2022
  • Automating Developer Workflows and Deployments on Heroku and Salesforce
  • Custom App Experiences With Lightning Web Components
  • Electron Js + jQuery + Bootstrap - Dev to Build

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: