# How to create a progress bar display?

**URL:** <https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071>\
**Category:** Questions\
**Tags:** community\
**Created:** [September 2, 2022, 1:07pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071 "2022-09-02T13:07:28Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 1:07pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/1 "2022-09-02T13:07:28Z")

</div>

Since FMP does not have an object model where you, say, can tell an object to resize itself (possibly with a color for a progress bar) to a particular width, how difficult is it, or is it even possible in FileMaker, to implement this basic control?

Thanks!

---

<div class="post-metadata">

**Author:** ![planteg](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/planteg/32/627_2.png) [@planteg](https://the.fmsoup.org/u/planteg)\
**Post date:** [September 2, 2022, 1:38pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/2 "2022-09-02T13:38:10Z")

</div>

The easiest way would be to use an EditBox to display string of characters like this one ██

You add one when your process have gone further:

██  
████  
██████

Another would be to use a WebViewer that use some JavaScript code that implements a progress bar. See [Filemaker Pro - Progress Indicator - YouTube](https://www.youtube.com/watch?v=mlZfDixs_js) for an example of this implementation.

---

<div class="post-metadata">

**Author:** ![harvest](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/harvest/32/231_2.png) [@harvest](https://the.fmsoup.org/u/harvest)\
**Post date:** [September 2, 2022, 1:58pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/3 "2022-09-02T13:58:26Z")

</div>

the answer to this is - like in many other cases - "MBS" (almost as versatile as "42" 😀)  
[https://www.mbsplugins.eu/component\_ProgressDialog.shtml](https://www.mbsplugins.eu/component_ProgressDialog.shtml)

I use it quite often because the users get cooled down while waiting for longer processing to get finalized

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 2:19pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/4 "2022-09-02T14:19:10Z")

</div>

I think the web viewer is a good solution.  
Thanks!

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 2:21pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/5 "2022-09-02T14:21:00Z")

</div>

Thanks.  
I try to avoid plug-ins unless no other workaround is possible.  
The web viewer idea that @planteg mentioned above looks like a nice way to go about this in FileMaker.

---

<div class="post-metadata">

**Author:** ![harvest](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/harvest/32/231_2.png) [@harvest](https://the.fmsoup.org/u/harvest)\
**Post date:** [September 2, 2022, 2:36pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/6 "2022-09-02T14:36:58Z")

</div>

webviewers can be tricky with forcing a refresh while scripts are running on another window or maybe the webviewer can reside on the same layout but be kept hidden when not needed - I suppose there are nice templates for these to be found on the internet

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 2:38pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/7 "2022-09-02T14:38:25Z")

</div>

That's a good point. Thanks! Maybe MBS is the better route. I just find all the "setup" required for calling an MBS function to be a pain if I can avoid it, that is.

---

<div class="post-metadata">

**Author:** ![samfmp](https://avatars.discourse-cdn.com/v4/letter/s/a9a28c/32.png) [@samfmp](https://the.fmsoup.org/u/samfmp)\
**Post date:** [September 2, 2022, 3:28pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/8 "2022-09-02T15:28:44Z")

</div>

Have you tried this one? I have downloaded it from modular FileMaker org which cannot be accessed currently.

[Prog Bars.fmp12](https://the.fmsoup.org/uploads/short-url/f36anoXxft4LAPPUcYIzO5Y5UNw.fmp12) (232 KB)

---

<div class="post-metadata">

**Author:** ![harvest](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/harvest/32/231_2.png) [@harvest](https://the.fmsoup.org/u/harvest)\
**Post date:** [September 2, 2022, 4:35pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/9 "2022-09-02T16:35:34Z")

</div>

small example snippet for loop with progressbar 🕶

Set Variable [$fkmlCompany ; Wert: ""]

---# start:  
---# set up count of elements in multiline key, set counter to 1  
Variable setzen [$CountE ; Wert: ElementeAnzahl($fkmlCompany)]  
Variable setzen [$CounterE ; Wert: 1]  
---#  
---# setup progress dialog: Title will appear as window title, Top Text above the bar, Bottom Text below the bar, can be used for textual feedback to the user with additional counter in a loop

Set Variable [$PDTitle ; Wert: MBS("[ProgressDialog.SetTitle](http://www.mbsplugins.eu/ProgressDialogSetTitle.shtml)"; "Create Items") ]

Set Variable [$PDTopText ; Wert: MBS("[ProgressDialog.SetTopText](http://www.mbsplugins.eu/ProgressDialogSetTopText.shtml)"; "processed values") ]

Set Variable [$PDBottomText ; Wert: MBS("[ProgressDialog.SetBottomText](http://www.mbsplugins.eu/ProgressDialogSetBottomText.shtml)"; "here we go") ]

Set Variable [$PDButtonCaption ; Wert: MBS("[ProgressDialog.SetButtonCaption](http://www.mbsplugins.eu/ProgressDialogSetButtonCaption.shtml)"; "Cancel") ]

Set Variable [$PDClearImage ; Wert: MBS("[ProgressDialog.ClearImage](http://www.mbsplugins.eu/ProgressDialogClearImage.shtml)") ]

Set Variable [$PDSetProgressStart ; Wert: MBS("[ProgressDialog.SetProgress](http://www.mbsplugins.eu/ProgressDialogSetProgress.shtml)";-1) ]

Set Variable [$PDShow ; Wert: MBS("[ProgressDialog.Show](http://www.mbsplugins.eu/ProgressDialogShow.shtml)") ]  
---#

Loop

Set Variable [$PDSetProgress ; Wert: MBS("[ProgressDialog.SetProgress](http://www.mbsplugins.eu/ProgressDialogSetProgress.shtml)"; $CounterE \* 100/$CountE) ]

Set Variable [$PDBottomText ; Wert: MBS("[ProgressDialog.SetBottomText](http://www.mbsplugins.eu/ProgressDialogSetBottomText.shtml)"; GetAsText($CounterE) & " of " & GetAsText($CountE)) ]

---# function loop start

---# get value from multiline key by counter  
Set Variable [$fkCompany ; Wert: GetValue( $fkmlCompany ; $CounterE )]

---# function loop stopp  
---# catch "Cancel"-button in progress dialog  
Exit Loop If [MBS("[ProgressDialog.GetCancel](http://www.mbsplugins.eu/ProgressDialogGetCancel.shtml)") ]

---# condition for end of loop: counter greater than count, counter incremented in condition by 1 per loop  
Exit Loop If [Let( [ $CounterE = $CounterE + 1] ; $CounterE \> $CountE) ]

End Loop  
---# stop

Set Variable [$PDBottomText ; Wert: MBS("[ProgressDialog.SetBottomText](http://www.mbsplugins.eu/ProgressDialogSetBottomText.shtml)";"cleaning up …") ]

Pause Script [Duration (Seconds): 1]

Set Variable [$PDHide ; Wert: MBS("[ProgressDialog.Hide](http://www.mbsplugins.eu/ProgressDialogHide.shtml)") ]

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 5:14pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/10 "2022-09-02T17:14:08Z")

</div>

Thanks Sam.

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 2, 2022, 5:15pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/11 "2022-09-02T17:15:57Z")

</div>

Yikes!

What I'd really like is a rectangle "control" that I can send messages to, liie:

rec.setColor = "Blue"

Then, several (for progress):

rec.setWidth(20);  
rec.setWitdh(50);  
.  
.  
.  
etc.

---

<div class="post-metadata">

**Author:** ![Markus](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@Markus](https://the.fmsoup.org/u/Markus)\
**Post date:** [September 3, 2022, 6:18am UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/12 "2022-09-03T06:18:04Z")

</div>

in principle, this is a feature that has to be implemented by Claris. Some (or most) of the 'third-party' solutions are too complicated, maybe somewhat tricky  
-\> feature request

As a workaround, we do a refresh-window every 100 or every 1000 records (etc., depends on number of records to be processed), so that the native slider on top left will be updated... not very elegant, but native

With MBS it looks really like a true progress bar - but becomes tricky if the FileMaker-process has to be interrupted (progress bar will stay on screen..)

Another problem with progress bars is when a vendor does no longer show a progress bar... (installing a new FileMaker version via update - there is no progress bar - but a piece of graphics that moves from left to right, then from right to left... also software install on macOS - there is a progress bar, but that thing won't move for looong time, etc.)

---

<div class="post-metadata">

**Author:** ![Otmar](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/otmar/32/703_2.png) [@Otmar](https://the.fmsoup.org/u/Otmar)\
**Post date:** [September 3, 2022, 7:22am UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/13 "2022-09-03T07:22:59Z")

</div>

Here's a simple repeating field and 2 global variables with some conditional formatting implementation. Drawback: needs a window refresh to update.  
[Progressbar.fmp12.zip](https://the.fmsoup.org/uploads/short-url/qQdtPp6QHm9JbRNnRMDfsw3Wn6w.zip) (72.7 KB)

best  
Otmar

---

<div class="post-metadata">

**Author:** ![cheesus](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/cheesus/32/182_2.png) [@cheesus](https://the.fmsoup.org/u/cheesus)\
**Post date:** [September 3, 2022, 8:10am UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/14 "2022-09-03T08:10:20Z")

</div>

I use a button bar with 10 or 20 buttons and color them with conditional formatting, based on a $$Variable. So I have total control over the looks of the button bar like round edges or outlines.

 ![Button Bar Progress Bar](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/8/8131081ac147c541dbd9be6eab99150003945533.png)

---

<div class="post-metadata">

**Author:** ![OliverBarrett](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@OliverBarrett](https://the.fmsoup.org/u/OliverBarrett)\
**Post date:** [September 3, 2022, 10:02am UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/15 "2022-09-03T10:02:02Z")

</div>

Ingenious!

---

<div class="post-metadata">

**Author:** ![Torsten](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/torsten/32/1574_2.png) [@Torsten](https://the.fmsoup.org/u/Torsten)\
**Post date:** [September 3, 2022, 3:29pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/16 "2022-09-03T15:29:25Z")

</div>

The OS provides functionality for the implementation of progress indicators (example [Apple](https://developer.apple.com/design/human-interface-guidelines/components/status/progress-indicators)).  
Any ‘low code’ development platform should either provide its own elements in consistency with the target OS or give access to the OS‘s primitives.

---

<div class="post-metadata">

**Author:** ![mipiano](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/mipiano/32/1074_2.png) [@mipiano](https://the.fmsoup.org/u/mipiano)\
**Post date:** [September 3, 2022, 4:15pm UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/18 "2022-09-03T16:15:42Z")

</div>

> [@cheesus](#):
>
> I use a button bar with 10 or 20 buttons and color them with conditional formatting, based on a $$Variable. So I have total control over the looks of the button bar like round edges or outlines.
> 
> ![Button Bar Progress Bar](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/8/8131081ac147c541dbd9be6eab99150003945533.png)

I think you are using a similar approach to the module that @samfmp mentioned above. That uses a button bar.

---

<div class="post-metadata">

**Author:** ![LucThomaere](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/lucthomaere/32/3108_2.png) [@LucThomaere](https://the.fmsoup.org/u/LucThomaere)\
**Post date:** [September 7, 2022, 8:28am UTC](https://the.fmsoup.org/t/how-to-create-a-progress-bar-display/3071/19 "2022-09-07T08:28:17Z")

</div>

I used a small library (table) of, let' s say 100 rectangles, one for each %, in combination with a container field that calls the right rectangle when refreshed. Very simple and fast, no plug-ins needed, no Javascript and web viewers.
