Portage Bay
Solutions
Portage Bay

Simple Javascript Tasks

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”.

spinner.gif

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>"
clock.gif

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>"
MovingImage.gif

Moving Logo

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>"
ProgressBar.png

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.