Simple Javascript Tasks

Joe Ranne December 22, 2018 FileMaker, JavaScript, Tips, Web Viewer Comments (10)

FileMaker’s web viewer is often referred to as a “black box” within the FileMaker framework. There are seemingly endless uses hidden within it’s confines, from simply displaying a webpage to integrating Google calendar into a FileMaker solution.

It’s been around since v8.5, and has come a long way in it’s usage in the FileMaker community. While it’s true that the web viewer can be utilized to perform a number of high-level tasks such as (Seedcode’s Dayback Calendar, our own PBS Map Widget and Pivot Table solutions, and GoDraw by Geist Interactive), the web viewer can also be used to do a number of simple tasks. Over the years, I’ve made a small collection of simple web viewer tasks that can be copied to solutions with minimal dependencies to the FileMaker solution. To use, create a web viewer object on a layout, copy-and-paste the code into the web viewer “Web Address”, then turn off the options for “Allow interaction with web viewer content”, “Display Progress Bar”, “Display Status Messages”, and “Automatically Encode URL”.

The Spinner

A simple javascript spinner. If you need an indicator to show during any sort of long-running script like a sync or “Perform Script on Server”, showing this web viewer object during the process will indicate to the user that something is happening and they need to wait until it’s completed. It doesn’t interact with any fields within the solution, so there are no dependencies. Simply copy-and-paste the following code into a web viewer.

"data:text/html,
<head>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <style>
      /* Set spinner stype options here */
      .loader {
      border: 12px solid #909090;
      border-radius: 50%;
      border-top: 12px solid #505050;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
      }
      @keyframes spin {
      95% { transform: rotate(120deg); }
      100% { transform: rotate(360deg); }
      }
   </style>
</head>
<body>
   <div class='loader'></div>
</body>
</html>"

Really Big Time with Seconds

Years ago, back in the FileMaker 10 days, I was asked to create a timeclock application in FileMaker that displayed the current system time down to the second. I initially tried to create a time field that would update with an “Install On Timer” script, but then remembered the handy web viewer and whipped up this simple bit of javascript. It hasn’t been updated in years, but it still performs just as good as the day it was written all those years ago.

"data:text/html,
<html>
<head>

<script language='javascript' type='text/javascript'>
function displayClock() 
{
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = 'AM';
if (hours > 11) amOrPm = 'PM';
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = '0' + minutes;
if (seconds <= 9) seconds = '0' + seconds;
dispTime = '<b>'+hours + ':' + minutes + ':' + seconds + ' ' + amOrPm+'</b>';
document.getElementById('time').innerHTML = dispTime;
setTimeout('displayClock()', 1000);
}
</script>
</head>

<body style='font-size:5.5em ; font-family:Futura ; color:909090 ; background-color:FFFFFF ; margin-left:0px ; margin-top:0px ; margin-right:0px ; margin-bottom:0px ; text-align:right ; border:0 ; margin:0 ; padding:0' ; onload='displayClock()'>
<div id='time'></div>

</body>
</html>"

Remember all those times when you wanted to put a moving logo on a layout? Yeah, me neither. Well, if that scenario ever does pop up, a web viewer will do the trick. Use the following code in a web viewer, then change the URL to point at the image you’d like to use.

"<!DOCTYPE HTML>
<html>
   <head>
      <meta charset='utf-8'>
   </head>
   <body>
      <div class='image'></div>
      <!––Specify direction and distance here-->
      <style>
         @keyframes go-left-right {        /* give it a name: 'go-left-right' */
         from { left: 0px; }            /* animate from left: 0px */
         to { left: calc(100% - 175px); }    /* animate to left: 100%-175px */
         }
         .image {
         animation: go-left-right 3s infinite alternate;
         position: relative;
         }
      </style>
      <!––Your Image Here-->
      <img class='image' border='0' src='https://static1.squarespace.com/static/576dc6d2579fb313163ccfa0/t/5772be5be58c628db615db4d/1544217501892' width='180' height='100' >
   </body>
</html>"

Progress Indicator

There are various ways to make a progress indicator in FileMaker, but this version simplifies the process by taking the bootstrapped progress bar from w3schools.com and putting it into, you guessed it, a FileMaker web viewer. This example does have a couple dependencies, but they allow you to update the web viewer object with field values: one for the “ProgressBarType” and one for the “ProgressBarNumber”. The “ProgressBarType” is a calculated field used to calculate which progress bar to display based on the numeric value in the “ProgressBarNumber” field.

"<!DOCTYPE html>
<html lang='en'>
   <head>
      <meta charset='utf-8'>
      <meta name='viewport' content='width=device-width, initial-scale=1'>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
   </head>
   <body>
      <!––Overwrite Bootstrap background color here-->
      <style type='text/css'>
         body { background: #D5D5D5 !important; }
      </style>
      <div class='container'>
         <div class='progress'>
            <div class='progress-bar " & Prefs::ProgressBarType & "' role='progressbar' aria-valuenow='" & Prefs::ProgressBarNumber & "' aria-valuemin='0' aria-valuemax='100' style='width:" & Prefs::ProgressBarNumber & "%'>
               " & Prefs::ProgressBarNumber & "%
            </div>
         </div>
      </div>
   </body>
</html>"

As mentioned above, these bits of code are free for the taking. Copy them to your solutions and customize as needed. We enjoy seeing what the community does with them, so please share your customizations in the comments below. As always, if you have any questions using the web viewer or would like assistance customizing these for your solution please contact us.

10 thoughts on “Simple Javascript Tasks”

  1. Hi,
    I have zero knowledge of Javascript. I’m trying to get the moving logo to work. My image is stored in a container field in a hosted db. I replaced the ”src=” with the name of my field, like ”src= A000_SELECTOR::Logo” but that did not worked and I have no clue as how to proceed. Thank you in advance for your help. Pierre

    Reply

    1. You’ll need to update the image source to point at the direct image file, not a container field. Using the code below, just replace the LINK_TO_IMAGE with the path or URL to the image you’d like to use.

      Reply

      1. Thank you Joe for trying to help. I tried as you have suggested using the path :

        But I’m still just getting a blank moving rectangle. And, yes I am sure the path is good and the logo is there. Any more ideas ? Thank you in advance. Pierre

        Reply

        1. I did a bit of research and, as it turns out, you can reference containers in a web viewer. You’ll need to Base64 encode the container, so as long as your current table can reference the container field, you should be able to use this:

          Reply

          1. YES ! YES ! Thank you ! It works !
            I think I will learn Javascript. Won’t be easy…I’m an old timer…

            Pierre

  2. Thanks for sharing these. I did an elapsed time Web Viewer using the same approach that may be useful. You can stop and start the countdown from a FileMaker script and record the stop and start time in fields using the FileMaker script. My demo is not really interacting with the Javascript, but instead using the Javascript countdown display for visually tracking the passage of time. https://hbase.net/2018/11/21/elapsed-time-display-in-a-web-viewer/

    Reply

  3. Hi,
    I can’t get the spinner to work. I created a web viewer object on a layout and copied and pasted the code and turnoff the options as per your instructions. All I’m getting is a blank object ???? Running on MacOS Mojave and FMP Advance 16.
    Thank you in advance for your help. Pierre

    Reply

    1. Hi Pierre,

      Thanks for the heads-up! It looks like Markdown stripped some of the FileMaker-specific comment in the code block. I replaced the colored syntax with the standard text, so feel free to copy the corrected code.

      Thanks!
      – Joe –

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *