Web Viewer Magic
The text below is a narrative of the speaker notes used in the recorded session above
If you take a look at the video below, you will a loop of see several examples of javascript, HTML, CSS and FIleMaker working together to provide extended functionality right inside FileMaker layouts.
Thats right, every one of these examples you will see in the video is a FileMaker layout….(No Plug ins, No License Costs, No Web Servers!)
..they all run on the desktop or an iPad, iPod Touch or iPhone and WITHOUT connection to the web.
..and believe it or not they are not that difficult to create.
- You don’t need to know JS or CSS or HTML
- Just know FileMaker
- and how to copy and paste
The session discusses what HTML5 is and why FileMaker developers should care…
… and then teaches you the basics behind integrating HTML, JavaScript, Cascading Style Sheets into Web Viewers in your FileMaker layouts.
It also introduces you to some important concepts like using DATA URLS and how to perform actions within FileMaker using FMP URLs, how to use the FIleMaker calculation engine to generate the HTML required to add features like you see here on screen..
Then discusses how you can use FileMaker scripts to manage the logic within each of these solutions.
You learn a technique that iSolutions had developed that makes it easy to integrate state of the art functionality into your FileMaker databases and allows you to create eye-catching interfaces JUST LIKE THESE for YOUR FileMaker data and visualize your data in ways you would never have previously imagined and most importantly, it is intended to inspire YOU to use your own imagination to take your FileMaker databases to places you would have never dreamed of before.
Cris Ippolite had been working on this technique for a couple years prior to this session and had already had multiuple examples of client projects using this integration by 2013. But the FileMaker community still had not seen anything like it.
HTML5 as a “brand name”
Before we began exploring HTML5 in more detail, it’s worth taking a moment to discuss what HTML5 actually is and what people are ACTUALLY talking about when they say HTML5.
If you go by the official spec, HTML5 is a list of specific features, including Canvas, Video, Audio, the new form controls, the new semantic markups, and microdata.
Not only is it these features, but browser support for these features….
However, to do the types of things most people are talking about when they use the term “HTML5”, you actually need other technologies in addition to HTML.
For example, Apple launched its HTML5 Showcase page, featuring seven really cool demos of features like transitions, next-generation typography, and video support.
The only problem was that only two of the examples featured HTML5 capabilities,the audio and video demos.
The rest were collection of CSS3, JavaScript, and HTML5.
HTML5 alone cannot provide animation within web pages, transitions, drag and drop, etc
Either JavaScript or CSS3 is necessary for providing much of the interactivity identified as HTML5.
In order to demonstrate how to integrate these technologies into your FIleMaker Solutions, I have put together a quick demo of how this all can work.
Its a pretty simple concept, you have a Web viewer on one side and a Text field on the other.
The Web Viewer is set to display the contents of the Text field.
In the Text Field I am going to write some simple HTML:
<html>
<head>
<body>
Hello World!
</body>
</html>
A Web Viewer is actually intended to display whatever a WEB BROWSER can display, and a Web browser can display and properly formatted HTML, however, if you want to display HTML that is NOT hosted by a web server (i.e: an HTML document) , then you need a special trick to make this work.
If I hit this button it will add the following prefix to the HTML:
data:text/html,
…this is called a “DATA URL”.
By simply adding this prefix to any Field or Calculation that will contain or result in HTML allows a web viewer to display the results of the HTML and the best part is that with a DATA URL, Web Viewers can display HTML when not even connected to the web.
In this case I have ADDED SOME CSS:
data:text/html,
<html>
<head>
<style type=”text/css”>
#block {
position:absolute;
top:10px;
left:10px;
display:block;
height:100px;
width:100px;
border:#333 solid 1px;
background:#F66;
padding:5px;
}
</style>
</head>
<body>
<div id=”block”>Box 1</div>
</body>
</html>
…which shows that the HTML generated and displayed by FileMaker DOESNT HAVE TO BE TEXT ONLY. For example, I can actually display an Image in the web viewer by using a
<imgsrc=> tag
..which allows me to use an image hosted on a web server, but if you look at this URL I am using in this demo, you will notice that something interesting is going on here. I am using a special URL syntax that allows me to point to an image (or file) stored in a Container field of a hosted filemaker file!
http://SERVERNAME/fmi/xml/cnt/data.png?-db=DATABASENAME&-lay=LAYOUTNAME&-recid=RECID&-field=FIELDNAME
So in this example I am actually pointing to an external filemaker file hosted on this same machine:
[DEMO] Image
…however I could just as easily create a table in this same file to contain the images and point the URL back to the internal table in my URL….
Image Handling:
- XML container tag URL for hosted files (can be recognized by HTML5)
Checklist:
1. Is the database that stores the images in containers being hosted on FileMaker Server?
2. Does the database have the fmxml extended privilege enabled for an active account?
3. Are you using this syntax:
http://IPADDRESSOFWEBSERVER/fmi/xml/cnt/data.EXTENSIONOFIMAGE?-db=DATABASENAMEe&-lay=LAYOUTNAME&-recid=RECORDID&-field=FIELDNAME
I just created a calc to dynamically display the correct syntax and I use that in all “Calling” HTML:
back to: [DEMO] Steps
Now I am going to take this a step furtheR, instead of just embedding HTML or Image References, I found some JAVASCRIPT that will allow me to interact with the images and move them around on screen.
So if you embed or reference a Javascript document within your HTML, you can then reference the functions within the JavaScript…
This JavaScript WORKS WITH THE HTML5 <CANVAS> TAG TO ALLOW movement on screen….
I am showing this fully exposed, but in actuality I need only to reference the document near the HTML header…
Now I am going to take this ANOTHER step further….
I can move things around on screen, but this Javascript also allows me to IDENTIFY SPECIFIC ACTIONS, LIKE RELEASING AN IMAGE AFTER MOVING IT.
JAVASCRIPT EMBEDDED INTO HTML ALSO ALLOWS ME TO LAUNCH A URL WHEN AN ACTION OCCURS.
So I added this very special URL here at the bottom of my HTML:
function callFM(){
window.location = “fmp://10.211.55.2/Steps?script=ReportDragPosition&$left=300&$top=200”;
};
..what you will notice about this URL is that it begins with FMP, not HTTP… this is a FMPURL….
FMP://
If you have any experience with web publishing then you have already seen an example of a URL.
…a URL contains information on where to find hosted file, and uses a syntax to instruct the host application on how to perform an action in the database.
Every web application uses this concept to communicate from the web application in a browser to the database application on the host machine.
But its not just web applications.
You are used to seeing HTTP:// or even FTP://, followed by a string of instructions, but FILEMAKER has its own.
…this is a URL syntax that is specific to the FileMaker application.
..and not only can the syntax be used to OPEN a file, but it can also trigger a script or pass the script a parameter or variable.
URL Syntax
There are several forms of the URL scheme that cause FileMaker Go to behave in different ways:
FMP://<host>/<file>?script=<scriptname>[¶m=<parameter>][&<$name>=<value>]
This form of the URL causes FileMaker Go to look for and open (if not already open) a remote FileMaker file. Then the named script must be in that file. Once the file is opened, it will look for and execute the script specified in the URL.
FMP://$/<file>?script=<scriptname>[¶m=<parameter>][&<$name>=<value>] This form of the URL causes FileMaker Go to look for the named script in a file by the given name that is already open.
FMP://~/<file>?script=<scriptname>[¶m=<parameter>] [&<$name>=<value>]
This form of the URL causes FileMaker Go to look for and potentially open a file with the specified name from over the network or on the local device in the Documents directory. Then the named script must be in that file.
The syntax of the URL is important because FileMaker Go will behave slightly differently depending on which syntax is used.
FileMaker Go also supports the account name and password options of the URL protocol. If you wanted FileMaker Go to be opened from another iOS application using account name and password options, the URL syntax would look like this:
[account:password@]<host>/<file>?script=<scriptname>[¶m=<parameter>] [&<$name>=<value>]
HOWEVER, YOU ARE LIKELY TO NEVER NEED TO PASS ACCOUNT INFO…Here’s Why:
When you execute the FMPURL and run a script from within the web viewer, YOU ALREADY AUTHENTICATED against the database
..so the running a script via n FMPURL is the same exact thing as running one via any other trigger.
You DO NOT NEED TO LOG IN AGAIN to execute.
For that same reason, your script execution will not effect other users sessions, just shared data.
So in this example, I am calling an FMPURL that will
Look at this IP:
10.211.55.2
For a file called:
Steps
And will run a script called:
script=ReportDragPosition
Passing the script these variables:
$left=300 & $top=200
And I am attaching it to a function that says that IF I DRAG AN DDROP THE PERSON IMAGE ANYWHERE ON THE CHAIR IMAGE, FIRE THE URL..
…and I can call FileMaker scripts from anywhere in my HTML.
THIS WAY I CAN HAVE THE WEB VIEWER TRIGGER ANY SCRIPT IN THE FILE WHILE PASSING IT VARIABLES…
OK, so is this making sense so far?
Web Viewers can display HTML
FileMaker CALCS can generate HTML and even integrate dynamic FM data
Web Viewers can pass data back to FM
…pretty cool, eh?
BUT NOW LETS GET THE USERS INVOLVED:
The idea here isn’t to have to have your users type HTML into fields to get the web viewer to do things….
However, the HTML contains specific elements of data that can manipulate what happens in the web viewer…
So why not expose those parts to the user and let them manipulate the web viewer?
For example, here is a modified version of the same layout we saw earlier…
But in this case, I broke up the text fields into three different fields…
two of them will be hidden to the user and the one (in Yellow) will be exposed, allowing them to change the value…
then the WEB VIEWER concatenates all those fields into one outputted HTML for the web viewer to display….
…for example…
…and because the web viewer is ESSENTIALLY AN UNSTORED CALCULATION, it updates every time a user commits….
AND IT DOESN’T HAVE TO JUST BE USER DRIVEN DATA, IT CAN BE DATA FROM CALCULATIONS, RELATIONSHIPS, SCRIPTS…
SO think of a Web Viewer as an UNSTORED CALCULATION FIELD THAT RESULTS IN A WEB PAGE. FileMaker can both GENERATE AND DISPLAY HTML.
Also you can store all the JavaScript and CSS in other fields and just reference them within the concatenated calc in the web viewer:
ok….so lets switch out of this demo and into something more practical so I can show you how we can really add significant functionality to our filemaker layouts:
In this example I am going to show you how to add these features to a PROJECT MANAGEMENT database…
This database manages:
- Projects
- Collaborators
- Tasks
..and I am going to use this technique to enhance the layouts and provide instant visibility on things like
- What Percent complete the project currently is
- Over what days are the tasks
- What percent complete are the collaborators tasks?
First, I have decided to add a PROGRESS BAR to the main layout so that I can have an ‘AT A GLANCE’ look at how complete the project. So the way this works is that I will search the web for some of the thousands of FREE resources.
In this case I found the perfect progress bar on a site called RGRAPH.
This website has a DOWNLOAD section where I can get all of the files I need to integrate this technology.
In order to integrate this Progress Bar I need all of the following files:
- One CSS (demo)
- two Javascript
- and one HTML
…the good news is that we do not even have to look at the javascript or css to use ..let alone understand the code..what we do have to do is Look at the HTML and we will need to use our FILEMAKER CALCULATION WRITING SKILLS TO CREATE A CALC THAT “OUTPUTS” THIS HTML.
<!DOCTYPE html >
<html>
<head>
<link rel=”stylesheet” href=”demos.css” type=”text/css” media=”screen” />
<script src=”../libraries/RGraph.common.core.js” ></script>
<script src=”../libraries/RGraph.vprogress.js” ></script>
</head>
<body>
<canvas id=”cvs” width=”100" height=”400">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var vprogress = new RGraph.VProgress(‘cvs’, 89,100);
vprogress.Draw();
}
</script>
</body>
</html>
…in this case its not that difficult. Its only 24 lines of text. One thing you will notice is that there are three references in this code that point to external files:
<link rel=”stylesheet” href=”demos.css” type=”text/css” media=”screen” />
<script src=”../libraries/RGraph.common.core.js” ></script>
<script src=”../libraries/RGraph.vprogress.js” ></script>
We are not going to point to external files but instead simply turn these into FileMaker fields and just reference them in our calc like we would any other calculation.
So how are we doing this?
back to: [DEMO] Proj Mgt / PROGRESS BAR
in our file you will see that I created a table called “RESOURCES”
It contains no records and does not represent an ENTITY, just a place to store our code within this table are a series of fields. I have a lot of fields here as this file has several HTML/JSS features built into it, but notice these 4 in particular. Three of them created to store either JAVASCRIPT or CSS code so we can reference it within our calculation and the fourth is the CALCULATION THAT OUTPUTS fully formatted HTML code.
I created a layout where i can administer these fields and their contents.
On this layout I have each field and a sample of what the HTML needs to look like and to keep my promise I will show you how little you need to know about JAVASCRIPT all I need to do int he JAVASCRIPT and CSS if fields is simply copy and paste the contents of each document into the appropriate field, once I have all the CSS and JS in the global fields in my RESOURCE table I need to build the CALC that will out put the HTML.
I already have the calc created here….lets take a look
I AM CREATING THE CALCULATION FIELD IN THE CONTEXT OF THE TABLE THAT WILL PROVIDE THE DATA I AM DISPLAYING….
IN THIS CASE, WITHIN MY EVENTS table
its called “ProgressHTML_calc”
It looks more complicated that it really is, but most of this is just line breaking and wrapping certain text in quotes — notice where the original HTML references external JS and CSS files, I am actually referencing $$Vars….
I could simply reference the Global field here, which is fine, but since these files can get very lengthy and verbose, I chose to set them to global variable son startup so I can use application memory instead of my network connection, plus they are GLOBALLY STORED variables so I can reference the contents of these vars from any context. They are also session specific if this is a single user file or a file on an iPad, direct field references are completely fine.
Here is the SCRIPT I run on startup that writes the field contents to $$vars:
..again, not needed in single user or iOS only deployments…
Once you have your code embedded, and your calculation created, you can REFERENCE THE CALC WITHIN YOUR WEB VIEWER….you’ll notice that I named the WEB VIEWER “Progress”….but the Web Viewer simply references the calc field….and in Browse mode displays the Chart.
NOTICE THAT WHEN I RESIZE THE LAYOUT, The chart resizes and when I update TASKS, the CHART MOVES…all without REFRESHING!
Thats because of the fact that a WEB VIWER IS SIMPLY AN UNSTORED CALCULATION THAT RESULTS IN HTML. THAT CAN BE RENDERED AND DISPLAYED IN A LAYOUT AND WILL UPDATE WHEN ITS ANY REFERENCED FIELD ARE UPDATED…
…Lets go back to the calculation to show you HOW THE CHART UPDATES….
First, what makes the chart resize…
// →DYNAMIC SIZING
“<canvas id=”&Quote(“cvs”)& “width=”&Quote(“200”)&”height=”&Quote(GetLayoutObjectAttribute ( “Progress” ; “height”)-25)&”>[No canvas support]</canvas>”&¶&
…this code uses the GetLayoutObjectAttribute function rather than a text reference for the size of the Web Viewer object. Its the object I named earlier…
…..but how about the Data that drives the bar height?
// →CALC THAT SHOWS DYNAMIC TASK PERCENT COMPLETE
Event_Progress_calc
…this is another Calc field I created…called EVENT_PROGRESS_calc
You will see below is what the original HTML looked like…instead of HARD CODING in the data “89” and “100”, I make the 89 value dynamic.
It is intended to represent the PERCENT COMPLETE of all TASKS on this PROJECT so I created another calc to track that value…
So this is all just using your EXISTING FILEMAKER SKILLSET…TO get DATA into your HTML.
I just create a calc that grabs data and outputs it in a format that matches what the HTML requires.
Now in this file I have a few different examples of the same technique:
This Gantt chart displays dynamic data that comes from the related TASK records. Same thing here, when I update a related Task, the Gantt Chart updates...and it resizes dynamically too!
Its the same concept, a CALC that references related TASK data and displays it in the HTML format required by the original files I found online.
In this case, it was required that my data be displayed in a certain format.
But here I needed to display and ARRAY of related data, so I USED THE LIST FUNCTION and reference a field in the CHILD (CONTRIBUTOR) table that is also formatted to match the required HTML for each line of text…again, just using the HTML as a guide and my FileMaker Calculation skillset to format the FileMaker data in the required fashion and I did the same in each of these other examples too.
DATA ARRAYS
So just to review….the common theme here is that each of the sample applications I showed you all use data in the HTML. So if we are to use our FileMaker data in the application, then we have to use the FileMaker Calc engine to display the data in the specific format required.
I use a combination of relationships to child table and the LIST function to display the required formatted test in a dynamic manner inside my calcs.
How to Approach this (Steps):
1. Find some Java Script
2. Open HTML and look for all .js and .css references
3. Create a Resources table and create global fields for each .js and .css field required
4. Create open script that sets global field values to $$vars on open
5. Create a Calc field to replicate the HTML and reference the .js and .css $$vars where applicable
6. Integrate filemaker fields into the CALC to allow for dynamic content or user interaction
- Reference Calc field in Web Viewer (or define calc in Web Viewer setup)
OBJECTIVE: Was to create a layout that would allows users to move elements around on screen to preview a catalog page.
Base64 encoding
Base64 is an encoding scheme used to represent binary data in an ASCII format.
This is useful when binary data needs to be sent over media that are usually designed to handle textual data.
** My example is when any of my CSS files that I am embedding into a global field have a URL reference to an image…
Is Base64 secure and can it be used to encrypt or obfuscate my data?
Hell no! Base64 is not for encryption purposes and is not secure at all. It’s an encoding mechanism, nothing more.
Base64 encoding increases the resulting file size by 1/3
It will never be smaller in size, unless you were to compress it with some other algorithm (e.g. zip).
I would suggest encoding images AS needed and storing them to the Application memory via $$Var and so they flush out after the session ends.
OBJECTIVE: Was to create a Map to plot all Customers by address and cluster them by their sales totals while allows users to drill down.
JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format.
- It is easy for humans to read and write.
- It is easy for machines to parse and generate.
- It is based on a subset of the JavaScript Programming Language,
JSON is a text format
These properties make JSON an ideal data-interchange language.
JSON is built on two structures:
- A collection of name/value pairs.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
What I find most useful about JSOn is that it inherently has a PARENT/CHILD structure which elegantly with Related Data.
So I can create relationships within the data format that I can use to my advantage when parsing.
RELATED FIELDS
PORTALS
..right inside the data format..
TIPS
Make Resource fields GLOBAL so you do not have to worry about creating relationships to the resources when you want to use (or reference) them
Use “&¶& line breaks at the end of each line, that ways you can view source or see the result in Data Viewer and copy them as a document with the same format as the original….for troubleshooting..
.js external references get replaced with
“<script>”&$$utilities_js&”</script>” &¶&
.css external references get replaced with :
“<style type=”&Quote(“text/css”)&”>”&$$transitions_css&”</style>” &¶&
Dynamic width and height:
Quote(GetLayoutObjectAttribute ( “Gantt” ; “width”)-50)
Use Quote() function to escape all quoted text in calc:
“<html lang=”&Quote(“en”)&”>& ¶ &
Weird “bug” with Web Viewer on FM Go requiring a refresh
(“GoTo Object”), LOCK Zoom
I would suggest Base64 encoding images AS needed and storing them to the Application memory via $$Var and so they flush out after the session ends.
Remember when executing scripts via in the Web Viewer that FMP URLs that you are running a script WITHIN the same session so CONTEXT is just as important as regular scripts (also, no need to re-authenticate!)
EXAMPLES:
RETRO STUFF:
