Skip to content

feat: Add dynamic progress bar to form screens #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
Bahati308 merged 1 commit into from
Dec 10, 2025
Merged

feat: Add dynamic progress bar to form screens #52

Bahati308 merged 1 commit into from
Dec 10, 2025

Conversation

@Bahati308
Copy link
Contributor

@Bahati308 Bahati308 commented Dec 9, 2025 •
edited
Loading

Description

  • Implements a dynamic progress bar for Formplayer forms that shows completion progress at the top of each screen.
  • The progress bar updates as users navigate and reaches 100% only when they reach the Finalize page.

Changes Made

New Component: FormProgressBar.tsx

  • Uses Material-UI LinearProgress component
  • Displays percentage completion alongside the progress bar
  • Supports multiple calculation modes (screens, questions, or both)
  • Handles nested form schemas and edge cases

Integration: Updated SwipeLayoutRenderer.tsx

  • Progress bar rendered at the top of each form screen
  • Calculates total screens including Finalize screen
  • Tracks current page position and Finalize page state
  • Updates dynamically on navigation

Testing

  • Tested in android using ADB
  • Progress bar displays correctly on all form screens
  • Progress updates correctly when navigating between screens
  • Progress reaches 100% only on Finalize page
  • Works with forms containing multiple questions per screen
  • Works with forms containing single-question screens
  • Handles edge cases (empty forms, no screens)

Android Screenshots

Screenshot_20251209-130549 Screenshot_20251209-130601 Screenshot_20251209-130608 Screenshot_20251209-130616

Closes #8

@Bahati308
feat(formplayer): Add dynamic progress bar to form screens
e857e04 
Add FormProgressBar component using MUI LinearProgress that displays
at the top of each form screen. Progress updates dynamically as users
navigate and reaches 100% only on the Finalize page.

Fixes OpenDataEnsemble#8
@Bahati308 Bahati308 requested review from IamLRBA and r0ssing December 9, 2025 09:31
@Bahati308 Bahati308 marked this pull request as ready for review December 9, 2025 09:31
@Bahati308 Bahati308 added ui For issues related to user interface components, layout, styling, and front-end interactions. formplayer Issues related to the FormPlayer React application labels Dec 9, 2025
r0ssing
r0ssing approved these changes Dec 9, 2025
View reviewed changes
Copy link
Contributor

@r0ssing r0ssing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great. This is super useful!

@Bahati308 Bahati308 merged commit 2c0e4bf into OpenDataEnsemble:dev Dec 10, 2025
3 checks passed
@Bahati308 Bahati308 deleted the Fix-Issue#8 branch December 10, 2025 10:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@r0ssing r0ssing r0ssing approved these changes

@IamLRBA IamLRBA Awaiting requested review from IamLRBA

Assignees

No one assigned

Labels

formplayer Issues related to the FormPlayer React application ui For issues related to user interface components, layout, styling, and front-end interactions.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Formplayer: Add progress bar

2 participants

@Bahati308 @r0ssing