This article demonstrates a method for invoking custom JavaScript/HTML/CSS from within a 'Form Builder' component. The following Web Sites were used as inspiration for this article:
Loading Page http://atmaworkflow.com/2014/11/03/loading-page/#more-362
Simple JavaScript HTML CSS progress bar http://ruwix.com/simple-javascript-html-css-slider-progress-bar
The recipe for this method is as follows:
1) Create your JavaScript/HTML/CSS content and reference it from within an 'IncludeHTML' component. a) Give the 'IncludeHTML' component a unique 'Control ID'. For example: CSS b) Create a Functionality -> 'Custom Events' entry like this:
onclick = if ( count > 0 ) { drawszlider(100, count); } NOTE: The 'count' variable is from the project and is "drag & dropped" into the JavaScript.
2) Double-Click in an empty area of the 'Form Builder' panel and create a Behavior -> 'Body Custom Events' entry like this:
onload = document.getElementById('CSS').click();
3) Add an 'Auto Exit Page On Timer' component and set the Refresh interval to (1) second.
The attached 'Progress_IncludeHTML_source.txt' file is the content referenced by the 'IncludeHTML' component. The attached 'Progress.package' project includes a working example of this method and also includes the stock 'Progress Bar' component for comparison. --------------------------- November 13, 2015 --------------------------- 1) Attached new project (Progress_ajax.package) with updated Progress Bar style and Ajax technology. 2) Attached source for the updated Progress Bar (progress_ajax.txt). NOTE: Page flicker seems to be unavoidable.