Awesome Progress Bar for FileMaker

You can build some awesome progress indicators utilizing the FileMaker web viewer. Because they do not require a plug-in they display well on FileMaker Go as well. They also do not require access to the internet because the html for the web viewer is embedded directly in FileMaker.

These examples are very simple to display from script control by changing the value of the global variables $$progress or $$progressText. If they are blank, nothing will be displayed.

Download the Awesome Progress Bar sample file (FileMaker 12) here. The older version for FileMaker 11 is here.

Update 9-16-13 There seems to be some issues with FileMaker Go correctly displaying the animated GIF file in a web viewer via a Data URL in the latest version of FileMaker Go. We’re looking into this. In the mean time, we’ve uploaded a new FileMaker 12 version of the file that includes some updates to the code to make it simpler and easier to use as well as more flexible. It includes a new HTML 5 version of the progress bar that will work on newer systems.

Comments

  1. Hi Tim, your solution is quite interesting.

    I have an issue I was hoping you could shed a light on it. When I open your demo file on Pro 11 the progress bar display properly, however when I open it in Filemaker Pro 10 I get the little white icon with the red “x” indication the file is missing. Is this an issue with the way Pro 10 web viewer interprets the base 64 file?

    Thank you

    • I’ve noticed some issues with display of this code in the web viewer on older versions of FileMaker or Windows where an older Internet Explorer rendering engine is used. Everything seems to work fine with FileMaker 11 and more recent versions of Windows/IE.

  2. hi tim,

    thanks for sharing your solution… i think it is awesome!! i have essentially copied your web viewer content and your script steps to enable this same functionality in one of my own solutions. so that all works great.

    now i am trying to follow your suggestion about customizing the graphic to mesh with my layouts. i created a .gif from “ajaxload” but i am having difficulties with the next step (does it matter that they generated a .gif and not a .png for me?). i placed the image on my desktop. next, i opened terminal and typed in the text you specified replacing the “FILEPATHIN” and “FILEPATHOUT” with the name of the graphic file (in my case it happens to be “ProgressWheel__Black_White.gif” (i leave the “.gif” out when substituting the text)). so my command line reads: “openssl base64 -in ProgressWheel__Black_White.gif -out ProgressWheel__Black_White.txt”. however, i get an error which says “no such file or directory”. i think i need to specify the path somehow but i don’t know anything about command line instructions. Do you mind taking me a couple steps further? will it be obvious once i have this text where to insert it in the web viewer calculation? thanks again for sharing sucha great feature!

    regards,

    john h.

    • If you’re on a Mac, you can begin typing the command line, pause before the FILEPATHIN. Drag the file in question onto the terminal window and it will type the full path name of the file for you. Then you can continue typing the rest of the command. Give that a try…

  3. I love your solution and have implemented it in my database. However, one question. Is there a way to make the webviewer transparent so that you can use this solution on something other than a white background?

  4. One further question. Is it possible to have the first frame of an animated gif show when the progress bar is inactive so that it can be made into a button that activates when clicked?

  5. Yes, I believe the web viewer can be made transparent via the FileMaker toolbar. See this detailed info regarding the web viewer.
    http://help.filemaker.com/app/answers/detail/a_id/6087/~/web-viewers-in-browse-and-find-mode,-form-and-list-view
    I’m not sure about showing the first frame of an animated gif while inactive…that may require something more complex…or may not be possible. I’d love to see others ideas to build on this…

  6. Thanks for your response Tim. Unfortunately, it does not seem to work. Even setting the criteria to transparent still results in a white rectangle while the progress bars are not active. This limits its use to white backgrounds.

    • Was a way to change the background color of the white rectangle when the progress bar is inactive?

      • Tim Cimbura says:

        You could build a new set of graphics elements with transparent backgrounds…then encode as described in the article. It would need to be in .gif or .png format since .jpg doesn’t support transparency. Let me know if you do this. The result would be great to post for others.

  7. Hi,

    I know your sample file has been around for a while now, but your Refresh script step does cause the layout text to flash / redraw on Windows PCs. I’ve adjusted your script to avoid this using the Freeze Window step which works almost the same as Refresh, but without the redraw. The Refresh Window is not so much of an issue in the second half of the script because it’s not being repeated in a loop.

    // First part of script, prior to loop, is unchanged
    Loop
    Freeze Window
    Pause/Resume Script [ Duration (seconds): .5 ]
    Set Variable [ $$progress; Value:$$progress+1 ]
    Exit Loop If [ $$progress>10 ]
    Set Variable [ $$progressText; Value:$$progress*10 & "% complete" ]
    End Loop
    Set Variable [ $$progress; Value:"" ]
    Set Variable [ $$progressText; Value:"" ]
    Refresh Window
    #
    Else If [ Get(ScriptParameter)="Indeterminate" ]
    #$$progress=”" means not visible
    #$$progress must be “unknown” to display bar
    Set Variable [ $$progress; Value:"unknown" ]
    Refresh Window
    Pause/Resume Script [ Duration (seconds): 5 ]
    Set Variable [ $$progress; Value:"" ]
    Refresh Window
    End If

  8. I made the suggested changes to the demo file to eliminate the flashing on Windows. Enjoy!

  9. Stephen says:

    Is it possible to change the proportions of the graphics? For example, the current width of the progress bar is 210 px, I’d like to use something shorter. Is there a way to do this?

  10. Tim Cimbura says:

    Yes…I believe you’d have to build a new set of images for the progress bar and encode them in the html in the same way. There is no parameter that would auto resize the existing image that I know of…hmmm…thinking…

  11. Tim – great and simple! But of course running under IWP requires something very different as essentially the browser has to query and get the value of a filemaker variable. I’m working on doing this with a JS JQuery UI/Web Viewer approach but before I get stuck in I was going to ask you if you have found any code anywhere to do this – it would save me some work!?
    Thanks

  12. Tim Cimbura says:

    My suggestion would be to avoid using IWP if possible. Instant Web Publishing is not very reliable or scalable. You’re better off to use other solutions in many cases.

  13. Was anyone ever able to make the web viewer transparent? I have tried using both a transparent background .gif file or just a simple “data:text/html,” & “Hello World” in the web viewer and it always fills the webviewers background white.

    I have set it to have no theme, no background, no borders…. but still no luck.

  14. This is awsome, but I can not get it to work in FM11. Any ideas

  15. nevermind I figured it out. Way cool

  16. Hi, I am new to filemaker pro. I have written in 4d years ago. I am wanting to get the syntax of how to display the progress indicator. Here is my code trying to use an show custom dialog window. can some one help me with the syntax of how to display the progress indicator in a window as the loop is progressing?
    My screen shot of my code: http://ausprint.com/progress-code.jpg
    Regards, Graham
    Possibly i have to get this first one written?

    • Tim Cimbura says:

      The progress indicator example here must be shown on a FileMaker layout that may simulate a real dialog box. You can’t display it within a dialog box as defined by FileMaker since it doesn’t have an option to show a graphic or web web viewer.

      • Thanks Tim, file maker is really great but i am used to all these things being built in to 4d. I I am getting a handle on things gradually.

  17. I’m assuming that this script integrates directly into my long-running script to somehow know how long to run. My question is, where is my script placed inside of your script? It looks like a very promising solution for my two long-running scripts.

    Thank you!

  18. Tim Cimbura says:

    You need to add the script steps to your existing loop to update the display. You also need to somehow estimate how long is left as a number from 0-10 for the progress bar and 0-100 for the percentage. If you’d like help to implement this let us know.

    • Tim -

      Looking at the script, if I embed your script within my script it appears that the Pause/Resume step would pause my entire script – is that true? Or do I add a “Perform Script” within my script to call your script?

      Both of my long-running scripts would use the indeterminate version of your script.

      Thank you!

  19. Gerold Bigorajski says:

    Hi,
    the new progress bar can be refined and made slimmer at the same time with an easy trick; it is assumed that the progress percentage is known during the process.

    Take the image for 100% (resp. >90), scale it with width=’(percentage’)%’ attribute. Maybe height=… is needed too to avoid getting the progress indicator squeezed to a 1pt line.
    Fill the rest with the 0% (blank) image scaled vice versa. Done.

Trackbacks

  1. [...] Awesome Progress Bar – Show good looking progress indicators without any plug-ins. [...]

Speak Your Mind

*