OK, it's not exactly "Calling A Stored Procedure From HTML", it's calling a stored procedure from JavaScript, but JavaScript is a fact of life when developing HTML web pages... JavaScript is arguably the most important programming language in the world today.

The SELECT on lines 9 through 35 builds an HTML TABLE containing all the columns in the Customer table.

The WHERE clause on lines 28 through 35 applies the search string to eight of those columns, with a few cute twists:

The search string is matched against leading characters in Surname, GivenName, City, PostalCode and Phone.

The search string is matched against any substring in Street and CompanyName.

The special format 'xx=state' lets the user specify exact State values.

Those cute twists aren't important in themselves, they only serve to illustrate that all the power of SQL queries is available when calling stored procedures from JavaScript.

Here's are the Windows command line for starting the SQL Anywhere 16 demo database with the builtin HTTP server enabled on port 12345, and then launching an ISQL session so you can load the code shown above:

Thursday, January 1, 2015

Update January 7, 2015: This article has been updated to reflect Mark Culp's comment about using LONG BINARY and the CSCONVERT() function, plus the new website_file.csconvert_required column.

Fiori is the name given to a new style of user interface developed using the SAPUI5 client-side HTML5 and JavaScript library. This article shows how to embed the SAPUI5 library in a SQL Anywhere database so you can build Fiori-style applications with the following advantages:

All the scripts and data are stored in a database where they are protected from loss, attack and accidental modification.

All the scripts and data are available locally when the internet connection is lost.

In particular, this article shows how to:

Store text and binary files in a SQL Anywhere table so they can be served up as HTTP responses by SQL Anywhere's built-in web server.

Code a SQL Anywhere "root" web service that returns rows from the table just like an ordinary web server returns files from the server.

Use a simple HTML page to show that the table and web service work as advertised.

Download all the SAPUI5 Fiori files into your SQL Anywhere database so they'll work just like the files stored on the internet.

Show how the "SAPUI5 in 20 Seconds" Fiori demo can be made to work from inside SQL Anywhere by making a one-line change.

1. Store Website Files In SQL Anywhere

Here's a Windows batch file that creates and starts a new SQL Anywhere database and then launches an ISQL session for running SQL commands:

The file_name column holds the relative URL for each file, and the data is stored in the contents column.

The content_type and csconvert_required columns are filled in automatically when a row is inserted or updated:

CREATE TRIGGER insert_update_website_file
BEFORE INSERT, UPDATE ON website_file
REFERENCING NEW AS new_website_file
FOR EACH ROW
BEGIN
DECLARE @extension_pos INTEGER;
DECLARE @extension VARCHAR ( 100 );
SET new_website_file.file_name = TRIM ( REPLACE ( new_website_file.file_name, '\\', '/' ) );
SET @extension_pos = LOCATE ( new_website_file.file_name, '.', -1 );
SET @extension
= IF @extension_pos = 0
THEN ''
ELSE SUBSTR ( new_website_file.file_name, @extension_pos + 1 )
ENDIF;
CASE @extension
WHEN 'bin' THEN
SET new_website_file.content_type = 'application/octet-stream';
SET new_website_file.csconvert_required = 'N';
WHEN 'css' THEN
SET new_website_file.content_type = 'text/css';
SET new_website_file.csconvert_required = 'Y';
WHEN 'dll' THEN
SET new_website_file.content_type = 'application/octet-stream';
SET new_website_file.csconvert_required = 'N';
WHEN 'doc' THEN
SET new_website_file.content_type = 'application/msword';
SET new_website_file.csconvert_required = 'N';
WHEN 'exe' THEN
SET new_website_file.content_type = 'application/octet-stream';
SET new_website_file.csconvert_required = 'N';
WHEN 'gif' THEN
SET new_website_file.content_type = 'image/gif';
SET new_website_file.csconvert_required = 'N';
WHEN 'htm' THEN
SET new_website_file.content_type = 'text/html';
SET new_website_file.csconvert_required = 'Y';
WHEN 'html' THEN
SET new_website_file.content_type = 'text/html';
SET new_website_file.csconvert_required = 'Y';
WHEN 'jpg' THEN
SET new_website_file.content_type = 'image/jpeg';
SET new_website_file.csconvert_required = 'N';
WHEN 'jpeg' THEN
SET new_website_file.content_type = 'image/jpeg';
SET new_website_file.csconvert_required = 'N';
WHEN 'js' THEN
SET new_website_file.content_type = 'application/javascript';
SET new_website_file.csconvert_required = 'Y';
WHEN 'json' THEN
SET new_website_file.content_type = 'application/json';
SET new_website_file.csconvert_required = 'Y';
WHEN 'pdf' THEN
SET new_website_file.content_type = 'application/pdf';
SET new_website_file.csconvert_required = 'N';
WHEN 'png' THEN
SET new_website_file.content_type = 'image/png';
SET new_website_file.csconvert_required = 'N';
WHEN 'saplan' THEN
SET new_website_file.content_type = 'application/xml';
SET new_website_file.csconvert_required = 'Y';
WHEN 'txt' THEN
SET new_website_file.content_type = 'text/plain';
SET new_website_file.csconvert_required = 'Y';
WHEN 'xml' THEN
SET new_website_file.content_type = 'application/xml';
SET new_website_file.csconvert_required = 'Y';
WHEN 'zip' THEN
SET new_website_file.content_type = 'application/zip';
SET new_website_file.csconvert_required = 'N';
ELSE
SET new_website_file.content_type = 'text/html';
SET new_website_file.csconvert_required = 'Y';
END CASE;
END;

