HTML CheckBoxes
Introduction
The HTML Checkboxes Tutorial app illustrate how to use JavaScript to create new UI features (like checkboxes). On a broader basis it illustrates how to leverage the entire set of EachScape Actions providing access to iOS and Android native feature via JavaScript.
To achieve this, we use EachScape JavaScript API ES.API.
Install HTML Checkboxes
HTML Checkboxes is available in the Tutorial section of your Dashboard.
If you haven't yet installed HTML Checkboxes in your workspace, pleas click here to install.
App Overview
HTML Checkboxes uses EachScape JavaScript API (ES.API) to access EachScape Actions.
The actions are stored in a Custom Script and called from the JavaScript code running in an HTML Block.
ES.API is a simple API whose main function is to call a Custom Script
HTML Checkboxes is essentially a myblock HTML Block (Form) running JavaScript calling a Custom Script (sendrequest)
The Custom Script contains an EachScape action translating into the native iOS / Android :
Send an email:
JavaScript call
The JavaScript is contained in the myBlock HTML Block called 'Form'.
Most of the script is about designing the checkboxes on screen and passing the responses selected by the users.
To send the email and to pass the variables the JS uses the ES.API library.
JavaScript Code
The code is relatively simple JS code.
This is a copy / past of what is in the Tutorial app.
The segment where we use ES.API are highlighted:
<!DOCTYPE html>
<!--
This JavaScript implements a set of 3 check boxes
It uses ES.API to call customScript in your app
in this example, it call Custom Script called "sendrequest"
check your app -> MoreSettings -> CustomScript.
to see what that custom script does.
-->
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<!-- here, it it just making demo prettier -->
<style>
*{
padding:0;
margin:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
font-family : Arial;
}
[type="checkbox"]:not(:checked),[type="checkbox"]:checked{position:absolute;left:-9999px;opacity:0}
[type="checkbox"]+label{ position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}
[type="checkbox"]+label:before,[type="checkbox"]:not(.filled-in)+label:after{content:'';position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid #5a5a5a;border-radius:1px;margin-top:2px;transition:.1s}
[type="checkbox"]:not(.filled-in)+label:after{border:0;-webkit-transform:scale(0);transform:scale(0)}
[type="checkbox"]:not(:checked):disabled+label:before{border:none;background-color:rgba(0,0,0,0.26)}
[type="checkbox"].tabbed:focus+label:after{-webkit-transform:scale(1);transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.1)}
[type="checkbox"]:checked+label:before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid #26a69a;border-bottom:2px solid #26a69a;-webkit-transform:rotate(40deg);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;transform-origin:100% 100%
}
form {
display:block;
width : 100%;
}
form > div {
width: 80%;
display:inline-block;
text-align: left;
margin-left:20px;
margin-top: 20px;
}
button {
overflow:visible;
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
will-change: opacity, transform;
transition: all .3s ease-out;
text-decoration: none;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
border: none;
border-radius: 2px;
font-family: "Roboto", sans-serif;
font-weight: normal;
}
button:hover{
background-color: #2bbbad;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
outline: 0;
}
</style>
<!--
When you include HTML Block in the app and build the app,
you have both jQuery and es_js_api accessible and automaticallly available
in the build.
You still need to include the ES.API in your JS code (below). The ES.API code is es_js_api.min.js.
when the document is ready, you need to call,
ES.API.initialize(). There are other ways to make sure when a document is
ready, but since jQuery is available, we use jQuery to be confident the
document is ready and call initialization.
-->
<script type="text/javascript" src="es-jquery-1.7.min.js"></script>
<script type="text/javascript" src="es_js_api.min.js"></script>
<script>
/*
When the document is ready, the call to ES.API.initialize()
prepares the connection with the HTML Block code to handle,
further request.
*/
jQuery(document).ready(function(){
ES.API.initialize();
});
function submitRequest(e){
var form = jQuery('form');
var arr = form.serializeArray();
var arrItems = [];
for( var i = 0; i < arr.length; i++ ){
arrItems.push( arr[i].value );
}
if( arrItems.length > 0 )
{
/*
When ready to trigger the EachScape Custom script,
call ES.API.requestScript(<name of the customScript>, <hash set of variables that you want to set >)
For more on Javascript API, checkout help
*/
ES.API.requestScript("sendrequest", { items: arrItems.join(",") } );
}
else
{
alert("please enter your choice");
}
return false;
}
</script>
<title></title>
</head>
<body>
<form onsubmit="submitRequest(); return false;" >
<div>
<input type="checkbox" value="Apple" name="item" id="apple"> <label for="apple">Apple</label>
</div>
<div>
<input type="checkbox" value="Orange" name="item" id="orange"> <label for="orange">Orange</label>
</div>
<div>
<input type="checkbox" value="Banana" name="item" id="banana"> <label for="banana">Banana</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
The JavaScript is contained in the myBlock HTML Block called 'Form'.
Most of the script is about designing the checkboxes on screen and passing the responses selected by the users.
To send the email and to pass the variables the JS uses the ES.API library.
JavaScript Code
The code is relatively simple JS code.
This is a copy / past of what is in the Tutorial app.
The segment where we use ES.API are highlighted:
<!DOCTYPE html>
<!--
This JavaScript implements a set of 3 check boxes
It uses ES.API to call customScript in your app
in this example, it call Custom Script called "sendrequest"
check your app -> MoreSettings -> CustomScript.
to see what that custom script does.
-->
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<!-- here, it it just making demo prettier -->
<style>
*{
padding:0;
margin:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
font-family : Arial;
}
[type="checkbox"]:not(:checked),[type="checkbox"]:checked{position:absolute;left:-9999px;opacity:0}
[type="checkbox"]+label{ position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}
[type="checkbox"]+label:before,[type="checkbox"]:not(.filled-in)+label:after{content:'';position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid #5a5a5a;border-radius:1px;margin-top:2px;transition:.1s}
[type="checkbox"]:not(.filled-in)+label:after{border:0;-webkit-transform:scale(0);transform:scale(0)}
[type="checkbox"]:not(:checked):disabled+label:before{border:none;background-color:rgba(0,0,0,0.26)}
[type="checkbox"].tabbed:focus+label:after{-webkit-transform:scale(1);transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.1)}
[type="checkbox"]:checked+label:before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid #26a69a;border-bottom:2px solid #26a69a;-webkit-transform:rotate(40deg);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;transform-origin:100% 100%
}
form {
display:block;
width : 100%;
}
form > div {
width: 80%;
display:inline-block;
text-align: left;
margin-left:20px;
margin-top: 20px;
}
button {
overflow:visible;
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
will-change: opacity, transform;
transition: all .3s ease-out;
text-decoration: none;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
border: none;
border-radius: 2px;
font-family: "Roboto", sans-serif;
font-weight: normal;
}
button:hover{
background-color: #2bbbad;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
outline: 0;
}
</style>
<!--
When you include HTML Block in the app and build the app,
you have both jQuery and es_js_api accessible and automaticallly available
in the build.
You still need to include the ES.API in your JS code (below). The ES.API code is es_js_api.min.js.
when the document is ready, you need to call,
ES.API.initialize(). There are other ways to make sure when a document is
ready, but since jQuery is available, we use jQuery to be confident the
document is ready and call initialization.
-->
<script type="text/javascript" src="es-jquery-1.7.min.js"></script>
<script type="text/javascript" src="es_js_api.min.js"></script>
<script>
/*
When the document is ready, the call to ES.API.initialize()
prepares the connection with the HTML Block code to handle,
further request.
*/
jQuery(document).ready(function(){
ES.API.initialize();
});
function submitRequest(e){
var form = jQuery('form');
var arr = form.serializeArray();
var arrItems = [];
for( var i = 0; i < arr.length; i++ ){
arrItems.push( arr[i].value );
}
if( arrItems.length > 0 )
{
/*
When ready to trigger the EachScape Custom script,
call ES.API.requestScript(<name of the customScript>, <hash set of variables that you want to set >)
For more on Javascript API, checkout help
*/
ES.API.requestScript("sendrequest", { items: arrItems.join(",") } );
}
else
{
alert("please enter your choice");
}
return false;
}
</script>
<title></title>
</head>
<body>
<form onsubmit="submitRequest(); return false;" >
<div>
<input type="checkbox" value="Apple" name="item" id="apple"> <label for="apple">Apple</label>
</div>
<div>
<input type="checkbox" value="Orange" name="item" id="orange"> <label for="orange">Orange</label>
</div>
<div>
<input type="checkbox" value="Banana" name="item" id="banana"> <label for="banana">Banana</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
Learn More