Learning FileMaker 17 released on LinkedIn Learning
Here is Part 4 of the Javascript and FileMaker Video series:
In this video, Cris Ippolite of iSolutions, shows the steps to find, integrate and display Javascript and CSS files within HTML in the FileMaker web viewer layout object.
The video shows how to first find the js/css code and then how to create a table and global fields in your database to store the code. Then how to create a calculation field that outputs the code in the form of HTML that can be read by your web viewer.
This shows a practical example of integrating these technologies with the calculation engine dynamically into your database to extend the way you view and interact with your data.
MORE HTML5 VIDEOS AND POSTS HERE:
FILEMAKER HTML5 DEMO FILES AND RESOURCES
FileMaker Go and HTML5
FILEMAKER AND HTML5 VIDEO PT 2 “DISPLAYING HTML IN THE WEB VIEWER”
FILEMAKER HTML5 PT 3 “MAKING YOUR HTML DYNAMIC”
Here is the source HTML I used:
Progress Bar:
&
lt;!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>
Gantt:
<!DOCTYPE html >
<html>
<head>
<script type=”text/javascript” src=”../libraries/RGraph.common.core.js” ></script>
<script type=”text/javascript” src=”../libraries/RGraph.gantt.js” ></script>
<!–[if lt IE 9]><script src=”../excanvas/excanvas.js”></script><![endif]–><link rel=”stylesheet” href=”demos.css” type=”text/css” media=”screen” />
<title>A basic Gantt chart</title>
</head>
<body><h1>A basic Gantt chart</h1>
<canvas id=”cvs” width=”800″ height=”350″>[No canvas support]</canvas>
<script>
window.onload = function ()
{
var gantt1 = new RGraph.Gantt(‘cvs’, [
[31, 28, 67, ‘Richard’], [0, 28, 50, ‘Rachel’], [12, 28, 45, ‘Fred’],
[59, 14, 0, ‘Barney’], [59, 21, 5, ‘Gloria’], [46, 31, 92, ‘Paul’],
[80, 21, 46, ‘Harry’], [94, 17, 84, ‘Shane’], [34, 14, 32, ‘Kyle’],
[64, 14, 28, ‘Cynthia’], [13, 61, 74, ‘Mabel’], [84, 31, 16, ‘Paul’],
[80, 22, 45, ‘Kiffen’], [0, 115, 50, ‘John’]
]);
gantt1.Set(‘chart.xmax’, 122);
gantt1.Set(‘chart.labels’, [‘January’, ‘February’, ‘March’, ‘April’]);
gantt1.Draw();
}
</script>
</body>
</html>
Accordion:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>jQuery UI Accordion – Default functionality</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script src=”http://code.jquery.com/ui/1.10.1/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<script>
$(function() {
$( “#accordion” ).accordion();
});
</script>
</head>
<body><div id=”accordion”>
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div></body>
</html>
Related posts