The SET on line 9 changes all the Windows "\" characters to URL-friendly forward slashes.

The code on lines 11 through 77 extracts the extension (e.g., .html) from the file_name value, then uses it to fill in the content_type and cs_convert_required columns.

2. Create A Web Service For Website Files

This web service is like no other: it has no name, and no parameters (well, it does have the name "root" but that's syntactic sugar meaning "no name").

This is the web service that gets called when no other web service matches the URL, and that's what happens when an URL specifies one of the file_name values from the website_file table; e.g., http://localhost:12345/Hello_World.html

The CREATE SERVICE statement on lines 1 to 3 defines a service-with-no-name that calls the web_server procedure with no parameters.

The SET statement on line 12 copies the URL value from the HTTP header of the same name.

The SELECT on lines 18 through 23 determines what 'Content-Type' value to use in the CALL on line 25, and whether or not the CSCONVERT() function should be called from the IF expression on lines 27 through 30.

The SELECT on lines 27 through 32 returns the website_file.contents to the browser.

The code on lines 1 through 8 uses the techniques shown in Proxy {Variables} to create a proxy table that represents the resources folder and all its subfolders, and the INSERT SELECT on lines 10 through 18 loads all the files (just the files, not the 'd' directories) into the website_file table.

Note that the file_name field contains the relative path subfolder names beneath the resources folder so that different files with the same name located in different subfolders can be differentiated from one another.

Note that the button shows the Fiori-style color change when the cursor hovers over it:

Tip: When something goes wrong, use the browser's built-in debugger. Chrome is best; the latest version of Firefox is pretty good, but IE's debugger sucks.

For example, if you try to run the "SAPUI5 in 20 Seconds" demo from the file stored on your hard drive instead of the one in the database, like this

file:///C:/Temp/SAPUI5_SQL_Anywhere_in_20_Seconds.html

you will see absolutely nothing in the browser window. Click right mouse - Inspect element to open the debugger to see the dreaded "not allowed access" error:

XMLHttpRequest cannot load
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Here's what it looks like in the Chrome debugger:

To find a solution just copy and paste the error message text into Google; chances are, many others have found and fixed and documented the same problem (in this case, there are workarounds that will let you mix HTML files on the local disk and in the database, but the simplest solution is to load everything into the database so it all has the same "origin".)

Oh, and if you see several messages, just make one fix and test again... chances are that all the messages have the same cause.

And don't feel bad if you don't completely understand everything the debugger is showing you; you're not looking for a deep understanding of the internet, just a fix for your application.